Redesign, UX/UI
Design System

Intégrée à Cookpad en tant que Product Designer depuis 2018.
Je présente ici mon plus gros projet chez Cookpad, à savoir le redesign et la création du Design System en bref.

C'est un projet long d'un an et demi, avec une team de deux designers (dont moi) et deux développeurs (iOS & Android).
Nous avons construit ensemble un design système aligné dans le design et le code.

How we put "Mise" en place

Cookpad 
is a Recipe Sharing platform (iOS, Android, Web)

100 million users per month

+70 countries 
+30 languages



+70 shades of orange
 in the codebase
No clear Design Principals

No redesign since its creation in 1997

No single source of truth

Inexistant design language

From redesigning...

Build a brand identity based on our values, and design principals

Universal
Accessible & valuable to everyone
Harmonious
All pieces work together
Essential
Give you what you need, nothing more
Enjoyable
Interactions are effortless and lovable
Humble
Respect our community and their content

Avant

Redesign

... to building a Design System

Starting with strong foundations

Accessibility

Globalisation & languages

Colors

We have two Color libraries. A concise color library that is part of the Mise Design System and a more detailed Extended Color Palette that gives more detailed color information. This allows our designers to use colours they need for designs and not be be overwhelmed by interaction state colors.
Each color must defined as a Semantic Color. A Semantic color is one that shifts based on the users system settings.

Iconographie

We favored a rounded, smooth, modern, playful outline style for our icons, making sure they are easy to understand at a glance. 

Outline icons are more subtle and discret and put the user’s content first. 

3 different sizes to cover all use cases across the app.

Text System

Our Text System uses Noto Sans. We cut out all the sacles to focus on font scales that are only used in the app. We name them accordingly for designers to know where and when they should use a specific text style. We provide the scales to show what is possible in case a new text style is required.

Espacements

Our spacing structure was very important to define. We chose a larger 8pt grid (4 is our exception) to layout the main screens. We also created a micro-grid for the buttons that use a grid divisible by 2. Given the requirement for a 36 pt button height we needed special case spacing for buttons potentially for smaller areas in the app.

Renforcer

Building on top of the foundation, documenting, provide support to the product teams and dev team.

Buttons / Chips / Toolbars / Nav bars
Loading Indicators / Empty States / Illustrations / Drop shadows Elevation / Corner radius / Text Fields

Challenges

1. Platforms specificities
2. Adapting our system
3. Product teams new features 
& components requirements