Urbanleaf
04
urban leaf
2021
urbanleaf: a sustainable food start-up
Urban Leaf is a start up looking to change the way people relate to food by helping us grow edible plants in our own homes. Urban Leaf’s design system at the time was fragmentary and lacked consistency. Additionally, the old documentation left much open to interpretation and guidelines often lacked clarity. As a result, the product branding and website lacked a shared foundation around design language. This created inconsistencies within our product offerings and website.
Client:
Student Project
Role:
UX/UI Design
design system
Visual branding
Timeline:
2 months
the goal
Create an updated centralized design system that united Urban Leaf’s physical products and digital website. A well documented design system would give a structured way to build website templates, speed up the design and developmental process and improve brand perception. Improving brand perception was an important goal, primarily through consistent user experiences and better user trust.
For this project, our team decided to turn to Figma for its shared libraries, and for brand-wide consistency.
Fig. 01 - Figma Styles
the user research
The research process involved interviewing target users to pinpoint favorable color palettes, fonts and visual updates. We also researched other design systems and interfaces for best practices and inspiration. We merged different variations of components to leave only the essentials. We designed to cover all “states” in the system: hover, focus, filled out, error, and disabled state.
Fig. 02 - Typography scale in action
the process
To better understand the current state of our existing design system, we started with a UI Inventory of our main interface components. We used Brad Frost’s interface inventory guideline as inspiration to conduct an audit of the entire website. The plan was to screenshot unique instances of our main design assets such as typography, buttons, icons, input forms, drop downs, etc.
After we had identified the inconsistencies in our design assets, it only proved the need for a more systematic approach to documenting and maintaining our design system. The inventory process helped us clearly see all discrepancies across our site and product. It served as a foundation for our design system work.
We focused first on the foundational elements (atoms) of our design system, such as color palettes, fonts, grid, spacing, buttons, etc., and then moved on to more complex blocks and pieces (molecules, organisms, templates, pages).
Fig. 02 - Style Tile
The conclusion
As we built out the various usage examples, and refined the brand's shared Figma library, we started to see the brand come to life. Ultimately, we needed something that was flexible, with room to grow, but also something that was collaborative and always up-to-date, even for those that don't use Adobe programs. This was an ever-evolving file, which was one of the most beautiful things about using Figma to create this design system.