a Design System
Designing
An Agnostic and Collaborative Approach Designed for Scalability and Sanity
Project Brief
Client
Key Bank
Role
UX/UI Manager
Industry
Banking
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
Developers can easily copy the source code directly from the Design System’s website reducing errors.
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.
Colors were optimized across both dark and light backgrounds, meeting or exceeding WCAG accessibility guidelines.
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
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!
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"?
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.
Final Deliverables
