Plus Design System
Design system
Style guide
OVERVIEW
I along with my team recently designed and implemented
Plus Design System for Park+.
With a focus on achieving consistency, efficiency, and exceptional user experiences, Plus design system has become an essential component of our design and development workflows.
MY ROLE
Solo Manager/Strategist of
Plus Design System
THE TEAM
8 designers and 30 engineers
TIMELINE
December 2022 - March 2023
Launched in April 2023
WHY WE DID IT?
Park+ started in 2019 with 2 designers and approximately 8 major products. But with years, it increased to approximately 10 designers and 45 products. Due to this,
A lot of inconsistency started appearing within the APP in terms of colours, illustrations, typography, layout and more.
Existing system was not scalable and efficient. It took more time to create products and collaborate.
Most of the team consist of freshers. For them it was really difficult to make designs that met a certain level.
GOAL
Due to time restriction, I divided the goal into 3 parts:
First and primary goal was to make the app consistent
Making the repetitive flows consistent
Working on in-App interactions
PROBLEM
Convincing stakeholders that we need a Design system, that both designer and developer time will be dedicated for this exercise
Mapping 700 screens (more than 40 products 🫢) and creating UI inventory
Technical constraints
User familiarity: Not changing too much
PROCESS
Step 1: Analysing the current app. Products, screens, types pof components, colours, illustrations, typography are there.
Step 2: Collaborating with graphic designers to understand brand principles that they’re following. Collaborating with other stakeholders to understand goals of the company and product.
Step 3: Creating Interface inventory of existing app components, icons, etc
Step 4: Creating guidelines and component library.
Step 5: Strategising the implementation of the design system. Who will work on which product. How will implementation take place. How much time will each process require.
Step 6: Doing design sanity of all the products that were converted to the design system
Step 7: Collaborating with developers for design system implementation
Step 8: Reviewing the final developed products
ABOUT PLUS DESIGN SYSTEM
We followed the Atomic Design methodology by Brad Frost to create our design system
Foundation
Defining guidelines and setting tokens- Colours, shadows, text styles, making a separate asset library
Component library
Components in Plus Design System are divided into atoms, molecules and organisms. We are still working on creating templates and pages.
FURTHER STEPS
Create templates
Create consistent flows
Create contribution guidelines for the team
Focus on consistent interactions
Let's collaborate and
design the next big thing!
My mail Id
Back