Conception ascendante
Dans le cadre de ma formation, j'ai mené à bien l'intégralité d'un projet de conception pour le bien commun en créant un outil multi-plateformes pour apprendre à cuisiner des repas plus sains en tant que designer UX responsable de la conception.
- Objectifs du projet
Concevoir une application mobile dédiée ainsi qu'un site web réactif en utilisant une conception ascendante. Cette philosophie de design appelée "mobile first" consiste à commencer par la plus petite taille d'écran (avec les capacités de base du produit) jusqu'à la plus grande (où des fonctionnalités et des interactions plus avancées sont ajoutées).
Wireframes papier
Mes premières esquisses m'ont permis de générer rapidement plusieurs idées de maquettes pour la page d'accueil de l'application mobile Good4me.
Prototype basse-fidélité
Le prototype basse-fidélité (ou lo-fi) consiste à représenter l'application de façon sommaire et schématique afin de commencer à visualiser sa structure et son fonctionnement général.
Dans cette optique, j'ai créé 12 wireframes (maquettes numériques) que j'ai reliés entre eux en ajoutant les détails d'interaction.
Naviguez dans le prototype de l'application ci-dessous en cliquant sur des boutons ou des icônes.
Pour une meilleure visibilité, affichez en plein écran sur un ordinateur.
Étude d'utilisabilité
Le prototype basse-fidélité a été testé par un groupe d'utilisateurs dans le cadre d'une étude d'utilisabilité de ma recherche UX afin d’obtenir des retours sur mes designs.
J'ai analysé et organisé les commentaires des participants à l'aide du diagramme d'affinité ci-dessous pour en retirer des thèmes et des idées exploitables.
Wireframes numériques et mockups
Après cette étude, j'ai procédé à des modifications afin de répondre aux besoins des utilisateurs.
Puis, j'ai réalisé des maquettes haute-fidélité en vue de produire un nouveau prototype correspondant davantage au produit final.
Vous pouvez comparer les versions basse-fidélité et haute-fidélité ci-dessous.
Faites glisser le curseur vers la gauche ou la droite pour visualiser l'avant-après.
Page d'accueil
Page de recette
Design system
Un design system est un ensemble d'éléments réutilisables qui permet de concevoir et de développer un produit en suivant des normes prédéfinies afin de conserver une cohérence visuelle.
Un design system permet également de gagner du temps en instaurant une collaboration plus efficace entre les équipes de design et les développeurs.
J'ai réalisé un kit de designs avec cette feuille d'autocollants (ou sticker sheet) comprenant les éléments visuels (palettes de couleurs, icônes, boutons et typographie) que j'ai utilisés dans mon projet de conception de l'application mobile Good4me.
Prototype haute-fidélité
J'ai appliqué les principes du visual design (unité, emphase, proportion, hiérarchie, variété...) et pris en compte l'accessibilité lors de la conception du prototype haute-fidélité (ou hi-fi).
Soucieuse de présenter un travail le plus réaliste possible, j'ai également imaginé le nom "Good4me" et conçu un logo afin de l'intégrer à mon prototype haute-fidélité.
Après une nouvelle étude d'utilisabilité afin de tester le prototype haute-fidélité, j'ai apporté d'autres modifications pour obtenir le résultat final ci-dessous.
Naviguez dans le prototype de l'application ci-dessous en cliquant sur des boutons ou des icônes.
Pour une meilleure visibilité, affichez en plein écran sur un ordinateur.
Conception multi-écrans
Une fois le design de mon application mobile dédiée terminé, j'ai utilisé ce que j'ai appris sur le produit et les utilisateurs lors de mes recherches et mes études d'utilisabilité afin de concevoir pour différentes expériences et tailles d’écran en créant un site web responsive.
J'ai commencé par réaliser le plan de site (ci-dessous) en utilisant une structure hiérarchique.
J'ai ensuite créé des wireframes numériques et des mockups du site web responsive pour des écrans de différentes tailles (ordinateur et tablette).
La conception pour une taille d'écran plus grande permet d'ajouter davantage de fonctionnalités. J'ai également ajusté les divers éléments (texte, images, icônes, boutons, etc.) à cette nouvelle dimension d'écran tout en conservant une cohérence visuelle avec la version mobile pour un design uniforme qui participe à une bonne expérience utilisateur sur tous les appareils.
Prototype hi-fi ordinateur
Pour terminer, j'ai rendu les maquettes numériques interactives en connectant divers éléments (menus, boutons CTA, etc.) aux écrans afin de concevoir le prototype haute-fidélité ci-dessous.
Naviguez dans le prototype de l'application ci-dessous en cliquant sur des boutons ou des icônes.
Pour une meilleure visibilité, affichez en plein écran sur un ordinateur.
Conclusion du projet
Lors de la conception de l’application mobile Good4me, j'ai appris à utiliser la méthode d'amélioration progressive (ou conception ascendante) pour faire évoluer mon design d'un écran de mobile vers un écran d'ordinateur.
J'ai aussi appris comment adapter le contenu sur un écran plus grand tout en préservant l'identité visuelle de la marque.