CONNECT:
Download my resume

Building and maintaining a design system

One of my first missions at Meilleurs Agents was building a design system for the platform. It was a real challenge with a 12-year-old platform.

I worked on this project with designers and front-developers, building the system through our different projects and thanks to weekly workshops.

We focused on having consistency between the B2C and B2B sites. We also wanted to be as inclusive as possible, working on passing the AA level at least. We also worked on gender-inclusive writing and illustrations.

Steps

Audit

B2C and B2B webapps inventory.

Foundations

Colors, Fonts, Icons, Layout, Spacings, …
Respecting WCAG Accessibility Guidelines

Components creation

Prioritization according to projects.
Components harmonization between B2C & B2B.

Documentation

Specifications on Zeplin and components documentation on Zeroheight.

Rituals

After the audit and the foundations creation, we updated the platform through our projects, prioritizing components during quarter workshops with developers and PM before adding them to the roadmap. 

And each week, we organized a workshop to stay aligned between all the squads before having a dedicated team working on the design system.
Design critiques also ensured consistency.

We used AB tests to ensure we didn’t lower the conversion (funnel form, prices pages). We also run user test sessions to be sure to provide the best experience to our users.

Illustration guidelines

I worked on Illustration guidelines, collaborating with Brand to help product designers create illustrations on B2C and B2B products that will be consistent. It has also been a solution to provide reactivity that was difficult if we had to work with Brand or a freelance every time we needed an illustration in the interface.

The guidelines are composed of:

  • Styles: always the same graphical treatment
  • Colors: B2C and B2B colors according to the charter
  • Inclusive characters
  • An illustration set to pick existing elements and compose a new illustration

Landing pages templates

On Meilleurs Agents, there are a lot of landing pages with different styles. To be more consistent, I created a template with different blocks that a product designer can use when they create a page.

So they can focus on UX writing and SEO with PM, the SEO agency and marketing people.