Metal Stairs on Wooden Facade

a Design System

Designing

An Agnostic and Collaborative Approach Designed for Scalability and Sanity
Unbreakable-each-elements-08.png

Project Brief

Client

Key Bank

Role

UX/UI Manager

Project Description

Key Bank’s Design System is formulated by a series of reusable modular design components that are placed in specific combinations (Atomic Design principals) throughout the digital product's ecosystem to ensure consistency with functionality and design. Key Bank's Design System allows product teams to design at scale and helps bring products to market faster.

Methodology

Agile, Team Leadership, ADA Compliance, Design Systems, Bootstrap, Creative Direction, User Empathy, Branding

Unbreakable-each-elements-18.png
Unbreakable-each-elements-21.png
KDS_TypeHelpers-01c.jpg
Unbreakable-each-elements-23.png

Developers can easily copy the source code directly from the Design System’s website reducing errors.

Unbreakable-each-elements-26.png
KDS_Buttons-01.jpg
Unbreakable-each-elements-32.png

Fun Fact! We ultimately selected the color, blue, for primary buttons because it performed well with accessibility tests - I also think it’s a lovely color option.

Partnering with copywriters insured that our component language was consistent and guidelines well defined.

KDS_ColorPalette-01.jpg

Colors were optimized across both dark and light backgrounds, meeting or exceeding WCAG accessibility guidelines.

contact_BG.png

A current design file confirms that designers always have the latest assets and are quickly and seamlessly able to create new content and get products to market faster.

Design Application

Digital Product

 

Project Brief

Building a Collaborative Design Language

Client

Key Bank

Role

UX/UI Manager

Industry​

Banking

Project Description

With the implementation of the component Design System, a cohesive visual design direction was still needed to contain the components. A 3-day Design Thinking off-site was held with the product design team to openly discuss visual design ideas and theories.

Methodology

Agile, Team Leadership, ADA Compliance, Design Systems, Bootstrap, Creative Direction, User Empathy, Branding

Unbreakable-each-elements-06_edited.png
Pure 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 up until this point, we lacked the open forum needed to collaborate and properly showcase our unique visions for the product's future. This exercise was not limited to just members of the design team - it was all inclusive and attended by various product team members regardless of their background, title, or expertise. Pure collaboration!

OFFSITE_01.jpg
Unbreakable-each-elements-11.png
Mood Boards

Each participant was asked to create and present an individual mood board to showcase and explain their personal ideas and visual inspirations. 

After the individual presentations, each designer selected 10 items across all individual mood boards and the top items were placed in a center section which ultimately became our team's mood board.

What is "Unbank-like"?

Unbreakable-each-elements-22.png
Unbreakable-each-elements-21.png
GROUPboard_01.png
Unbreakable-each-elements-25.png
Unbreakable-each-elements-32.png
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
OFFSITE_03b.jpg
OFFSITE_04.jpg
OFFSITE_05.jpg

Final Deliverables

OFFSITE_06.jpg
MOBILE-DEVICE_KDS-b.png