Design Thinking · Low-fi · High-fi · Responsive

Cook Better — Apprendre à cuisiner sain

Cook Better est un site web responsive destiné aux amoureux de la cuisine souhaitant apprendre à préparer des repas sains via des parcours guidés, des recettes structurées et une interface accessible.

Design Thinking Wireframes High Fidelity Responsive
Voir le résultat Voir le prototype
Cook Better V2 — écran d'accueil desktop Forest Premium Cook Better V2 — écran d'accueil mobile Forest Premium

Refonte V2 — j'ai repris ce projet pour retravailler entièrement la direction artistique ("Forest Premium" : vert profond, doré, typographie éditoriale) et construire un vrai design system, sur les versions desktop et mobile.

Responsabilités

Persona

Persona Cook Better

Wireframes & basse fidélité

Avant de reprendre l'identité visuelle, j'ai retravaillé la structure de chaque écran en niveaux de gris, pour le desktop comme pour le mobile : hiérarchie de l'information, priorité des actions (voir la recette du soir, ajouter au plan, démarrer la cuisson), navigation par onglets Home/Discover/Plan/Profile.

Desktop

Wireframe Cook Better desktop — écran d'accueil
Home — recette du soir mise en avant, accès rapide aux recettes courtes.
Wireframe Cook Better desktop — fiche recette
Fiche recette — hero, infos clés et instructions numérotées, ingrédients à cocher en colonne latérale.
Wireframe Cook Better desktop — mode cuisson
Mode cuisson — une étape à la fois, avec minuteur et progression en haut d'écran.

Mobile

Wireframe Cook Better mobile — écran d'accueil
Home — même structure que desktop, condensée en une colonne.
Wireframe Cook Better mobile — écran Discover
Discover — recherche, filtres rapides et grille de résultats en 2 colonnes.
Wireframe Cook Better mobile — fiche recette
Fiche recette — onglets Ingredients/Nutrition/Steps/Reviews pour limiter le scroll.

Prototype haute fidélité

J'ai ensuite appliqué l'identité "Forest Premium" (vert profond, doré, fond ivoire, typographie éditoriale) et un design system de composants réutilisables, sur l'ensemble du parcours desktop et mobile : accueil, fiche recette et mode cuisson.

Desktop

Cook Better desktop — écran d'accueil
Home — "Perfect for tonight" met en avant la recette du soir et les ingrédients déjà en stock.
Cook Better desktop — fiche recette
Fiche recette — instructions étape par étape et liste d'ingrédients déjà cochés selon le stock.
Cook Better desktop — mode cuisson
Mode cuisson — un pas à la fois, avec minuteur intégré pour chaque étape.

Mobile

Cook Better mobile — écran d'accueil
Home — même logique qu'en desktop, condensée pour le pouce.
Cook Better mobile — écran Discover
Discover — recherche et filtres, avec le nombre de recettes réalisables avec ce qu'il y a déjà en cuisine.
Cook Better mobile — fiche recette
Fiche recette — onglets Ingredients/Nutrition/Steps/Reviews pour limiter le scroll sur petit écran.

Design System

Pour garantir la cohérence entre desktop et mobile, j'ai formalisé un design system complet : palette (vert forêt, blanc cassé, or, tons sémantiques), typographie éditoriale, échelle d'espacement, iconographie, et une bibliothèque de composants réutilisables (cartes recette, sélecteurs, timers, navigation, statistiques).

Design system Cook Better — Forest Premium
Fondations (couleurs, typographie, espacements, icônes) et composants (boutons, cartes recette, sélecteurs, timers, navigation, statistiques).

Prototype final

Accédez au prototype Figma interactif pour parcourir les écrans.

Voir le prototype Figma

Logiciels utilisés

Figma

UI DESIGN

Figma

Maquettes, composants, prototype haute fidélité.

Photoshop

Assets

Photoshop

Retouches visuelles et optimisation.

Google Drive

Organisation

Drive

Partage documentation & livrables.

Miro

Idéation

Miro

Brainstorming & parcours utilisateur.