Vous avez un bagage en design UX UI, vous souhaitez enrichir votre portfolio en vue d’un futur entretien d’embauche/contrat free-lance ? Ou tout simplement monter en compétences ? Je vous propose des exercices clés en main pour vous performer en démarche centrée utilisateurs (UX design) et design d’interface (UI Design). Le tout à titre gratuit ! Voici donc un premier exercice, axé sur le design d’interface, avec de la méthodologie expérience utilisateurs en option.

Exercice n°1 : Refaites vos jeux

Durée de l’exercice : 4,5 jours à 13,5 jours

Compétences :

• Maîtrise de la suite Adobe
• Connaissance d’un logiciel de prototypage : design system, maquettes, animations
• Créativité
• Connaissance des méthodologie UX (en option)

Outils indispensables :

• Adobe XD, Figma, Sketch, InVision ou autres logiciels de prototypage.
• Illustrator
• Internet

Le contexte

Refaites vos jeux est une entreprise lancée en 2020. Elle revend à bas prix les pièces manquantes des jeux de société récupérées dans les ressourceries.

Forte de son succès, l’entreprise souhaite améliorer son identité visuelle et le design d’interface de son site e-commerce. Elle reste également ouverte à toute proposition visant à optimiser l’expérience utilisateur de sa plateforme.

Refaites vos jeux fait donc appel à vos services de designer UX UI pour l’aider dans cette démarche.

Site actuel : https://www.refaitesvosjeux.fr/

Étape 1 : Recherches préliminaires UI

Durée : 1/2 journée à 1 jour

Vous êtes aujourd’hui en charge de la refonte de l’identité visuelle et du design d’interface de Refaites vos jeux.

Premièrement, partez à la découverte du site et décortiquez-le. Faites également des recherches diverses et variées pour dégager les valeurs de l’entreprise. Ici il s’agit de connaître ses potentiels concurrents, et de vous faire une idée plus précise de ses cibles.

Deuxièmement, rédigez une analyse de toutes ces recherches. Cela vous permettra d’enrichir vos idées pour la réalisation du futur logotype et du site web.

Outils : Veille internet, post-it, logiciel de traitement de texte de type Google doc…

* Option UX : étape 1

Vous pouvez choisir de réaliser tout ou partie des méthodologies listées ci-dessous :

1- Création d’1 à 3 fiches de proto-personas

Basées sur vos recherches préliminaires, ces fiches doivent être les plus réalistes et séduisantes possibles.

2- Mini audit du site actuel sur les 8 critères de Bastien et Scapin :

• guidage ;
• charge de travail ;
• contrôle explicite ;
• adaptabilité ;
• gestion des erreurs ;
• homogénéité/cohérence ;
• signifiance des codes et dénominations ;
• compatibilité.

Pour chaque critère, détecter des points d’amélioration ergonomique possible.

3- Test du parcours utilisateurs sur le site existant (durée du test : 1h max)

Pour cela, il vous faut :

• Choisir un panel de testeurs (5 à 10 personnes)* ;
• Définir le parcours utilisateurs que vous souhaitez tester (par exemple : la commande d’une pièce de jeu manquante) ;
• Poser des questions pertinentes aux utilisateurs pour dégager des réponses permettant de détecter des points d’amélioration possible (fonctionnalité, navigation, contenu, design d’interface…).
• Organiser ce événement en présentiel ou en distanciel.
• Analyser les réponses de vos utilisateurs.
  
  * Vous pouvez diviser le groupe de testeurs en 2 :
  – 5 personnes testeront le site en mobile ;
  – 5 autres en desktop par exemple.

Outils :

• Mise en page des fiches proto-personas : gabarit internet, Indesign ou autres.
• Mini audit : Google doc ou autre logiciel de traitement de texte.
• Questionnaire du test utilisateurs : Google Form
• Analyse de tests utilisateurs : Google doc ou autre logiciel de traitement de texte.

Étape 2 : Moodboard

Durée : 1/2 journée

En repartant de vos recherches préliminaires, choisissez un axe créatif pour la réalisation de votre moodboard.

Votre planche d’inspirations donnera la ligne directrice de votre future charte graphique. Et n’oubliez pas, un moodboard est un assemblage d’images, de couleurs, de typographies, de motifs, de textures…

Argumentez chacun de vos choix, rien ne doit être gratuit ! (entre 10 et 15 visuels max).

Outils : gabarit internet, Indesign ou autres.

Étape 3 : Création du logotype

Durée : 1/2 journée à 1 jour

Une fois votre axe créatif défini et votre moodboard prêt, proposez un nouveau logotype pour Refaites vos jeux. La nouvelle identité visuelle doit véhiculer une ou plusieurs valeurs de l’entreprise. Mais elle ne doit pas tout raconter. Un logo est une synthèse et non une narration : il doit être différenciant et percutant. Ainsi, chacun de vos choix doit également être argumenté, vous devez convaincre votre client que c’est votre logotype qu’il lui faut !

Outils : Illustrator

Pour en savoir plus sur la conception de logotype, voici un article qui pourrait vous intéresser 🙂

Article : Comment créer un logotype ?

Étape 4 : design system et maquettes

Durée : 3 jours à 5 jours

C’est l’heure de passer à la conception des maquettes !

Vous allez revoir le design d’interface (voire l’expérience utilisateur du site Refaites vos jeux si vous avez choisi l’option UX de l’exercice).

En premier lieu, prévoyez un design system reprenant les éléments d’interface nécessaires à la réalisation de vos pages. Celui-ci doit proposer une charte graphique cohérente.

Puis, passez à la conception des pages du site, en adoptant une démarche mobile first. Commencez par des wireframes puis habillez vos pages grâce à votre design system

Enfin, lorsque vos pages sont terminées, animez-les entre elles pour plus de réalisme.

Contraintes : format mobile : 375 * 815 px – format desktop : 1280 px

Outils : Adobe XD, Figma, Sketch, InVision ou autres.

* Option UX : étape 4

Durée : 1,5 jour à 2 jours

• Test du nouveau prototype animé du site Refaites vos jeux (durée du test : 1h max).

Premièrement, reprenez votre panel de testeurs et votre parcours utilisateur de l’exercice n°1. Deuxièmement, adaptez vos nouvelles questions à votre design.
Troisièmement, organisez votre test utilisateur * (en présentiel ou distanciel).

* Vous pouvez diviser le groupe de testeurs en 2 :
– 5 personnes testeront le site en mobile ;
– 5 autres en desktop par exemple.

Le test utilisateur validera ou non certains de vos choix de conception (fonctionnalité, navigation, contenu, design d’interface…).

Quatrièmement, analysez les retours de vos utilisateurs.
Cinquièmement, améliorez votre prototype !

L’objectif étant de répondre le plus justement possible aux besoins de vos utilisateurs.

Outils :

• Test utilisateurs : lien du prototype animé
• Questionnaire du test utilisateurs : Google Form
• Analyse de tests utilisateurs : Google doc ou autre logiciel de traitement de texte.
• Itération sur les maquettes : Adobe XD, Figma, Sketch, InVision ou autres.

Si vous arrivez à la fin de cet article, c’est que potentiellement vous avez terminé votre exercice (ou pas) ! Si oui, un grand bravo à vous ! Vous avez maintenant un nouveau projet UI/UX a intégré dans votre book. Sinon, et bien félicitations pour votre montée en compétence 🙂

N’hésitez pas à nous contacter si cet article vous a plu, que vous voulez nous remonter des suggestions d’améliorations (et oui on fait de l’UX même ici), ou bien vous entraîner sur de nouveaux cas appliqués.

Bonne chance dans votre recherche d’emploi ou de contrat si c’est votre cas ! Sinon et bien j’espère que vous avez appris de nouvelles choses. N’oubliez que vous êtes exceptionnel-le et courageux-se ! kiss kiss

Isabelle Champion

NB : Cet exercice est issu d’un cours d’UI Design préparé et enseigné par mes soins aux élèves de Digital Campus Nantes. Année scolaire 2021/2022.

Crédits mock-up :

• Brochure A4 Paysage (personas) : PSD créé par jordy_pp – fr.freepik.com
• Livres A4 Paysage (ouvert page gauche roulée) x 2 : PSD créés par pmvchamara – fr.freepik.com
• Tableau posé (moodboard) : Fond PSD créé par user16289356 – fr.freepik.com

Sources vidéos : screencasts du site actuel Refaites vos jeux

Le site Refaites vos jeux risque de changer d’apparence dans les prochaines semaines, voici donc son apparence actuelle sur laquelle vous baser pour cet exercice :