Tripps - Conception d'une application de planification de voyage. Une étude de cas UX.

Un processus de recherche centré sur l'utilisateur

Assemblée générale, UXDI n ° 29.

Résumé: Créez une application pour résoudre un problème pour un utilisateur unique.
Après avoir suivi toutes les étapes du processus UX, déterminez les besoins et les difficultés de l’utilisateur, ainsi que les moyens de les résoudre avec une nouvelle application mobile.
L'équipe
Concepteur UX: Davide Tremolada
Utilisateur: Genevieve Smith
Testeurs: Sim, Bill, Lola, Lauren, Dal, Xenia, Joy
Outils
Recherche d'utilisateurs, UX, Sketch, tests d'utilisabilité, InVision
Durée du sprint
2 semaines (de la recherche initiale au prototype haute fidélité)

№1: Recherche et analyse des utilisateurs

J'ai mené une interview exploratoire de mon utilisateur unique: Gen, un graphiste senior basé à Londres.
J'ai identifié un domaine de sa vie qui était important pour elle, mais qui contenait des problèmes que je pouvais aborder avec une application mobile.

1 - Gen et moi lors de l'entretien exploratoire 2 - Le flux d'utilisateurs montrant les points douloureux rencontrés par Gen lors de la planification du voyage

Résultats

  • Gen a deux grandes passions: les voyages et l'histoire ancienne.
  • Elle veut créer des plans de voyage détaillés pour les activités de ses voyages.
  • Elle voyage souvent avec de nombreux amis et sa famille, rarement seule.
Citations clés de l'entretien exploratoire

Le problème

  • Pour planifier ses voyages, Gen recherche des informations provenant de différentes sources.
  • Elle trouve ce processus très fastidieux et stressant.
  • Gen veut partager ses idées avec ses amis.
  • Souvent, elle ne reçoit pas d’information de leur part et elle se sent frustrée.

Points clés de la douleur

  1. Il peut être très stressant de rechercher des activités pour un voyage de vacances.
  2. Il est difficile d’engager des amis dans la planification d’activités.

Ma solution

J'ai décidé de créer une application pour:

  • Trouvez rapidement une sélection d'activités.
  • Invitez facilement ses amis à planifier un voyage.

№2: Brainstorming & Ideation

Déclaration de résultat

Principes de conception

  • Le produit doit être une source d’information unique pour trouver des activités.
  • Les amis et les membres de la famille doivent être facilement impliqués.
  • Le produit doit fournir une expérience claire et intuitive, avec une interface propre et conviviale.

Storyboard

La création d'un storyboard visuel m'a aidé à intégrer la fonction de l'application dans la structure plus large du flux d'utilisateurs.

Storyboard: en utilisant l'application Gen peut facilement planifier un voyage, en évitant le stress

Flux d'utilisateurs

L'objectif principal du flux d'utilisateurs était de le rendre aussi facile que possible, rapide à apprendre et avec un ensemble d'actions intuitif.

Version numérisée du flux utilisateur, créée avec draw.io

Voici les quatre étapes que j'ai décidé de développer:

Flux d'utilisateurs: quatre étapes principales

Croquis d'idée

Dessiner sur papier m'a permis de changer rapidement et de rejeter des idées différentes.

Il a également fourni les premières informations sur la manière dont la navigation et la logique derrière chaque étape pourraient être développées.

№3: Test d'utilisabilité

Globalement, le design tente de faire deux choses:
1) Fournir des informations sur les activités possibles;
2) Encouragez l'utilisateur à impliquer ses amis.

Prototype de papier

Les avantages de cette approche sont nombreux:

  • J'ai pu parcourir rapidement différentes versions
  • Les utilisateurs se sentaient à l'aise pour expliquer leurs idées et proposer des solutions
  • Je pourrais facilement créer / supprimer des fonctionnalités et créer des interactions à la volée
Le prototype en papier et moi le testant avec Lauren

Test des résultats

Il est apparu clairement que le flux d’utilisateurs pouvait être amélioré pour être plus simple et intuitif.

Changement de design

  • Inviter des amis était prioritaire sur l'ajout d'activités.
  • Le bouton «X» pour revenir en arrière a été interprété à tort comme une action «quitter» et a été remplacé par une flèche vers l'arrière.
  • Les pop-ups ont été introduits pour expliquer les fonctions clés lors de la première utilisation
Le flux de données tel qu’il est apparu après la série de tests avec le prototype en papier

Maquettes

Je l'ai ensuite déplacé vers des structures filaires à mi-fidélité. J'ai poursuivi les tests avec un prototype numérique dans InVision.

Gen teste le prototype à moyenne fidélité dans InVision

Test des résultats

J'ai traversé trois itérations différentes de wireframes. Observer les utilisateurs et leur permettre de décrire leur processus de prise de décision était fondamental. J'ai été en mesure de perfectionner la navigation vers un modèle d'interface plus commun.

Changement de design

  • Le système de vote (pour hiérarchiser les activités dans un voyage partagé) était plus facile à comprendre et clairement visible à l'écran.
  • La navigation principale a été déplacée au bas de l'écran, avec des étiquettes claires sous chaque icône.
  • Les boutons ont été positionnés selon leur hiérarchie.
  • Une interface plus cohérente a été développée pour une transition en douceur vers la version haute fidélité.
Wireframes: 3ème itération créée dans Sketch

№4: exécution de la conception

Enfin, j'ai pris les structures filaires à moyenne fidélité et les ai déplacées dans une maquette haute fidélité dans Sketch.

Itérations Exemple 1 - Écran Plan de voyage

L'objectif est de donner la priorité à l'engagement des amis.

  • La navigation a été déplacée vers le bas.
  • La possibilité d'ajouter des amis au voyage se trouve en haut, avant la planification.
  • Les votes sont clairement visibles sur le plan de voyage.
  • Les notifications permettent à l'utilisateur de savoir quand ses amis interagissent avec le plan.
Itérations du prototype en papier à la maquette haute fidélité

Exemple 2 d'itérations - Écran Activités trouvées

L'objectif est de réduire la charge cognitive en limitant les choix sur l'interface et en créant un seul flux d'actions.

  • Le bouton «Ajouter au voyage» a été supprimé, laissant «Lire plus».
  • La partie visuelle est devenue plus visible et plus attrayante.
  • Le ton de la voix reste léger et joyeux pour engager l'utilisateur.
Itérations du prototype en papier à la maquette haute fidélité

Conseil d'humeur

Le tableau d'humeur a inspiré le ton de la voix de l'application. Cela m'a également permis d'explorer différentes combinaisons de couleurs.

Conseil d'humeur

Guide de style

Guide de style

Prototype

Flux de travail prototype créé avec InVision

Prototype gif créé avec Gif Brewery

№5: Réalisations

  • L'utilisateur est content et pas stressé
  • Engagement facile de ses amis
  • La planification de voyage est beaucoup plus facile!

Bonheur> fiançailles> détente

Prochaines étapes

D'autres add-ons pourraient être développés et intégrés dans l'application.

  • Connexion avec les réseaux sociaux
  • Créez des activités personnalisées et partagez-les avec la communauté
  • Ajouter des notes personnelles et des images aux activités
  • Un chat interne pour le plan de voyage
  • Télécharger le contenu pour un accès hors ligne
  • Localisation des activités sur une carte

Conclusion

Ce fut un sprint amusant et stimulant de deux semaines. J'ai beaucoup appris à toutes les phases de la recherche et du développement. C'était fantastique de pouvoir comprendre les besoins réels d'un utilisateur en effectuant des tests et en recevant des commentaires.

A propos de l'auteur

Je suis diplômé du programme UXDI (User Experience Design Immersive) de l’Assemblée générale de Londres. Je suis actuellement activement à la recherche d'un emploi et je suis heureux de me rencontrer pour un café ou une discussion rapide.
Mes travaux de conception peuvent être consultés dans mon portefeuille.
Contactez-moi par ux@davidetremolada.com

Aussi, s'il vous plaît laissez vos commentaires pour m'aider à améliorer.