Dunkin' App Design System

Rebranding the Mobile Experience

In 2018, Dunkin' underwent a comprehensive rebrand of its identity, from name to packaging and to an improved in-store experience. When I joined Carter Edwards & Co, a Boston based agency, I supported Dunkin’s translation of this new look into their consumer-facing mobile-app experience. This included the standardization of a design system along with other aspects of the redesign process.

COMPANY
Dunkin' Brands + Carter Edwards & Co
DATE
May 2019 - Nov 2019
MY ROLE
Product Designer
The Challenge

Carter Edwards & Co wasn't just redesigning Dunkin’s app experience, they were also innovating by offering solutions to improve customer engagement, such as new ways to deliver special offers. This called for a lot of on-the-fly experimentation and rapid prototyping within the design file, leading to a large number of inconsistencies and redundant components throughout. My challenge was to standardize all elements and components. By creating a linked Sketch library, other designers on the team could more easily develop new components and screens as the project moved forward.

The Foundation

Simplifying Colors and Type Styles

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 types and colors being used.

Basic Components

Standardizing Basic Components

I also spotted inconsistencies in basic components, such as buttons and form fields. This was managed by taking inventory of all these various components and standardizing all sizes and variations.

List Components

Designing for Scannability and Action

The app used a large number of list components, with each component offering multiple variations depending on where the user is in the experience.

Sketch Symbol Library Structure

Making it Easier for Design Teams to Build

Because this would become a linked library, it was important for me to determine a naming structure early in the process to ensure easy accessibility for other designers on the team.

Core Components

Easy Configuration and Adaptability

Clean symbol libraries, text styles, and color supported the team’s capacity to efficiently build or revise new and existing components via client requests.

Stress Test Everything

To ensure the integrity of each component, I stress tested each one at different breakpoints.

Outcome

This foundational exercise gave Carter Edwards & Co. the means to build proposals and prototypes with ease, leading to better communication and collaboration with the Dunkin’ marketing team. 

https://www.dunkindonuts.com/en/dd-cards/mobile-app