TechEase: Formation technique accessible - Étude de cas UX

Ceci est une étude de cas et le reflet d'un défi de conception d'équipe de quatre semaines.

L'ÉQUIPE

Anita English, Simon Harmon et Jesse Hunter

MON RÔLE

Recherche - entretiens en personne et questions d'enquête bien conçues
Analyse - a généré une personnalité basée sur les résultats de l'interview et de l'enquête
Conception - structures filaires basse fidélité; théorie des couleurs, typographie
Prototype - création d'un flux en associant des écrans à InVision
Tests - tests d'utilisabilité avec des structures filaires haute fidélité

LE PROJET

Les progrès technologiques laissent-ils des personnes au chômage? Les employés à faible revenu ont-ils la possibilité d'avancer dans une carrière dans la technologie?

Nous avions entre nos mains un défi de conception sociale fondé sur l’évolution rapide du paysage technologique et des normes applicables au travail de base. Cela nous a amenés à penser aux employés à faible revenu, tels que ceux qui travaillent dans les magasins de détail et les épiceries, qui ont généralement entre 17 et 25 ans. Nous devions concevoir un produit / service offrant davantage d’opportunités à ce groupe de travailleurs.

LE PROCESSUS

Nous nous sommes inspirés des Five Planes of UX, tirés de «The Elements of User Experience», écrit par Jesse James Garrett.

Je dois commencer quelque part - dans ce cas, le fond

STRATÉGIE

Afin de créer la meilleure expérience d’apprentissage technologique en ligne, nous devions rassembler des informations sur les niveaux d’intérêt des utilisateurs potentiels et leurs notions préconçues du domaine des technologies. Comprendre les paramètres qui entourent tout projet est crucial pour une bonne conception.

Pour aider à la formulation des questions d'entrevue que nous souhaitions poser aux utilisateurs actuels et potentiels, nous avons commencé par écrire tout ce que nous pensions chacun de savoir sur la formation technique en ligne (e-learning). Nous avons inclus des expériences personnelles avec Codecademy et Duolingo.

Un échantillon de questions que nous avons posées:

  • Avec quels types d'appareils avez-vous grandi?
  • Quelles sont les choses que vous aimez faire quand vous ne travaillez pas?
  • Avez-vous envisagé un emploi dans la technologie - pourquoi ou pourquoi pas?

Ensuite, après avoir effectué des recherches en ligne sur les emplois technologiques et les emplois à faible revenu (ou chômage), nous avons pu organiser nos hypothèses.

Hypothèses:

  • Les gens ont besoin d'une formation avancée en mathématiques et en sciences
  • Les gens n’ont pas vraiment le temps d’apprendre la technologie
  • Les gens pensent que les emplois technologiques sont très ennuyeux
Remue-méninges des hypothèses et élaboration de questions

Nous avons tenté de valider nos hypothèses en conduisant des entretiens en personne. En équipe, nous sommes allés au centre commercial et avons trouvé trois employés du commerce de détail. À tour de rôle, intervieweur, observateur et preneur de notes, nous avons commencé par leur poser des questions générales telles que l’âge, l’éducation et les antécédents professionnels. Nous avons ensuite posé des questions plus spécifiques sur leurs réflexions sur la technologie et sur ce qu’ils envisageaient pour leur cheminement de carrière.

Quelques réponses communes nous ont été données par eux:

  • "Je travaille principalement pour obtenir les factures payées."
  • "Quand j’entends parler de" technologie ", je pense à la programmation, à l’aide informatique, à Internet."
  • "Je ne suis pas bon en maths ou en sciences" ou "Je ne suis pas assez intelligent."
  • "Les emplois techniques sont isolés - j'imagine un ordinateur dans une petite pièce sombre."
Résultats de notre enquête

Notre premier ralentisseur rapide pensait que nous ne pouvions parler qu'avec des jeunes de 19 ans ou encore dans la mi-vingtaine, sans vraiment planifier des études supérieures. Parce que nous pensions ne pouvoir parler qu’aux utilisateurs potentiels de ce groupe d’âge, nous avons réalisé que nous nous étions injustement limités lorsqu’il s’agissait d’obtenir davantage d’interviews. Avec cette révélation bouleversante, nous avons mené des entretiens supplémentaires afin d'inclure un plus grand nombre d'âges et des expériences éducatives variées.

Juste un échantillon de nos notes d'entrevue

PORTÉE

L'étape suivante consistait à analyser les réponses et à les consolider de manière à pouvoir créer un personnage. C’était important car cela nous permettait de garder le cap sur la conception et les fonctionnalités. Nous avons appris qu'il était si facile de s'éloigner des objectifs généraux de notre projet.

Nous avons généré un personnage basé sur les entretiens et les résultats du sondage. Le premier, nous appellerons «Trent». Trent est un jeune employé de l’épicerie du quartier qui aimerait faire plus que vivre de chèque de paie à chèque de règlement. Comme vous pouvez le constater, Trent est un homme séduisant mais qui se sent embarrassé de dire à ses dates où il travaille.

Salut Trent, quel plaisir de te rencontrer!

Quand nous nous sommes retrouvés dans ce trou créatif, nous revenions au personnage (nous nous reconcentrerions sur ce que le personnage voulait)

STRUCTURE

Pour nous aider à déterminer à quoi ressemblerait le projet, nous avons assumé le rôle de notre personnage et établi nos objectifs et nos tâches. Nous avons rapidement appris qu’il y avait beaucoup de petites étapes entre les deux que nous avions simplement… passé sous silence. Le processus de mappage d’histoires nous a vraiment amenés à considérer le flux d’actions, qui éclairerait ensuite notre conception.

Événements (a.k.a. «Narrative»)

  • Voir les cours disponibles
  • Voir l'avancement des travaux (par cours)
  • Obtenir de l'aide - demander l'aide d'autres utilisateurs, instructeurs
  • Révisez les leçons et faites une évaluation
  • Trouver un emploi dans l'industrie de la technologie

Nous avons mis à l'épreuve notre flux de données en examinant chaque élément de la narration dans le contexte de «En tant que [type d'utilisateur], je souhaite [action] pour que [objectif]. Ce fut ma première fois de générer un storyboard ou une carte d’histoire utilisateur.

DÉCHIRURE. stickies

À partir de ceux-ci, nous avons choisi les tâches les plus critiques pour pouvoir commencer à concevoir un produit viable minimal (MVP). Nos images coupaient les marches qui se trouvaient en dessous de la ligne mais certaines des choses que nous avons sauvegardées pour une deuxième version étaient:

  • Voir les forfaits payés
  • Trouver et postuler - en interne - aux offres d'emploi
  • Affichage et messagerie d'autres utilisateurs prenant le même cours («classe virtuelle»)

Il était important pour nous que l’utilisateur puisse suivre son cours, suivre un cours, être évalué et demander de l’aide.

SQUELETTE

Voici quelques décisions que nous avons prises à la suite de la carte de scénario utilisateur.

Caractéristiques principales

  • Sauvegarde automatique
  • Barre de progression d'achèvement
  • Examen du catalogue de cours
  • Forum de messagerie
  • Résumé de la leçon et test

Nous nous sommes concentrés sur l’utilisation d’une fonction de sauvegarde automatique afin de réduire le stress qui pourrait nuire à notre personnalité s’il devait partir travailler au milieu de la leçon. L'intégration de la barre de progression a permis aux utilisateurs de voir combien ils avaient fait ou avaient encore à faire, ce qui, nous l'espérons, serait plus encourageant que décourageant. Nous voulions également ajouter quelque chose d'un réseau, même s'il ne s'agissait pas d'une expérience sociale complète, afin que le forum permette aux utilisateurs de communiquer entre eux, de demander de l'aide et d'offrir un sentiment de camaraderie. Si vous vous en souvenez, certains utilisateurs nous le diraient. ils pensaient que la technologie signifiait travailler en solitaire. Le but était de rendre cela pratique et pas trop stérile pour que notre personnage ne puisse pas profiter de l’apprentissage. C’est ce qui a fait que «l’école traditionnelle» et l’idée d’avoir plus d’école déconcertent notre personnage.

Nous devions maintenant associer nos idées à des lignes et à des formes, des ancres visuelles pour ainsi dire.

Filframes dessinés à la main par le vôtre
J'ai peut-être un peu abusé en dessinant des structures filaires basse fidélité, mais il est vrai que c'est ma partie préférée du processus UX. Nous avons atteint ce stade après avoir rassemblé tous nos pense-bêtes et nos fiches… que nous avions gribouillé au point que nous avions du mal à déchiffrer ce que nous avions décidé! J'ai regroupé ces annotations dans un dessin plus cohérent, à la fois pour confirmer les décisions que nous avions prises en équipe et pour nous donner plus de place à nos commentaires.

Test & Itération

Parce que j'avais fait ces dessins si détaillés, il nous était facile de diviser la responsabilité de convertir les écrans en Sketch. Nous avons gardé le design simple avec seulement quelques couleurs, ce qui nous a permis de nous concentrer sur l'architecture des flux et de l'information. Après cette étape, nous les avons téléchargés dans InVision pour créer un prototype de base.

Wireframes basse fidélité dans Sketch

Nous avons approché les utilisateurs potentiels pour obtenir des commentaires sur ce prototype et avons fourni les tâches suivantes:

  1. Voir le catalogue du cours
  2. Prendre l'évaluation des compétences
  3. Choisir un parcours d'apprentissage
  4. Créer un compte

Nous avons également testé pour voir si les utilisateurs pouvaient trouver certaines choses comme le forum de la communauté, où les utilisateurs pouvaient demander de l'aide et où envoyer leurs commentaires.

En bref, nos testeurs ont réagi favorablement à la présentation et à la fluidité. Cependant, nous avons remarqué que certains testeurs avaient du mal à savoir où regarder en premier et quoi faire. Nous avons appris de cela que nous n'avions pas fourni suffisamment de hiérarchie visuelle pour souligner nos tâches principales.

Certaines choses que nous avons changées tout de suite étaient:

  • Plus grand appel à l'action et en-tête
  • Diviser le contenu du cours en deux chemins, "Code" et "Conception"
  • Ajout de fonctionnalités supplémentaires dans les sections du didacticiel afin que les utilisateurs puissent développer, réduire ou quitter les didacticiels.
  • Ajout de texte fictif lors de la connexion / inscription
  • Changé l'évaluation des compétences en une enquête sur les intérêts
L’évaluation des compétences - nous avons apporté un ajustement MAJEUR à

Nous avons testé à nouveau après avoir apporté ces modifications et appris que nous étions sur la bonne voie avec nos itérations.

Capture d'écran de notre produit, Inscription, version mobile.

SURFACE

Alors que nous nous dirigions vers la conversion des structures filaires basse fidélité en haute fidélité (en ajoutant des copies et des images), nous avons vraiment eu du mal à trouver de la cohérence. Vous l’appelez - la taille et l’emplacement du logo, les liens présents dans la barre de navigation supérieure, les polices mêmes que nous utilisions. Cela exposait une erreur que nous avions commise et qui se poursuivait sans guide de style en place.

En regardant en arrière, c’est drôle, nous n’avons même pas donné de nom à notre produit avant cette étape de notre conception. J'ai vraiment aimé comment «TechEase» sonnait comme «techies».

Itérations de notre logo

Nous avons beaucoup travaillé et je suis tellement fier de la manière dont nous avons collaboré pour créer le produit présenté ci-dessous.

Cliquez ici pour le prototype haute fidélité.Alternance de vues dans un module de codage - avec l'aimable autorisation de Simon Harmon

CONCLUSION

Leçons apprises

"Il n'y a pas de problèmes que nous ne pouvons pas résoudre ensemble, et très peu que nous pouvons résoudre par nous-mêmes."
Lyndon B. Johnson

Comme dans tout projet d'équipe, il y a des frustrations. Il y a un risque de méconnaissance de quelque chose que l’on pensait universellement, par exemple la nuance d’orange que nous utilisions pour les boutons et l’accent. Il y avait des horaires de coordination pour se réunir au cours de la fin de semaine et parfois pour travailler tard dans la soirée. Il est difficile de maintenir la cohérence entre les versions des mêmes fichiers. Hé, au moins, je connais très bien mon nouvel ordinateur, très vite.

Un obstacle personnel consistait à éviter la mentalité du «je vais le faire moi-même». Je me considérais comme assez expérimenté en matière d'interview et d'utilisation de logiciels de conception. Je voulais donc que mes coéquipiers acquièrent chacun de l'expérience en interviewant des inconnus et en créant des éléments visuels.

Aller de l'avant

Bien que cela puisse sembler redondant, je veux m'assurer de décrire nos objectifs et le processus depuis le début et de s'asseoir périodiquement pour les examiner. L’importance de garder tout le monde sur la même page ne m’a jamais été aussi claire que lorsque nous travaillons sur différentes pages (du produit).

Nous avons passé la majorité de notre projet à penser que si nous étions une entreprise, nous pourrions le garder complètement libre. Cependant, il nous est apparu maintes et maintes fois que qui voudrait assumer les coûts de développement d'un site Web sans générer de revenus (même pour la maintenance du site)?! Dans nos conceptions, nous avions voulu proposer des lots de cours payants, mais nous avions décidé d'offrir quelques leçons par cours, ou peut-être quelques cours par catégorie gratuitement, puis de proposer le forfait ou l'abonnement à d'autres fonctionnalités se cachant derrière un paywall.

Merci d'avoir lu! Si vous souhaitez en voir plus, visitez mon portfolio à l'adresse media.com/anitaenglish.