Contexte et objectifs
Ce projet est un challenge de design UI, proposé par la Cacatoès Academy.
Brief :
- Concevoir une application mobile de cuisine spéciale pour les fêtes de fin d’année
- Palette de couleurs évoquant Noël, avec une possibilité de switch de thème : festif ou sobre.
- Homepage, avec search bar, les dernières recettes et les plus aimées, une navbar
- Page de liste des recettes, avec filtrage par catégories, et recette en cartes
- Page recette avec infos, description, ingrédients (avec sélecteur de nombre de couverts), et étapes de préparation
L’objectif pour moi était de me challenger en temps limité (une semaine), en concevant une application réaliste avec une belle UI et une expérience utilisateur cohérente.
Recherche et Idéation
Avant de me lancer dans Figma, j’ai pris le temps de réaliser un benchmark, pour identifier les bonnes pratiques du secteur et se démarquer de la concurrence.
J’ai audité deux applications : Marmiton et Christmas recipes.
| Christmas Recipes | Marmiton | |
|---|---|---|
| Forces 💪 | Tableau de conversion Bouton "like" pour ajouter aux favoris |
Filtres et catégories Bonne mise en valeur des recettes |
| Faiblesses 👎 | Palette trop sobre, thème invisible Pas de sélecteur de nombre de couverts Pas de filtres ni de catégories |
Connexion obligatoire Charte graphique peu marquante Navigation légèrement confuse |
J’ai cherché (assisté par l’IA) les points de douleurs fréquents relevés par les utilisateurs de ce type d’appli, et j’ai défini un utilisateur type (persona).
J’ai ensuite listé les opportunités qui me permettront de me démarquer et de répondre aux besoins des utilisateurs :
- Theme switcher avec charte graphique engageante
- Search bar et filtres simples
- Sélecteur dynamique de nombres de personnes
- Page favoris (ajoutés par bouton like)
- Navigation intuitive, et contenu épuré
- CTA visibles et ergonomiques
User flow & information architecture
Wireframe
Design final
Pour la partie graphique, j’ai commencé par réunir quelques images inspirantes sur un moodboard.
J’y ai également défini mes choix typographiques et ma palette de couleur.
Concernant le switch entre thème festif et thème sobre, j’ai décidé de m’orienter plus vers une opposition thème sombre / thème clair, autour d’une palette unique.
Outils utilisés : Figma, Unsplash, Freepik, Adobe color
J’ai finalement conçu le design system de l’application et la maquette graphique avec quelques interactions pour tester la navigation.
Thème sombre
Thème clair
Conclusion
📝 Avec ce projet, l’accent a été mis sur la partie UI, laissant ainsi peu de place à la recherche UX, aux tests et itérations.
👍 Néanmoins ce challenge en temps limité était très intéressant car ses contraintes m’ont rapproché d’un contexte professionnel : compréhension rapide d’un brief et d’une problématique, priorisation et prise de décisions cohérentes.
Enfin, j’ai la satisfaction d’avoir conçu une maquette d’application fluide et esthétique.
Common!