My Role
Owned the consumer side of design system— identifying patterns, designing components, documenting, setting up workflows, building plugins, etc.
Team
Raunak Trikha, LPD
Ezaz Ansari, VD
Gowtham, VD
Sam, SDE
Nihar, SDE
Ashoka, SDE
Duration
Aug 2021 - Sep 2023
Overview
As our business expanded and teams grew, the Consumer App struggled to maintain consistency. We needed a less-design, less-code framework that could enable us to build, ship and iterate quickly.
Setting up the design system involved these major steps— global reskin of our consumer app to system tokens, creating reusable components, setting up audit and handoff processes.
The Backstory
As our business expanded and teams grew, the Consumer App struggled to maintain consistency. We required a less-design, less-code framework that could enable us to build, ship and iterate quickly.
System Architecture
Core System: Components and elements are business agnostic.
Pattern Library: Components address the unique needs of various teams in the organization
Key Frameworks
UI Design with Base Tokens
After defining our base tokens, we did a reskin of the entire consumer app. Updating all colors, shadows, typography, etc. to the new design system tokens.
Creating Components
We used this framework to design components. The challenge was to identify repeatable patterns and prioritise what should be included in the system.
Behind The Scenes
Restaurant Listing was a very commonly used pattern across the consumer discovery flow. Here's the behind the scenes of designing the listing component.
Base Component
Defines the basic structure or skeleton of the component. It helps us reduce the maintenance efforts across multiple configs and themes and makes it easier to create new ones if required.
Variants
Documentation- Configurations
Defining all the possible states, use cases, themes that the component could exist in.
Documentation- Specifications
Defining values for spacing, padding, dimensions like width and height, and how it adapts to different devices.
Documentation- Behaviour
Defining how the component reacts on user action or behaves on system triggers. I defined a Motion Design System to guide us how to use motion in the Swiggy ecosystem.
Pixel Perfection
PP or Pixel Perfection is ensuring that all states of the component look perfect on every device.
Governing With Design Audits
We used to conduct audit sessions with designers to find and fix issues like missing styles, incorrect tokens, components used from other libraries, etc.
Roast Plugin
I build a Figma Plugin to automate the audit process. With Roast anyone could spot design issues like missing or unwanted tokens and fix them instantly for a quick handoff.
The Impact
Our app interface is now more consistent , which means a coherent experience for our users.
Design-dev handoff has become much faster. We no longer need hours of pixel perfection to fix each nitty-gritty.
A library for reusable components allows our teams to ship faster, fail faster, and iterate faster.
