Auditing Versapay Design system v2

While we were preparing for the launch of our new design in March this year, I developed an internal design system because everything was decentralised and spread everywhere.

After launch, we’ve kept developing new key pages with the design system and we identified the need for improvement in the current design system for efficiency, sustainability, and utilisation.

Post-launch, we encountered misalignments between implemented components and the design system. Also, our teams were confused by naming issues and faced challenges in fully utilizing the design system.

User Interviews (Internal Team):

I initiated user interviews with our internal team(6 people), including designers, developers, and non-techy stakeholders, to gain a deep understanding of their experiences with the current design system (v1). Through these interviews, I uncovered the following key challenges:

I asked retrospective questions to all groups, seeking to understand their experiences with the current design system(v1). Also, I followed with specific questions to each group to gain insights into their behaviours and utilization of the design system.

Here are some of the questions that I asked during the interview.

Questions for Designers:

1. Have you explored the whole design system file?

2. Have you added new icons?

3. Can you walk me through how would you add new components?

Questions for Engineers:

1. What difficulties do you face when using the design system?

2. What caused misalignments between our design system and Craft?

Questions for Stakeholders:

1. What difficulties do you face when using Craft (CMS)?

2. How can the design system be improved to support your needs and decision-making process better?

I found the most interesting pain point from stakeholders that they also use the design system. They face difficulties determining which components to use in Craft due to naming inconsistencies, causing confusion between Craft and the design system.

By categorizing and prioritizing the pain points identified during the interviews, I gained valuable insights to focus on and improve the design system for a more seamless user experience.

Industry Analysis

In addition to user interviews, I conducted an analysis of design systems from reputable companies (Line(Naver) / Material Design / UNDP / Millie's Library) known for their well-structured and effective design systems.

Through this analysis, I gained valuable insights into how these successful design systems were organized, named, and managed, providing a framework for the improvements we sought in our design system.

1. Identifying issues

2. Async team critique

3. Planning consolidation

I started examining and documenting each block and field on the staging site, pairing screenshots with their corresponding Figma designs for a thorough comparison.

The objective was to identify major overlaps, gaps, and usability issues in the design system without implementing fixes. Furthermore, I conducted an asynchronous team critique involving key stakeholders to gather valuable insights and feedback.

1. Collaborated with another designer to consolidation

2. Standardized spacing, gaps, and padding and improve usability issues.

3. Sync with Creative Director for naming and final decision.

In this phase, another designer and I focused on streamlining the design system. We eliminated redundancy by narrowing down and sunsetting components and merging similar ones for efficiency.

During the time, I standardized and fixed spacing, gaps, and padding for consistent user experiences. Collaborating with the Creative Director ensured a naming system that suited all stakeholders and gained support and approval for design decisions.

1. Revisions to make components more simple and coherent

2. Finalized handoff file based on collaborative decisions

3. Conducted handoff meeting

In this phase, we finalized the components and the entire library based on collaborative decisions. We made necessary revisions and improvements as needed before handing off the design system to the development team for implementation. To ensure a smooth transition, we archived old design system libraries.