A collection of components bundle into a package that empower us to create beautiful products.

Design Systems

Project Overview


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.


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.


Lead Designer


Figma, Miro, Storybook, Azure DevOps


Research, project planning, backlog prioritization, design, documentation



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.


  • 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


Defined design principles, tools, programming languages, documentation, terminology, and accessibility guidelines.


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.


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.


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

Release and maintain

Focused on encouraging adoption and analyzing component usage.

Released Version 1.0 of the system, including tokens and 15 core components, with ongoing improvements.

Established a clear structure for components in Figma, leading to adoption by three different teams.

No items found.

Other projects.

Mainio. Migration Info Centre project picture
d' diseño website project image
Web design
Mexican sign language mobile application project image
Mexican Sign Language
UX design