Overview

In this design case, I will walk you through a project where I took charge of establishing and revitalizing a design system within a company that already had a pattern library in place. By migrating to Figma, refining the structure and nomenclature, and introducing robust governance and workflows, I aimed to foster better collaboration between design and engineering, ensuring consistent and user-centered design solutions.

Users and stakeholders

• Engineering team

• Design team

• Product team

• End users

Roles and responsibilities

Product Designer: leading the effort to align the team with company goals and improve decision-making processes.

Problem statement

Upon joining the company, I recognized an opportunity to strengthen design and development collaboration through a comprehensive design system. The existing pattern library lacked clarity and efficient collaboration mechanisms and usage guidelines, leading to inconsistencies in design and difficulties for engineers when implementing designs.

Scope and constraints

Challenge of setting expectations and promote the culture, aside from team allocation and adoption.

Getting things done

Understanding the context

Once I was new in the company, it was important to understand how the current workflow was happening, aside from getting context about the library structure. I've had a few interviews with the engineers to have a better understanding of how things work, and what could be improved considering the current working model. Also, as the second designer, I've made a lot of pairings and syncs with the designer to understand the rationale of the decisions made and his ways of working.

Planning

Once I have gathered the context, and run a few deliveries in the current workflow and structure, I've listed the opportunities that we have in order to understand how we could start improving the collaboration, considering we were allocated in the product teams, and there wasn't much time for side projects.

Stakeholder alignment

Once I had already structured a design process in place, in order to track the design process to understand our gaps, at the end of a quarter, I made a deck where I presented the process learnings, aside from OKRs proposals, where one of them was to make design deliveries consistent in levers, once the lack of usage guidelines was leading us to inconsistencies.

One of the key results was to migrate the current style guide to Figma, to polish the current component set, and improve the collaboration, once the previous stack was Sketch for interface design, Abstract for version control, and Zeplin for handoff.

Starting small

With the objectives and key results in place, we've proposed a timeline that would be feasible for our team of two designers to work on this migration along the quarter, while working on the initiatives, without impacting the deliveries that we would be working on.

Another key result was about setting the design principles of the design system, so we could define a shared understanding of our guiding principles and standards, aside from defining our criteria to evolve our language.

Migration to Figma

To set the Figma structure for the migration, we've improved the current file system and naming conventions, aside from component structure, in order to improve findability and shared understanding between teams. This led to a more efficient and user-friendly system for both designers and engineers, aside from improving the handoff process, once we did not need three software anymore, everything was centralized on Figma, aside from gaining collaboration, that was something that wasn't possible before.

Governance and workflows

I established governance protocols and workflows to ensure the design system's sustainability, such as library structure, component creation workflow, and project management process. Considering we didn't have a dedicated team, and all engineers could support our evolution, I've made guidelines so everyone could easily assign tickets to collaborate in our development.

Usage guidelines and documentation

I've set the foundation of our documentation platform, where available design system's usage guidelines, including design principles, typography rules, color palettes, and component usage. This documentation served as a go-to resource for design decisions and helped maintain a consistent user experience across products.

Defining metrics for improvement To measure the success of the design system, I defined key metrics to track improvements and identify areas for enhancement. These metrics included the adoption rate of components in each platform, components detaches in Figma, and impact on design delivery. On this front, we had a lot to learn and evolve, such as start tracking development impact.

Feedback gathering and continuous improvement

We've set a quarterly survey to assess our current state and understand opportunity areas, aside from a decision log, where everyone was able to add topics to be discussed. You can read more about it here.

Outcomes and Results

Through this project, the company gained a design system that not only improved design and development efficiency but also fostered a culture of collaboration and user-centered design thinking. The system served as a foundational resource for maintaining consistency, enhancing the user experience, and supporting future growth.

Goals achieved

• Design and development efficiency

• Collaboration culture fostering

• Centralization of guidelines to keep consistency among design deliveries

• Improved collaboration between design and engineering

Lessons learned

• The need to have stakeholder understanding of the value of a design system in place

• Maintaining documentation is hard, is important to start small and grow as we go

• The importance of listening to our users and iterating to improve considering their needs

• The challenge of tracking all metrics from the beginning