All the Systems, All the Flavors

2019-2020
UX Design
Visual Design
Design Systems

The tl;dr:

I know you're probably not going to read this whole page. So, to summarize:
I was embedded into this client team for close to two years, often as the only designer, working alongside a product owner and a team of developers. This client is the parent company of three fast-food brands that was looking for a mobile ordering system that each brand could personalize and that would work on mobile apps, responsive web, and in-store kiosks. We worked to create a design system (in Sketch, and later Figma) with varying styles for each brand as well as the designs for the full product - from the ground up, covering finding locations, browsing and customizing items, and placing orders either for pickup or delivery. I was on board for the launch of all this and many rounds of subsequent enhancements.
Now you can just focus on the pretty pictures.

One scalable design system to work across three brands, serving four platforms, facilitating the creation of twelve applications at once.

At Formidable, I worked with the parent company of three fast food brands to solve a complex problem: there was a big disparity amongst the online experiences of each of their companies. They all had mobile apps with different levels of functionality, some had mobile ordering on the app, some had mobile ordering on the web. They envisioned one system to allow each company to have a mobile and web app for online ordering with a consistent experience across the board. They also wanted to add features for delivery, customer loyalty, and ordering on in-store kiosks.

Design happened from the ground up, creating a framework agnostic to any one brand, that would work with any content. A solid design system would be the star of the show: one that would carry the authentic identity of each brand and be easily scalable.

   

Color Palettes

Typography

Buttons

More Elements

Building Pages

 
 

Results

Implementation of all this was done VERY rapidly with design and development happening concurrently. Timelines were aggressive; we aimed to ship all 12 products within a year of beginning the redesign process. MVPs were defined early on for each platform, additional components were designed along the way as needed, with Storybook serving as the repository for implemented components and tokens. Design (typically myself, one other designer, and a product owner) kept 1-2 sprints ahead of development teams. In the end, each product shipped on time, even amongst rebrands within 2 of the brands going on at the same time. The extensible system we made allowed for fast changes to be done to styles and new molecules to be assembled from the existing atoms.

Now What?