I developed a comprehensive design system that established a strong foundation for the design team. This system was crafted with a focus on scalability, productivity, and consistency, enabling the team to work more efficiently and cohesively. It improved both design and code quality, minimized siloed knowledge which enabled collaboration between designers and product teams.
- Project
- Design system
- Role
- Product designer
- Industry
- Insurance
Challenge
The client needed a scalable design system for their white-label products. Rebranding the products for different clients required extensive manual work in Adobe Suite, making the process tedious, time-consuming, and inefficient. Multiple new features also needed to be launched.
Results
I oversaw the implementation of a design system that improved scalability and consistency across all products, achieving a reduction of 80+% in design and development time, as well as launched multiple new features.
- Reduction in design and development time
- 80%
- New features launched
- 3
White label product theming
One of Clientèle's products was white-labelled across multiple clients, and re-theming it used to mean redoing the branding by hand in Adobe Suite for every rebrand. I took a similar approach to the one I later used at ADIB: background, surface and accent are the only tokens that carry a client's brand, while everything else in the system stays fixed. That discipline is a large part of what took design and development time down by 80%.
UX Artefacts
Personas
Why did we need personas? Personas were essential as they created a human-centered approach in our design process. By identifying target users, personas facilitate empathy, guide decision-making, and serve as a communication tool across multidisciplinary teams. They helped prioritize features, identify user pain points, and mitigate biases, ensuring a consistent and user-focused design approach. Personas also assisted in aligning user testing efforts and maintaining a shared understanding of the target audience, ultimately contributing to the development of products and services that better met the needs and preferences of our real users.
Competitor analysis
A competitor analysis was crucial for this piece of work as it provided valuable insights that informed our strategic decision-making. By assessing the strengths and weaknesses of our competitors, we could identify market trends, benchmark performance, and assess risks. Understanding how our competitors positioned their products helped us in finding unique value propositions, guiding product development, and influencing pricing strategies.
User journeys
I mapped out the user journey to gain a deeper understanding of the current process. Then, I guided the team through it, ensuring everyone had a clear view of the experience and could contribute ideas. This exercise helped us identify customer pain points and uncover opportunities to enhance the process by making it digital.
Wireframes
At the start of my design process, I created wireframes for testing, allowing the client to visualize the approach we would take. Using Adobe XD, I designed low-fidelity wireframes that served as a foundation for collaboration. Feedback from both users and the business was central to our process, ensuring we crafted the best possible experience.
Usability Testing
Before designing high-fidelity wireframes, I conducted user testing to understand how customers experienced the digital flow. We selected participants who matched our personas and provided them with scenarios, allowing them to navigate the process as if they were referring a friend or claiming a voucher with their loyalty points. Based on their feedback, we shared insights with stakeholders and made necessary improvements to enhance the customer experience before finalizing the high-fidelity wireframes.
