Beerwulf Design System
Year.
2022
Role.
Lead Product Designer
Tasks.
Audit the entire webshop
Audit Figma component library
Design system research & analysis
Stakeholder requirements gathering
Create and/or update new and current components
Documentation (usage guidelines, copy guidelines, component behaviour and interactions)
About.
Inconsistent design can lead to confusion and frustration, which can ultimately have a negative impact on the customer experience. Therefore, having a design system in place is essential to ensure a consistent, cohesive, and user-friendly experience for customers across all touchpoints.
Why did we need a design system?
Beerwulf encountered several challenges within the organization:
Limited design resources: With only one designer handling numerous projects, a design system was crucial for faster delivery, learning, and continuous iteration of components.
Lack of documentation for past design decisions: There was no existing records detailing the rationale behind previous design choices.
Absence of component usage guidelines: Beerwulf lacked comprehensive documentation on component behavior, states, and user interactions.
With that said, there are many benefits to having a design system in place. Most notably, is to maintain consistency in the design language and brand across all areas of the product. This translates into a robust UI, and ultimately an enhanced customer experience at Beerwulf.
Some other benefits include:
It's scalable and reusable
It makes experimentation quicker and easier
It makes maintaining and iterating designs more efficient thus optimising design efforts
Standardised UX/UI and development across various teams
Reduces time-to-market for new features so we can work in an agile environment
Take a quick tour of our design system.
Business impact.
Results of my design system work:
Capturing validation and experimentation results in the design system, leading to confident decision-making and improved conversions.
Enhanced collaboration and workflow within UX and CRO teams.
Improved design and development processes.
Faster onboarding and page-building for content specialists using reusable components.
Conclusion.
Current focus:
Exploring enhancements to the system and development processes.
Identifying design and code issues and collaboratively devising solutions.
Establishing an asset library for core UI images and iconography to ensure consistent application in the code base.
Next steps:
Planning versioning and governance strategies.
Integrating more insights into the platform.