Bruno a une super idée: il va crée un nouveau concept à vendre. Bruno, qui travaille chez Mosaïk Corp, l'une des entreprises technologiques à la croissance la plus rapide au monde, souhaite concurrencer Amazon et créer sa propre expérience d'achat. Ils m'ont choisi comme designer pour mener cette initiative, concevoir leur produit etleur présence mobile afin de concurrencer Amazon.
Bruno veut créer une expérience d'achat en ligne massive capable de rivaliser avec Amazon. Il m'a embauché parce qu'il veut que son produit soit un succès. Mon travail consiste à motiver les visiteurs de l'application mobile à effectuer l'action souhaitée, par exemple s'inscrire à une liste de diffusion ou acheter un produit.
Ce que cherche le client:
__________________________________________________________________________________
L'esquisse est un processus en deux étapes :
Durant la phase du sketching, je génère autant d'options que possible. sans m'attarder sur les détails.
Ensuite je commence à affiner et à ajouter quelques détails, afin de pouvoir commencer à réaliser des esquisses telles que des wireframes. Elles comporteront également beaucoup plus de détails.
Je passe à la conception visuelle et commence à réfléchir de manière beaucoup plus détaillée à ces wireframes. Je vais en fait affiner tous ces croquis et commencer à extraire certains éléments qui me semblent vraiment nécessaires. Je vais avoir besoin de boutons, de différentes entrées, de prendre en compte différents types de contenu.
__________________________________________________________________________________
Le flux utilisateur est une série d'étapes. Il s'agit d'une série d'étapes qu'un utilisateur suit pour atteindre un objectif significatif. Le user flow n'est qu'une autre méthode que j'utilise, an tant que deisgner, pour définir l'expérience utilisateur. Le plus important dans le user flow est le schéma et l'objectif que mon utilisateur atteint en accomplissant une tâche.
Quel est l'objectif du flux, de ce schéma ci-dessous ? Je souhaite que l'utilisateur s'enregistre afin d'avoir accès au produit.
Étape 1 : l'utilisateur accède à l'écran d'accueil.
Étape 2 : il utilise la connexion via les réseaux sociaux.
Étape 3 : il accède au produit.
Dans le schéma ci-dessous, je souhaite que l'utilisateur trouve le bon produit en effectuant une recherche.
La recherche est un élément clé du succès de nombreux produits dans le domaine du e-commerce ou lorsqu'il s'agit simplement de rechercher différents types de produits, de partager des connaissances, comme Google, par exemple. Cela nécessite beaucoup de travail en matière d'expérience utilisateur et je voudrais simplement développer un peu ce parcours. Je réflchis donc aux différents scénarios possibles en décrivant toutes les étapes de l'utilisateur.
Étape 1 : L'utilisateur peut lancer sa recherche depuis l'écran d'accueil. Il peut cliquer sur le champ de recherche.
Étape 2 : L'utilisateur reçoit une invite clavier dans une fenêtre de recherche superposée et peut saisir sa recherche.
Étape 3 : Au fur et à mesure que l'utilisateur tape, le produit lui propose des suggestions de recherches potentielles. L'utilisateur clique sur l'élément de recherche qui correspond le mieux à sa recherche.
Étape 4 : L'utilisateur obtient de nombreux résultats de recherche. Il choisit alors le produit qu'il recherchait.L'utilisateur obtient de nombreux résultats de recherche.
Étape 5 : L'utilisateur peut désormais consulter le produit qu'il a recherché et décider s'il souhaite l'ajouter à son panier.
__________________________________________________________________________________
Le sitemap contribue à structurer votre projet. C'est un diagramme hiérarchique qui montre comment les pages sont organisées. Un sitemap est essentiellement une vue d'ensemble. Il permet ainsi d'avoir un aperçu rapide de ce à quoi ressemble notre projet vu d'en haut.
Quand utiliser un sitemap ? Les sitemaps sont généralement utilisés au début ou très tôt dans le processus de conception. Et celui que j'ai proposé à mon client découle directement des user flow vus précédemment.
__________________________________________________________________________________
À ce stade du projet, nous avons une bonne compréhension du contenu et de la structure de notre produit.
Qu'est-ce qu'un wireframe ?
Un wireframe est une maquette basse fidélité qui remplit trois fonctions. Il présente les informations qui seront affichées sur la page avec un peu plus de détails que nos croquis et nos user flows. Il donne un aperçu de la structure et de la mise en page. Et Il transmet l'orientation générale et la description de notre interface utilisateur.
Les wireframes sont le plan de votre produit. Ils constituent en quelque sorte un compromis entre vos croquis et les designs et prototypes plus fidèles. Ils m'aident à planifier les modèles d'interaction de mise en page pour mes utilisateurs sans me soucier des distractions telles que les couleurs ou la typographie.
Ils sont influencés par mes travaux antérieurs. J'aime les utiliser car ils m'aident à comprendre comment les utilisateurs navigueront dans mon produit. Ils m'aident vraiment à tester mes concepts et ma structure.
Je les utilise également pour apprendre. Au fur et à mesure que je recueille plus d'informations grâce à mes recherches et aux retours de mes clients ou de mes utilisateurs. Ils m'évitent ainsi de faire des erreurs qui pourraient s'avérer fatales pour la poursuite du projet.
__________________________________________________________________________________
La fonctionnalité de prototypage Figma me permet de créer des flux interactifs vraiment intéressants qui explorent la manière dont un utilisateur peut réellement interagir avec mes conceptions. Ils sont vraiment utiles pour prévisualiser mes interactions et mes parcours utilisateur.
Comment un utilisateur peut naviguer dans l'application (cliquer sur l'image pour tester les intercations dans Figma).
Cette interaction décrit comment un utilisateur peut supprimer et restaurer un élément de sa liste de souhaits (cliquer sur l'image pour tester les interactions dans Figma).
Comment un utilisateur peut naviguer dans l'application (cliquer sur l'image pour tester les interactions dans Figma).
__________________________________________________________________________________
__________________________________________________________________________________
J'ai conçu des cards, des icônes à l'aide de grilles et des formulaires ergonomiques, sécurisés et convertissant, tout en respectant la charte graphique et les exigences légales (RGPD, PCI‑DSS).
J'ai aussi été attentive à ce que tous les couleurs, les formulaires et la structure de la prochaine application mobile soit accessible à tous, appréciée et facile à utiliser.
__________________________________________________________________________________
Les modèles de conception d'interface utilisateur sont des astuces récurrentes qui permettent de résoudre les problèmes quotidiens liés à l'interface. Ils constituent des points de référence incontournables pour les concepteurs. Pensez par exemple au défilement infini qui continue de charger ou aux fils d'Ariane qui vous indiquent où vous vous trouvez. Ce ne sont là que quelques exemples de modèles d'interface utilisateur que nous reconnaissons tous plus ou moins. Lorsque je conçois un nouveau produit, je commence toujours par déterminer la manière la plus simple pour les utilisateurs d'interagir avec celui-ci, comme dans le cas de se connecter ou de s'enregistrer.
Nous allons progresser vers la fidélité. Je vais vous montrer pourquoi je progresse vers la fidélité. Je vais également commencer à appliquer certains de mes styles graphiques que je n'ai pas nécessairement finalisés, mais que nous avons explorés au fur et à mesure. En ce qui concerne les couleurs, notre système typographique, nos maquettes fonctionnelles et d'autres éléments sur lesquels j'ai travaillé régulièrement tout au long du projet.
À ce stade du projet, je finalise mes designs et je travaille à l'élaboration d'un style qui me satisfait.
__________________________________________________________________________________
Le motion design est un élément crucial pour rendre les interactions des utilisateurs avec les produits numériques de la marque plus fluides et intuitives (cliquer sur l'image pour lire la suite).
__________________________________________________________________________________
Bien que minimes, les micro-interactions ont le pouvoir de rendre l'expérience du produit plus efficace et plus humaine (cliquer sur l'image pour lire la suite).
__________________________________________________________________________________
Nous allons aborder la différence entre les styles et composants fondamentaux et les composants spécifiques à un produit. Vous pouvez vous retrouver dans une situation où vous disposez d'un ensemble d'éléments différents pour lesquels vous devez créer des composants, et où vous devez créer différents styles qui correspondent à ces composants. Prenons un exemple.
Si nous avons une vue d'ensemble de notre système de conception. Nous avons des styles typographiques.Nous avons des styles de couleurs. Nous avons des styles d'images. Nous avons des composants tels que des icônes. Tous ces styles et composants seront utilisés par tous nos composants ci-dessous, tels que les boutons, où nous avons des propriétés ou des propriétés de composants qui contiennent des icônes.
Les cartes constituent nos styles de base et représentent en quelque sorte les fondements mêmes du design system.
Vous pouvez le constater à travers les différents composants. Les systèmes de conception plus importants auront des composants encore plus grands. Les entrées peuvent être utilisées dans plusieurs systèmes de conception et plusieurs produits. Elles sont donc plus fondamentales et plus spécifiques à un produit. Comme nous travaillons uniquement sur une application mobile, nous avons davantage de composants spécifiques à un produit. Si nous devions avoir un site web en parallèle, certains de ces composants pourraient être purement spécifiques à l'application mobile, tandis que d'autres seraient plus spécifiques au site web.
Ainsi, lorsque je commence à créer mon propre système de conception ou ma propre bibliothèque de composants, je passe par un processus qui consiste à déterminer tous mes composants et à commencer à en dresser la liste.
Lorsque je travaille sur monexploration visuelle, je commence tout d'abord ici :
Après avoir développé mon idée, je commence à assembler les pages et à réfléchir à l’introduction ainsi qu’aux éléments clés comme l’écran d’accueil. En analysant les flux utilisateurs, je conçois les écrans d’inscription et identifie les différents scénarios. Il extrait alors les divers composants (cards, images, variantes) afin de les regrouper et de les simplifier. Cette démarche permet de clarifier le design, d’éviter une prolifération de modèles et de rendre les interfaces plus compréhensibles pour les utilisateurs. En phase de conception à moyenne‑haute fidélité, j'organise les éléments extraits (en‑têtes, navigation, boutons, conteneurs) en composants réutilisables, ce qui facilite grandement la suite du travail de conception.
Après tout ce travail acharné, je montre enfin mon projet à Bruno, avant le développement et l'intégration de cette nouvelle application mobile en ligne.
Est-ce que Bruno l'aime ?
Eh bien, Bruno est content.
"Votre vision, mon expertise : ensemble, façonnons des solutions qui captivent et répondent aux attentes des utilisateurs.."
Je suis designer web prête à mettre mes compétences au service de votre entreprise ou startup. Que ce soit pour créer ou gérer un site moderne, performant et adapté à vos objectifs, ou pour concevoir des supports de communication impactants, je suis disponible pour collaborer et contribuer à votre réussite.
J'attends de vos nouvelles avec impatience !
Contactez-moi directement pour un premier entretien, en remplissant le formulaire ci-dessous :
