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.
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