Selling the idea

Following an initial assessment of Sympa, I discovered that both designers and developers were struggling with building and maintaining components. Gaining buy-in from management, product, and development VPs was essential. To achieve this, I organized multiple meetings to emphasize the value of a Design System and created several presentations to clearly communicate the project's concept and objectives.

Process

After conducting thorough research and determining the best approach for the project, I recommend the following steps for building the Design System. With the approval of both the product and engineering teams, we proceeded step by step to successfully implement it.

Research: Identifying Pain Points in Our Work Process

The first step I took was to have conversations with team members, actively listening to their struggles, and documenting all feedback. While we had received clear input from customers about the system, we needed internal feedback as well. To gather this, I conducted face-to-face interviews across various departments and sent out an internal survey. After analyzing all the data, the following key problems were identified:

Internal Challenges:

• Lack of change tracking (both in design and development)
• Large and fragmented UI tech stack
• Outdated design libraries
• Security vulnerabilities
• Difficult maintenance
• Long development cycles
• Lack of scalability

External Challenges:

• Outdated user interface
• Brand and product delivering inconsistent experiences
• Lack of consistency within the product
• No responsive design solution
• Accessibility not prioritized

Design Audit

I conducted a thorough audit to catalog all existing elements, including foundations, components, patterns, and icons.

Findings:

• Identified issues such as poor user experience, outdated appearance, lack of accessibility, and inconsistent styles.
• Discovered over 60 components spread across three different libraries, with no method for tracking their usage.

Team and rules

We established a centralized team dedicated to supporting the system and making decisions for other teams. Implemented a sprint-based workflow where I, as a designer, evaluated component needs, designed them in Figma, tested with other designers, and oversaw development and implementation.

The team included:

• 1 designer
• 1 product owner
• 2 senior front-end developers
• 3 front-end developers

I also worked on defining design principles, tools, programming languages, documentation, terminology, and accessibility guidelines.

‍

Foundations

Collaborated with our marketing team to integrate new brand guidelines into the design foundations.Defined system elements such as colors, typography, elevations, icons, motions, and breakpoints.

Components

Most components were custom-made and coded internally, with more complex ones built using existing libraries. Ensured accessibility and ease of use for all components, including buttons, inputs, checkboxes, and modals.

Templates

Created various templates and patterns to streamline the design process for our team.

Outcome and learnings

By February 2024, Pomegranate was fully implemented for our designers, product managers, and developers, empowering them to create solutions aligned with the user experience that Sympa aims to deliver. Version 1.0 has been released, featuring tokens and 15 core components, with ongoing improvements underway.

Key Learnings:

• Empower People: Avoid restricting individuals; instead, teach them and then allow them to make decisions. This fosters improvement and adaptability in a constantly evolving environment.
• Value Everyone's Input: Significant feedback can come from anywhere, making it essential to engage with a diverse range of voices. People want to be heard and appreciate when someone is willing to act on their concerns to enhance their work experience.