Case Study
Design Systems
Grasshopper Design System
Grasshopper Design System: Cultivating a Seamless User Experience
Info
Role: Solo UI/UX Designer
Timeframe: 3 Months
Tools: Figma
Platform: Mobile App (iOS and Android)
Challenge
The current process
As a freelance UX designer, I often receive project briefs from clients outlining modifications to existing features. While these projects frequently involve specifying layout dimensions, color palettes, and other visual elements, I began to question the underlying rationale for these design choices. I found myself wondering, "What principles or data am I using to inform these decisions?"
Target audience: My fellow team members
Even though this Design System feels intended to only be used by the designer, to truly get the full benefits of a design system, all people on my team should use this file as a resource in their own role.
My main priority was creating a Figma file that:
Details the behavior and intended use of all components
Is understandable to developers who can find specs easily
Is interactive so viewers can navigate with ease
Breaks down the hierarchy of components used within each other
Solution
Still, there were several of native app components that had to be defined. The Material Design website breaks down each component by defining their behaviors, use cases, and how they should be interacted with. With these in mind, I began to pick apart the Grasshopper app to unfold the building blocks that make up the product.
the best way to convey an overwhelming amount of information that has many interconnecting parts was through an organizational chart, also known as a tree diagram. This data visualization breaks down the inherited properties children components have when used in different contexts.
Take, for instance, the similarities and differences among all bottom sheet modals here:
These bottom sheets are likely to use a heading text box, a paragraph text box, and a button. To ensure that the layouts of these components are consistent throughout all Bottom Sheet components, we have to define components within components, a central idea to atomic design.
Though this can get complicated and overwhelming with information, breaking them down into a tree was the best way to get a visual on how these components are interconnected with each other.
Results
Creating a design system was a time-consuming but necessary step in ensuring consistency across all UI components.
The Grasshopper team now benefits from a robust design system, fostering consistency across all UI components, simplifying implementation for developers, and ultimately, freeing up valuable time for focused development
