Order up!: Cooking up a design system for Grubhub.
Timeline: 5 months (Jan 2025 - May 2025)
Team: Gerard Samson, Natalie Cheng, Saskia Suherman, Richa Shah
Roles: Designer - Mainly constructed components for the main page and created vital storytelling visuals that helped sales pitch success
Picture this: Imagine a user uses Grubhub and experiences many design inconsistencies. They experience frustrations and it obstructs from them completing an order. Grubhub has a chance to be optimized for better user experience.
Deconstruction: By breaking Grubhub down into bite-sized pieces, we found that many inconsistencies lie!
We found an opportunity lies to build a design system. It's a system including Style Guide, UI Kit, and Documentation that helps to standardize and optimize the user interface, usability, and accessibility.
Identifying Ingredients: We found opportunities to break down Grubhub into it's smallest possible building blocks to further standardize and ground the system.
Breaking it down large UI components into the smallest possible components, such as text and color, allowed us to further build the UI kit with ease.
Introducing Clementine
Clementine is a newly built design system for Grubhub. It's optimized for designers and engineers to create consistent, intuitive, and accessible food-ordering experiences on the website and beyond.
Writing a recipe: We wanted to build documentation to make a designer's lives easier!
Clementine is a newly built design system for Grubhub. It's optimized for designers and engineers to create consistent, intuitive, and accessible food-ordering experiences on the website and beyond.
Serving a sweet sales pitch to stakeholders
After 16 weeks of designing and documenting, the team pitched Clementine to a room full of stakeholders, designers, and developers. The story was "easy to follow, well-paced, easy to understand," and with great visual storytelling. Everything came together to bring Clementine into fruition.