Pomegranate

Project Overview

Problem

Sympa had some big problems with how its product looked and worked for users. People kept saying it looked old-fashioned and didn't work very well. They felt like it was holding them back and causing problems with their work. Plus, it was hard to add new things or fix problems because there weren't good instructions or guidelines to follow.

Solution

Pomegranate is the result of a year of teamwork. I led the design, working closely with a product owner and six developers. Together, we built a design system from scratch. This system includes reusable parts that follow certain rules, helping our team make digital experiences quickly and consistently. Pomegranate has lots of useful stuff like code, design elements, and tools. These help us make digital experiences that are smooth and uniform.

Role

Lead Designer

Tools

Figma, Miro, Storybook, Azure DevOps

Tasks

Research, project planning, backlog prioritization, design, documentation

Link

Process

Problems

By interviewing internal (Engineers, Designers, Product Managers and Salespeople) and external stakeholders, I gather the following issues that were hindering the experience.

Selling the project

To kick off the project, I needed to gain buy-in from various stakeholders including product managers, designers, VPs of product, and engineering.

How did I do it? I organized multiple meetings to highlight the value of implementing a Design System, I created several presentations to communicate the project's concept and objectives effectively.

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.

Building a team

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

‍

Rules

Defined 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.