Dixa Design System

Role

Sr. Product Designer

Platform

Design System

Timeline

12 months

---

About

The Dixa design system, internally named "Habla" provided the foundation for the UI of Dixa's customer support platform across both web and mobile. However, over the years since it was first conceived that foundation has severely eroded. Components were out of date, and lacked essential properties and customization options.

This led to inconsistencies and inefficiencies in the design process, making it difficult for designers to rely on the system for their work. I volunteered to become the dedicated maintainer and enthusiastically took on the challenge of bringing the system back to life.

---

Goals

• Achieving consistency between Figma and live components
• Ensuring components are easy to find, understand and use
• Future-proofing components by making them more powerful and flexible

---

Taking stock of the situation

I started by getting a comprehensive understanding of the current components, both in Figma and the developer's Storybook instance. I created a Notion board to track the progress of each component and to document any issues or missing properties.

This board made it easy to communicate and sync with other designers and developers on the team. It also provided a way for team members to request new components or new properties for existing components.

Consistency without rigidity

Initially I focused on creating a perfect 1-to-1 match between Figma and dev components, both visually and in terms of properties and organisation. While this seemed like the best approach at first, it became apparent that this would not be truly achievable or sustainable in the long run.

Figma and React are not the same thing. Embracing that fundamental truth allowed me to build components that fully made use of Figma's capabilities and limitations. Letting each libraries be the best versions of themselves ensured that future headaches didn't snowball into a broken, mismatched system again.

Discoverability and Usability

I ensured that the components in Figma were built with discoverability and ease-of-use as the top priority. I gave each component a description explaining when it should be used, and made the individual properties simple to understand and use.

While I maintained a one-to-one match visually with the dev components, I built and organised the Figma components in the best way for Figma. This made maintaining, updating, and using the components much easier.

Prototypes and Animation

I added prototype interaction and animations for common component interactions: such as hover states and loading spinners, to reduce time spent on repetitive work. Leveraging the power of Figma's new prototyping features these can be built on top of to create more powerful prototypes.

The Results

The improved components were rolled out slowly over several months when each was ready. They have been received well by both designers and developers for their ease of use and accuracy to the implemented components.