5/5

Selling a Design System

The goal of this project is to communicate the value of a design system to the client, with the aim of enhancing the quality and efficiency of their design processes and generating positive business outcomes.

Team /

UX Lead

4 UX Designer

Timeline /

March 2022 - Jul 2022

Tool Used /

Figma

Sketch

Miro

Notion

Contributions /

User Research

Competitive Analysis

ℹ️ About the project

Over the course of nearly two years, our client's internal projects and the teams (consisting of 5 teams and 5 designers) have grown. However, we've encountered challenges due to significantly different delivery processes within each team, leading to misalignment and inefficiency.

As a design team, our goal was to implement a widely-used design system for a large organization. We aimed to evolve our design library into a scalable system that improves the speed, quality, and consistency of deliveries. Additionally, this system would enhance our team's onboarding and add value to our work.

1️⃣ Identify The Problem

The absence of clear communication and collaboration between the design and development teams had created a significant disconnect across all project stakeholders during the two stages of the process, resulting in the following issues:

During Development:

Developers were coding from scratch even when the design was the same, leading to redundancy and wasted effort.
Codes were not being reused because developers were unaware of what others were working on, causing unnecessary duplication of work.
Developers had no centralized repository of coded components to reference, making it difficult to ensure consistency and efficiency.
There was a lack of visibility for all developers and designers to see what had been done, leading to repeated meetings, repeated creation of components, and missed opportunities for reusability in future cycles.

After Implementation:

Design guidelines such as color, shape, spacing, etc., are not consistently applied across the board, despite being available in the design library.
Stakeholders may change requirements halfway through without notifying the design team or other capability teams, causing confusion and delays.

2️⃣ Prepare a Compelling Story:

In order to provide Product Owners with a comprehensive overview of the project's current status, we created a map that highlighted the following:

Roles, stages, and key moments of the current process to provide a snapshot of the project's progress to date.
Areas of the project that were particularly impactful and had significant implications for its success.
Opportunities for innovation and improvement that could help drive the project forward and position it for long-term success.

3️⃣ Get Feedback from Developers

In order to minimize attention and the potential for early rejection, we adopted a cautious approach by initiating secondary research and formulating preliminary assumptions. Following a series of revisions and consultations with designers, we had crafted an extensive presentation deck.

Nonetheless, prior to delivering the presentation, it was essential to validate our assumptions, gather feedback, and effectively persuade a stakeholder who was not directly involved in design to support our concept, thus garnering further support from others.

4️⃣ Start Design Library Little by Little

While waiting for the meeting with executives, we devoted our time to developing components and design guidelines for the Design System. Our hope was that, by the time we present, many components would be ready for implementation, requiring only minimal effort from the development team.

Fortunately, we were able to connect with a key stakeholder from the client's Portal team, who was responsible for maintaining website consistency. This had enabled us to prepare some components in advance so that, if our proposal was approved, we could quickly begin implementing them in the Design System.

5️⃣ Pitch Idea to the Board

Finally, the day had arrived for us to present our proposal to the executives. We began by discussing the roles involved in the delivery process, followed by the responsibilities of each role, the current state of things, insights from our experience, and so on.

We received positive feedback from the executives, but at the time, they did not have the time and resources to fully commit to the project, so below was our workaround.

6️⃣ Agreed Workaround

One of our dedicated designers from the design team collaborated closely with the portal team to ensure the accurate implementation of our design library in the code library

Here's the process we followed:

Identifying the most frequently used components.
The developers focused on implementing the most commonly used components, such as buttons, dropdowns, and data tables.
The developers collaborated with the designer responsible for each component to review and refine their implementation.
Subsequently, other developers could utilize the components available in the code library.

✍🏻 Learnings

As a junior designer at a design agency, this experience has been invaluable. Many individuals may not have had the opportunity to embark on a project like this, wherein I was able to collaborate with other designers and build a design library from scratch. Here are some key takeaways from this remarkable journey:

Propose the Value of the Design System:

1. Building a strong business case by highlighting the potential impact of the design system on efficiency, productivity, and cost savings.

2. Demonstrating the scalability and long-term value of the design system, emphasizing its potential to drive consistency and brand coherence across various products and platforms.

Manage Design Library:

1. Standardization: Creating a design library reinforces the importance of standardizing design elements and components across projects.

2. Reusability: Building a design library encourages designers to think in terms of reusable components. It teaches us to identify common patterns and abstract them into reusable elements, which can save time and effort in future design projects.

3. Collaboration: It requires designers to work closely with developers to ensure the smooth implementation and integration of design components into the codebase, enhancing cross-functional teamwork.