Company
Firstleaf
Role
Product Designer
Year
2021 - 2022
Backstory
In the early days of Firstleaf, we lacked a design system, so we were building everything from scratch. When we launched the website, there were few established standards or shared patterns, resulting in an increasingly inconsistent Firstleaf experience.
A new opportunity
In 2021, the Brand and Creative team undertook a significant refresh of Firstleaf's brand identity. I saw this as an opportunity to develop a design system and began integrating it into my projects.
Building the structure
We limited our main color palette to 3-4 colors and developed additional colors for success and error states. Additionally, we streamlined the typography by selecting the Gotham typeface for consistent use across the website.
Ensuring accessibility
For each color combination we used, we ensured compliance with WCAG accessibility guidelines to ensure visual friendliness for all users.
Covering all scenarios
We designed each design element (hover, click, error, disabled) to cover all scenarios and ensured they seamlessly complemented each other and worked well in any combination.
Conveying ideas in a simple manner
Most of the time, pictures speak louder than words. We created a new set of illustrations and integrated them across the site experience to communicate information to users at a glance.
Creating reusable components
We wanted to create components that could be reused in multiple places throughout the website experience. One example is demonstrated here, where we unified and developed a new look for the wine cards UI used across our various experiences.
