Dunkin' App Design System

Dunkin' recently went through a company wide rebrand with a new logo, campaigns, and improvements to their in-store experience and wanted to translate their new look to their consumer facing mobile app experience. A Boston Based agency, Carter Edwards & Co was already hard at work defining the app experience with design direction being lead by James Cho. I came in to help them with various aspects of the experience and standardize a design system and component library.

COMPANY
Dunkin' Brands + Carter Edwards & Co
DATE
4.30.19
MY ROLE
Product Designer

The Challenge

Carter Edwards & Co wasn't just redesigning their app experience, they were also helping Dunkin innovate by offing new solutions for better ways to engage with customers and new ways to deliver special offers. This called for a lot of on-the-fly experimentation and rapid prototyping within the design file and lead to a large amount of inconsistencies and redundant components throughout. My challenge was to standardize all elements and components and create a linked library so that other designers on the team could easily create new components and screens as the project moved forward.

The Foundation

Because of rapid experimentation and proposals needing to constantly be sent to the client during the design process, there were signs of inconsistencies in color, typography, and iconography. I started to clean things up by taking inventory of all font weights and sizes, colors, and icons being used throughout the project and get rid of any redundancies and cross-checked colors and iconography with the new style guide provided by the Dunkin team. I then created Sketch styles for all type and colors being used.

Basic Components

There were also inconsistencies spotted in basic elements such as buttons and form fields. I took inventory of all of these basic components and standardized all sizes and variations.

List Components

The app was using a large amount of list components, with each component offering multiple variations depending on where you are in the experience.

Symbol Library Structure

This would become a linked library, so it became very important that I decide on a naming structure early in the process to ensure other designers on the team can easily find what they're looking for.

Components

Clean symbol libraries, text styles, and color made it easy for everyone on the team to quickly build new components or make changes to existing components as requests came in from the client.