A Design System for Brewery Solutions
The current design and development processes suffer from inconsistencies in visual aesthetics, user experience, and code implementation across various products and platforms. This leads to inefficiencies, and increased development time, resulting in duplicated efforts and a fragmented user journey.
Objectives
Project Constraints
Define visual design principles, including typography, color palettes, iconography, spacing, and imagery guidelines. These will create a consistent and recognizable visual language across all products.
Develop a UI components library, such as buttons, forms, cards, navigation elements, and more.
Document common interaction patterns, such as navigation behaviors, modal usage, form interactions, and animations.
Resource Limitations: Limited design and development resources impacted the speed at which the design system could be implemented. Balancing ongoing projects with design system development was crucial.
Resistance to Change: Some team members resisted adopting the new design system due to unfamiliarity or the need to change established workflows. Change management strategies were required.
Adoption Timeframe: Fully integrating the design system across all products and platforms takes time.
Continuous Maintenance: A design system requires ongoing maintenance to stay relevant and effective.
Compatibility: The design system needs to be compatible with various devices, browsers, and screen sizes to ensure a consistent experience for all users, Ollie is not considering other devices than the web at the moment.
Design process
Log Rocket user observation
User Research & Audit: What do we have, and what do we need?
Stakeholder review
Components definition and libraries
Continuously gathering feedback to iterate, refine and expand the design system
Color Palettes
Type
Icons
Main CTA's
Badges
Cards
Navigation
Inputs
Alerts
Templates
Other Elements
Outcomes & Lessons
Improved Brand Identity: The design system reinforced our brand identity across different touchpoints. Users now associate our brand with a distinct visual language, fostering brand recognition and trust.
Consistent User Experience: The design system implementation resulted in a consistent and cohesive user experience across all products and platforms. Users now navigate our offerings seamlessly, regardless of the specific product they're using.
Positive User Feedback: User satisfaction increased significantly, with feedback highlighting the improved usability and intuitiveness of the interfaces. Users appreciated the seamless experience and recognizable design elements.
Streamlined Development: Designers and developers experienced a noticeable reduction in redundant work. The availability of reusable components and clear guidelines led to faster development cycles, enabling teams to focus on more innovative and complex tasks.
This project had outstanding work to be completed, like Design documentation, Accessibility guidelines, Integration strategy, testing and validation.