Design Language System

To unify components that can be reused in different combinations, manage design at scale, and maintain a library of visual and interactive patterns. Our team’s objective was to create a design language system with an overarching scheme and set of interaction and visual design rules that guide the design across an ecosystem of digital products to deliver optimal product experiences on the various platforms.


The problem: 

There was no consistence across channels, including across the same channel. Users have to learn new mental model and interactions each time they login to our different channels. We had new branding coming out and we want to update our visuals to match the new brand initiative.

Frost started 2018 with the idea to move into a new brand expression. In partnership with branding, our team set out to create a new bold design language system for Frost Bank as a means of communicating an overarching scheme or style that guides the design of a product or ecosystem of products. We created a shared set of principles and patterns that allows for rapid iteration using a shared vocabulary across design, engineering, and other disciplines.

Our team’s objective was to create a design language system with an overarching scheme and set of interaction and visual design rules that guides the design across an ecosystem of digital products to deliver optimal product experiences on the various platforms.

Our team set out to explore and create a new visual direction for Frost’s digital touch points.

The direction would set the foundation for a scalable design language system; helping Frost in re-establishing ourselves as a true digital design leader among competitors while taking existing and prospective customers into a new era of personal banking

We strived to shape the intersections between brand Identity and design Language Expression, from the highest level to the detailed craft of each system component.

The Design Language System informed the decisions on the design of the new brand identity that will be rolling out.

Role: 

Design Director

I lead the effort by being the bridge of collaboration from the Frog Design team, McGarrah Jesse, and the in-house Frost Design team.

While keeping an environment that is creative, inspiring, fun —yet productive, pulling designers from the Frog, McGarrah Jesse, and Frost onto one table to create the design language system was a challenge but the collation of talents created magic. I pulled together the best designers from UX, brand, and illustrators. The inspiration was to be thinking about our communicating the Frost story and also thinking about utilitarian areas. We aimed for beautiful artsy and craftsmanship and also intelligent, simple, useful experiences. 

I informed new thinking in marketing and ad collateral to include, new signage, space, and print materials. 

Other Credits: 

Frost: Hani Khan - Senior UX Designer, Bridget Blankenship - UX & Visual Designer, Kevin Domingo - UX Designer and Illustrator, Denise Farrell - Product Owner, Angel Jimenez - iOS Developer

McGarrah Jesse: Stephanie Cain - Lead UX Designer, Jesse Farris - UX Designer

Frog: Andreas Markdale - Exec. Director - Design, Jon Freach - Exec. Director - Design, Natasa Lingurovska - Senior Program Manager, Scott King - Exec. Director - Strategy, David Dale - Visual Designer, Ashley Duban -Visual Designer,  Esther Amaku - Design Intern, Meggan Webber - Senior Visual Designer, Andrew Vanhyfte - Visual Designer

Timeline: 

Creation of the Aurora Jan to March 30, 2018 (7 weeks) 

Client:

Frost Bank