Design Language System - Aurora

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.

 
IMG_2838-b.jpg

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, Dennis - Product Owner, Angel - iOS Developer

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

Frog: Andreas Markdale - Exec. Director - Design, 

 

Timeline: 

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

Client:

Frost Bank


The Process

Moodboarding

Kickoff

We had a Kickoff Day that included the entire Frost design team, the Frog designers, and the McGarrah Jesse designers. Our Kickoff Day included an introduction to the new brand push, introduction to Frost, general mood boarding exercises, goal setting, and discovery interviews with stakeholders.

Location: San Antonio, Texas

 
IMG_1500.jpg
 
 

Week 3:

We worked together in the Frog Studios, stressing about color.

Location: Austin, Texas

Week 4:

We worked together in the Frog Studios. We are still discussing color and Xio is panicking. The team is blending together.

Location: Austin, Texas

IMG_1936.jpg
 

 Week 5:

We worked together at One Frost. We are still discussing color and we pivot on color.

Location: San Antonio, Texas

IMG_1822.jpg

Week 6:

We worked together in the Frog Studios. Magic is starting to happen and the team is working away on populating libraries and patterns.

Location: Austin, Texas

Week 7:

We worked together in the Frog Studios. We work till late Thursday. On Friday we all come to San Antonio for a final presentation to executives —and it was successful!

Location: Austin, Texas & San Antonio, Texas

 

Aurora

We name the Frost Design Language System: Aurora. One of the biggest successes of this project was the collaboration of all the team involved. We used various technics, such as pair designing and mob designing.

Auroras are caused by the collision of charged particles. Like this design system, born out of the collision of creative minds to create something beautiful.

Design Principles

FrostBank-DLS_FinalPresentation_2March.029.jpeg
FrostBank-DLS_FinalPresentation_2March.028.jpeg
FrostBank-DLS_FinalPresentation_2March.004.jpeg
 

Guidelines to inform our work

FrostBank-DLS_FinalPresentation_2March.001.jpeg

Each interaction with a digital touchpoint within the Frost Bank eco-system will reinforce customer trust and contribute to the greater good for everyone’s benefit.

 

We guide our customers toward financial wellbeing

Frost is actively helping customers making better financial decisions. Guidance and support is felt through the experience.

 

We anticipate customer needs and respond proactively

Frost can help offer a more customized and unique customer experience  by understanding and anticipating usage patterns. The experience adapts based on contextual needs.

 

We break barriers to understanding by reducing noise and friction

Frost will provide the tools and insights needed for customers to empower customers. We always win together.


The basics

FrostBank-DLS_FinalPresentation_2March.032.jpeg
FrostBank-DLS_FinalPresentation_2March.033.jpeg
FrostBank-DLS_FinalPresentation_2March.034.jpeg
FrostBank-DLS_FinalPresentation_2March.035.jpeg
 

The System at Work

Aurora is currently being implemented. There has been some changes, it is evolving as the implementation happens. 

FrostBank-DLS_FinalPresentation_2March.037.jpeg
FrostBank-DLS_FinalPresentation_2March.039.jpeg
FrostBank-DLS_FinalPresentation_2March.043.jpeg

This is for the new bold direction for Frostbank.com. The idea is to feature our real customers on the homepage and move the picture of the day into a login screen. The subpages will begin with illustrations that will tell the story and keep the design prinicples in mind.

 A sample of Frostbank.com homepage changes.

A sample of Frostbank.com homepage changes.

These are designs for the authenticaed areas of the site. Once a customer logs in, they will be greeted by a personal message and an illustration that represents their location. We are keeping the important information more prominate and continue the theme of simplicity.

FrostBank-DLS_FinalPresentation_2March.049.jpeg
FrostBank-DLS_FinalPresentation_2March.052.jpeg
 The confetti is to be used in more celebratory areas. 

The confetti is to be used in more celebratory areas. 

FrostBank-DLS_FinalPresentation_2March.059.jpeg

We explored a new ATM Machine design and experience.

FrostBank-DLS_FinalPresentation_2March.062.jpeg
FrostBank-DLS_FinalPresentation_2March.063.jpeg