top of page
Metal Stairs on Wooden Facade

Designing a Design System

An agnostic and collaborative exercise designed for scalability, team building, and our own sanity
Unbreakable-each-elements-08.png

Project Brief

Client

Key Bank

Role

Group Design Manager

Why Are We Here?

During the development of Key Bank's new design system, we encountered significant challenges. We often found ourselves questioning whether our designs were on-brand, and we grappled with the complexities of atomic design, particularly in understanding how the smaller components contributed to the overall design. In response, our design team embarked on a mission to define these standards and create a platform that would empower us to design confidently, aligning with both our brand and the marketing teams.

Unbreakable-each-elements-07_edited.png
Unbreakable-each-elements-26.png

We were building a design system that considered micro-level components, but we needed help understanding how these components related. 

We were painting a portrait without the canvas.

I mean, Yes...

The Design System Team

Overall, they were doing a good job, improving the many UI inconsistencies and baking accessibility into literally everything (which was terrific). Still, they struggled to convince the other designers, managers, and stakeholders of the overall design strategy and vision.

My Job as a Manager

was to recognize the loopholes, align the teams and stakeholders, and show the value of design. In order for the design organization to become efficient I had four main objectives I needed to address.

1

Design Team

Aligning the design team in the right direction was crucial for our success, enabling them to collaboratively solve problems

2

Stakeholders

By demonstrating the benefits of good design, we could gain the support of our stakeholders and ensure expectations were aligned

3

Enterprise

Gain trust across the organization and demonstrate how enterprise design can be utilized across multiple platforms and devices

4

Vision

To confidently outline the long-term goals for the organization's design team by providing designers with clear direction, inspiration, and motivation

Design Offsite

Course of Action

Host a three day offsite workshop to address the challenges and present findings to stakeholders

Unbreakable-each-elements-06_edited.png
Design Team Collaboration

As a product design group, we had not had the opportunity to openly discuss our ideas for a reimagined design direction. Sure, we all had our opinions, but we needed an open forum to collaborate and properly showcase our unique visions for the product's future. This exercise was not limited to design team members - it was all-inclusive and attended by various product team members regardless of their background, title, or expertise. 

OFFSITE_01.jpg
Individual Mood Boards

Every participant was tasked with creating and presenting a mood board to display and explain their ideas and visual inspirations. We aimed to revolutionize our design delivery approach and gain insight into each participant's design perspective in relation to our roadmap

Unbreakable-each-elements-22.png
Unbreakable-each-elements-21.png
GROUPboard_01.png
Unbreakable-each-elements-32.png
Unbreakable-each-elements-25.png
Combined Group Mood Boards

After individual presentations, each designer selected 10 items from the mood boards, creating our team's mood board. This exercise helped us create a common design language and discuss how these components could complement Key Bank's design system.

What is "Unbank-like"?

Common Themes

A common topic of conversation throughout this exercise was, “How might we make banking - not look like banking?”

Playful illustrations, serifs, and bold typefaces were popular among the designers and aided in establishing a common design vision. This exercise also allowed junior and mid-level designers to take ownership of the creative process.

Next Steps

Now that we had a collaborative and defined design direction, we then partnered with an outside design agency to take our vision to the next level. Not that we didn’t think we could do the work, but having an outside agency’s perspective furthered our collaborative environment both internally and with project stakeholders.

Unbreakable-each-elements-06_edited.png

The Results!

The design team fully engaged with the external design agency. Their objective was to gather the workshop results and collaborate with the design agency to present the new designs to us within a week. The deadline added quite a bit of pressure!

 

By relocating the design team from their usual office environment, we gave their creative minds the freedom to flourish. They were already well-versed in the brand and Key Bank's guidelines, but this exercise allowed them to break down barriers and think more strategically.

OFFSITE_03b.jpg
The Presented Designs Were a...

By accounting for stakeholder and executive priorities, we could include their visions in our deliverables, which excited them and helped prioritize and fund our proposed design direction.

"Breath of Fresh Air"

OFFSITE_04.jpg
OFFSITE_05.jpg
OFFSITE_06.jpg
MOBILE-DEVICE_KDS-b.png

Project Results & Metrics

The initial investment in design resulted in a twofold return. We achieved internal alignment among the design team, design systems team, marketing departments, and executive leadership teams. We developed and presented our strategy, focusing on a Northstar vision. Although the presented designs were just a proof of concept, they continued to be used as we started implementing design enhancements. Even years after this workshop, some initial designs are still being implemented today.

Value of Design

Years after this workshop, some initial designs are still being implemented today. Talk about a return on investment!

View Additional Case Studies
bottom of page