Prezzee, a fast-growing platform with multiple products, faced challenges in maintaining design consistency and efficiency as the team expanded. It became evident that a centralised design system was needed to ensure a cohesive user experience and expedite design workflows.
The soultion
As the lead UX/UI designer at Prezzee, I developed a comprehensive design system to streamline and elevate Prezzee's visual identity and user experience across the company's entire product suite.
🎨 The approach
Research and Analysis: I conducted an in-depth analysis of Prezzee's existing design components and patterns. By evaluating usability, consistency, and scalability, I identified opportunities for improvement and uncovered common design elements that could be modularized.
Atomic Design Principles: Inspired by Brad Frost's Atomic design methodology, I adopted a modular approach to create the building blocks of the design system. This involved breaking down components into atoms (individual elements), molecules (smaller components), and organisms (larger components).
Collaboration and Iteration: I collaborated closely with stakeholders, developers, and fellow designers to ensure a holistic approach to the design system's creation. Through iterative feedback loops, we refined and optimized the components for usage across multiple products, aligning them with Prezzee's brand guidelines and user expectations.
Figma Implementation: To facilitate collaboration and scalability, we created the "Ribbon" design system inside Figma. Each component was built with responsiveness so it could easily be used over a wide range of screen sizes, and with relevant variants to speed up designers' workflows.
Documentation and Adoption: Comprehensive documentation was crucial to ensure widespread adoption of the design system. I created a detailed style guide and component documentation, outlining usage guidelines.
📈 Results
The creation of the "Ribbon" design system changed the way Prezzee approached design and development. By implementing a unified and scalable system, we achieved the following outcomes:
Consistency and Efficiency: The "Ribbon" design system eliminated inconsistencies and redundant design efforts, promoting a unified visual identity and reducing time spent on repetitive tasks. Designers and developers could now work more efficiently and harmoniously.
Streamlined Collaboration: The shared component libraries and style guides in Figma fostered seamless collaboration between teams, ensuring that everyone had access to the most up-to-date design assets and guidelines.
Enhanced User Experience: With a standardised set of design patterns and interactions, the "Ribbon" design system elevated the user experience across Prezzee's product suite. Users benefited from a familiar and intuitive interface.
.png)
.png)
.png)
