Behaviours, Patterns and Visual component library
Company:
Ateliere
Year
2022
Role
Product Designer, UI Specialist, UX Researcher
Tools used
Figma, Adobe Illustrator, LucidChart, Atlasian, Slack
Product Design
Design System
User Experience
Procedures
Interdisciplinary
This design system project was a unique undertaking, a testament to the power of individual initiative and a user-centric approach. As the sole product designer, I spearheaded the transformation of a fragmented design kit into a robust and scalable design system. This involved not only overhauling the visual language and component library but also reimagining the design process itself. The best Figma practices always in mind. Knowledge, tips & tricks gained when mastering of every new Figma feature - all included.
How it started
My journey began with deep-dive research, including user interviews, workshops, and usability testing scenarios. I personally conducted these activities, gathering invaluable insights into user needs and pain points. These findings informed every design decision, ensuring the final system was both user-friendly and aligned with business goals. Beyond the visuals, I championed a collaborative approach, engaging with QA engineers, front-end developers, and the product manager throughout the process.
Progress
To ensure the design system's long-term success, I established clear procedures for change requests and outlined best practices for designers working within the system. I also integrated tokens and code values, enabling seamless scalability and adaptability across different platforms and appearances.
Feedback
The results were remarkable. User feedback was overwhelmingly positive, and the QA team, initially skeptical, became strong advocates for the system. Perhaps most rewarding was the realization that my approach mirrored that of Adobe's Spectrum design system, validating my vision and demonstrating a forward-thinking mindset. This project was a true test of my skills and determination. I successfully navigated the challenges of a one-man job, transforming a chaotic design landscape into a cohesive and user-centric system. The experience reinforced my belief in the power of research, collaboration, and a relentless pursuit of design excellence.
Personal considerations on this project
Why is it important? Creating consistent and scalable experiences is a best practice that can be achieved through well-designed applications and websites. This approach promotes long-term continuity in user experience, not just for individual products but also across an entire company's products and services. Numerous leading companies like Apple, Adobe, Airbnb, Renault, Pinterest, IBM, Salesforce, and many others have embraced this practice and established it as a benchmark for technological development.
Furthermore
Goals / Benefits
The design system enhances the user experience across all products and platforms.
By implementing the design system, the design team and product will be able to focus on the strategic and creative aspects of their work, which will lead to more engaging and user-friendly products. Meaning the design is familiar and consistent.
The design system also empowers the collaboration between the development and product teams to create high-quality work by using UX guidelines more efficiently.
Problem
Our design processes were fragmented, leading to inconsistencies and eventual delays in delivering high-quality user experiences.
Multiple productivity issues were caused by different approaches taken for the user experience.
Solution
A design system provides a centralised library of components, guidelines and patterns that will streamline our design process, improve consistency and accelerate the development by focusing on the most important part: strategic, and creative part.
Adopting the design system as soon as possible will mean adopting the user centric design thinking.
Return on investment
Quantifiable benefits
→ Increased user engagement
→ Reduced developing time
→ Reduced number of support tickets
→ Improved team collaboration
Qualitative benefits
→ Enhanced brand consistency
→ Improved UX across all apps
→ Freedom to UX and development (having well
established UI rules in place switches the focus from managing constraints towards the creative process)
Available for work
Available for work
Book a time for us to chat about any upcoming or ongoing design projects and how we can help bring your vision to life.