MOPO Design System
MOPO is a startup project with a social discovery features across web and native platforms.
It's a community where you can discover the coolest things to do based on where you live, where you are, or where you're headed.
Discover the coolest things to do!
• Team of 3 UX designers
• Collaborating with CEO, VP Engineering, Head of Product
• Fast paced, short deadlines
• Design process became a mess
Designer 1 started in Adobe XD and setup intial product mockups without any system. Then I came in to collaborate with Designer 2 and we needed to get organized. So moved it all to Figma.
Rachel, Kat and Manus. We worked at different phases on the product.
As we were exploring and building out new features, it was chaotic, inefficient and inconsistent. Time was wasted. That resulted in collaboration blockers.
Identify all inconsistencies and streamline a simplified design system. Develop foundational elements including spacing, grids, typography scales, colors systems, etc. Lastly, implement a design token structure.
We had a general style guide that showcased the different types of colors and typography. We did not have different alert colors and varying primary and secondary colors.
Developed categories of common groupings of colors. Also confirmed if they were WCAG compliant.
Developed categories of common groupings of colors.
Developed 3 sizes of buttons. The button breakdown shows the anatomy of the button.
Spacing tokens will help when documenting components like buttons, alerts, text fields, cards, etc.
Previously the cards that were created lacked structure and most of the time they were copied and pasted when creating new ones. If there were any slight changes, imagine adjusting all the cards.
Old cards lacked consistancy and the file structure was not easily readable. Alignment was off.
I created a new card using components and utilizing properties and booleans in Figma.
The folder structure is easier to understand. I created booleans and properties for each item. There is consistent padding and spacing between items.
It'll be efficient to grab a component that has different states, properties and booleans. The user has all the options available.
With all the effort, a small design system was created. The team is setup to collaborate efficiently. The product will be more cohesive for the end customers, brand will be stronger.
A valuable thing a design system can do is increase the velocity of the team. Second, it supports consistency across the product.