Un guide pour relever les défis et exceller dans votre stage de design UX

Il y a des stages dans tous les secteurs imaginables – des RH aux services bancaires d'investissement – mais à quoi pourrait ressembler un stage de design UX? Dans cet article, Erica parle de son stage dans une agence à Grenade, de ses tâches, de tous les défis auxquels elle a été confrontée et de la manière dont elle a surmonté la peur d'essayer quelque chose de nouveau.

Ceci est l'histoire de mon stage de design utilisateur. Je ne dis pas que votre stage va être comme le mien. En fait, s’il ya une chose que je peux dire pour façonner vos attentes, ce serait la suivante: soyez prêt à les mettre de côté. Surtout, souvenez-vous de donnez-vous de l'espace et du temps pour apprendre . Je partage mon histoire pour me rappeler à quel point j'ai lutté et à quel point tout s'est déroulé malgré mes difficultés pour que je ne cesse jamais d'essayer et vous ne le ferez pas non plus.

Tout a commencé en mai 2018 avion à Grenade, en Espagne, avec un bagage à mes côtés, un ordinateur portable dans mon dos et de l'espagnol très rouillé dans ma tête. C'était ma première fois en Europe et je serais ici pour les trois prochains mois à faire un stage en design UX à Badger Maps . J'étais encore assez vert en UX, ayant appris cela il y a à peine un an, mais je me sentais prêt et désireux d'acquérir de l'expérience dans un environnement professionnel.

J'ai appris à appliquer des connaissances techniques pour compléter les tâches de conception pratiques qui m'ont été confiées:

• Créez un système de conception pour notre application iOS en utilisant Sketch;
• Concevez une nouvelle fonctionnalité qui afficherait les erreurs survenant lors de l'importation des données; pour mettre en œuvre mon design;
• Créez des animations avec Adobe Illustrator et After Effects.

Cet article est destiné aux débutants comme moi . Si vous êtes novice en design UX et que vous souhaitez explorer le domaine, lisez la suite pour savoir si un stage de design UX est ce qu'il vous faut! Pour moi, le travail que j'ai fini par terminer dépassait largement mes attentes. J'ai appris à créer un système de conception, à compromettre le design avec les besoins des utilisateurs, à mettre en œuvre un nouveau design et à créer des «moments de joie». Chaque jour du stage présentait quelque chose de nouveau et d'imprévisible. À la fin de mon stage, je me suis rendu compte que j'avais créé quelque chose de réel, quelque chose de tangible, et que c'était comme si tout ce que j'avais combattu était soudainement en place.

Lecture recommandée : Un stage de design graphique de premier ordre

Chapitre 1: Legos

Ma première tâche était de créer un système de conception pour nos application iOS J’avais créé des systèmes de conception dans le passé pour mes propres projets et applications, mais je ne les avais jamais réalisés de manière rétrospective et jamais pour un design qui n’était pas le mien. Pour terminer la tâche, je devais effectuer une ingénierie inverse des maquettes dans Sketch; Il faudrait d'abord mettre à jour et optimiser le fichier pour créer le système de conception.

C'était aussi à ce moment opportun que j'ai appris que le programme Sketch sur mon ordinateur était obsolète depuis environ un an et demi. Je ne connaissais aucun des symboles, substitutions et autres fonctionnalités des nouvelles versions. Leçon apprise: conservez votre logiciel à jour.

Avant de m'inquiéter de la page des symboles, j'ai parcouru la maquette de la maquette par artboard, en m'assurant qu'ils étaient mis à jour et fidèles à la version actuelle de l'application. Une fois cela fait, j'ai commencé à créer des symboles et des remplacements pour différents éléments. J'ai commencé avec l'en-tête et le pied de page et je suis parti de là.

En règle générale, si un élément était affiché sur plus d'une page, je le transformerais en symbole. Au fur et à mesure, j'ai ajouté différentes icônes au système de conception, en construisant la bibliothèque. Cependant, il est rapidement apparu que le système de conception évoluait et évoluait plus rapidement que je ne pouvais essayer de l’organiser. À mi-parcours, j'ai cessé d'essayer de garder les symboles organisés, préférant revenir en arrière et les réorganiser une fois la recréation terminée. Lorsque j'ai cessé de faire des allers-retours entre les maquettes et les symboles et que je m'inquiétais de l'organisation pour les deux, je pouvais travailler plus efficacement.

Les fonctionnalités rendaient le programme beaucoup plus puissant que ce à quoi j'étais habitué et augmentaient la faisabilité du fichier pour les futures conceptions. La tâche de créer le système de conception lui-même m'a incité à plonger dans le programme et à comprendre tous les détails de la conception de notre application . J'ai commencé à remarquer de petites incohérences en termes d'espacement, de taille d'icône ou de taille de police que j'ai pu corriger au fur et à mesure de mon travail.

L'étape finale consistait à retourner dans la page des symboles et à tout organiser. J'ai supprimé tous les symboles, supprimé ceux qui n'étaient pas utilisés et les répliques. En dépit d'être un peu fastidieux, c'était une étape très importante dans le processus . Passer en revue les symboles après avoir parcouru le document m'a permis de réévaluer comment j'avais créé les symboles pour chaque page. Leur regroupement m'a obligé à réfléchir à la manière dont ils étaient liés dans l'application.

En parcourant ce processus de réflexion, j'ai réalisé à quel point il était difficile de créer un système de nommage. J'avais besoin de créer un système suffisamment large pour englober suffisamment d'éléments, suffisamment spécifique pour éviter d'être vague et pouvant être facilement compris par un autre concepteur. Il m'a fallu quelques essais avant d'atterrir sur un système fonctionnel avec lequel j'étais heureux. En fin de compte, j'ai organisé des éléments en fonction de l'endroit où ils ont été utilisés dans la demande en regroupant des éléments comme des listes. Cela a bien fonctionné pour une application comme Badger qui avait des conceptions distinctes pour différentes fonctionnalités de l'application. Le produit final était un fichier plus organisé avec lequel il serait beaucoup plus facile de travailler pour de futures itérations de conception.

En tant que pierre angulaire de ce projet, j'ai expérimenté la modernisation du design. J'ai repensé les en-têtes dans l'application, en s'inspirant d'applications Apple natives. Heureusement, l'équipe était également enthousiaste à ce sujet et envisageait d'implémenter les modifications dans les futures mises à jour de l'application. Je suis parti avec une compréhension fondamentale beaucoup plus grande des choses comme la taille de la police, la couleur et l'espacement en raison de la refonte de chaque page. L'exercice consistant à copier le design existant nécessitait une attention minutieuse aux détails qui était très satisfaisante. C'était comme assembler un modèle Lego: j'avais tous les éléments et je savais à quoi ressemblait le produit final. J'avais juste besoin de tout organiser et de les assembler pour créer le produit fini. C'est l'une des raisons pour lesquelles j'aime faire du design UX.

Chapitre 2: La conception

La partie suivante de mon stage m'a permis d'entrer dans les mauvaises herbes avec un travail de conception. La tâche: concevoir une nouvelle page d'importation pour l'application Web Badger.

L'équipe travaillait à la refonte de l'intégration du blaireau à CRM afin de créer un système permettant aux utilisateurs de visualiser les synchronisations de données et de gérer leurs comptes eux-mêmes. La connexion actuelle implique beaucoup de travail pratique de la part de CSA et d'EI badger à configurer et à gérer. En fournissant une interface permettant aux utilisateurs d'interagir directement avec les importations de données nous voulions améliorer l'expérience utilisateur pour notre intégration CRM.

Mon objectif était de concevoir une page qui afficherait les erreurs survenant lors de toute importation de données et qui indiquerait également aux utilisateurs comment et où apporter les modifications nécessaires à leurs données. S'il y avait plus d'erreurs associées à une seule importation ou si les utilisateurs souhaitaient afficher toutes les erreurs en même temps, ils devraient pouvoir télécharger un fichier Excel contenant toutes ces informations.

Objectifs

1. Créer une page d'importation informant l'utilisateur sur le statut d'une importation en cours;
2. Fournit un enregistrement historique des synchronisations de comptes entre Badger et le CRM avec des erreurs détaillées associées à chaque importation;
3. Fournit des liens vers CRM pour chaque compte comportant une erreur d'importation dans Badger ;
4. Autoriser les utilisateurs à télécharger un fichier Excel de toutes les erreurs en suspens.

User Stories

Client Badger avec compte CRM :
En tant que client avec un CRM, je veux pouvoir me connecter mon CRM à mon blaireau et visualise toutes les données synchronisées de sorte que je sois au courant de toutes les erreurs dans le processus et que je puisse apporter des modifications si nécessaire.

Badger :
être en mesure de gérer et d'afficher l'état de leur intégration CRM afin que je peut économiser du temps et du travail manuel en aidant et en dépannant les utilisateurs en synchronisant leur blaireau avec leurs comptes CRM.

Avant de me lancer dans la conception, nous devions réfléchir aux informations à afficher et comment:

1. Bulk versus importations continues
   Selon le type d'utilisateur, il existe deux manières d'importer des données dans Badger. Si cela se faisait par le biais de feuilles de calcul, les importations seraient groupées et nous pourrions visualiser les importations en groupes. Les utilisateurs intégrés à leurs CRM, cependant, devraient constamment mettre à jour leurs données Badger au fur et à mesure de leurs modifications dans leur CRM. La conception devait être capable de gérer les deux cas d'utilisation.
2. Enregistrements d'importation
   Comme il s'agissait d'une nouvelle fonctionnalité, nous n'étions pas absolument certains du comportement de l'utilisateur. Par conséquent, il était difficile de décider comment organiser l’information. Doit-on permettre aux utilisateurs de rechercher un défilement infini dans une liste de leur historique? Comment chercheraient-ils une importation spécifique? Devraient-ils pouvoir le faire? Doit-on afficher l’activité jour par jour ou mois par mois?

En fin de compte, nous n’avons pu faire que des suppositions pour chacun de ces problèmes, sachant que nous pourrions faire les ajustements appropriés une fois que les utilisateurs fonctionnalité. Après avoir réfléchi à ces problèmes, je suis passé au wireframing. J'ai eu l'occasion de concevoir quelque chose de complètement différent et c'était à la fois libérateur et stimulant. La conception finale était l'aboutissement d'éléments individuels issus de divers modèles créés en cours de route.

Processus de conception

La partie la plus difficile de ce processus était d'apprendre à recommencer. J'ai finalement appris que forcer quelque chose dans ma conception uniquement à des fins esthétiques n'était pas idéal. Comprendre cela et laisser mes idées partir était la clé pour arriver à un meilleur design. J'avais besoin d'apprendre à recommencer encore et encore pour explorer différentes idées.

Challenges

1. En utilisant les espaces blancs

Dès le départ, je devais explorer les informations que nous voulions afficher sur la page. Il y avait beaucoup de détails que nous pouvions inclure – et sans aucun doute la marge de manœuvre.

Grand aperçu )

Toutes les informations inutiles ajoutaient beaucoup trop de charge cognitive et éliminaient les préoccupations réelles de l'utilisateur. Au lieu d'essayer de me débarrasser de tout l'espace blanc, je devais travailler avec. Dans cette optique, j’ai finalement jeté toutes les informations non pertinentes pour montrer uniquement ce qui préoccupe le plus nos utilisateurs: les erreurs associées aux importations de données.

Il s’agissait de la version finale:

2. Navigation

Le défi suivant consistait à choisir entre une barre latérale et un en-tête pour afficher des informations. L'avantage de la barre latérale était que les informations seraient systématiquement visibles lorsque l'utilisateur faisait défiler. Mais nous devions également nous assurer que les informations contenues dans la barre latérale étaient logiquement liées à ce qui se passait dans le reste de la page.

L'en-tête offrait l'avantage d'un design simple à colonne unique. L'inconvénient était qu'il prenait beaucoup de biens immobiliers verticaux en fonction de la quantité d'informations contenue dans l'en-tête.

Une fois que j'ai déterminé quelles informations afficher, la navigation dans la barre latérale est devenue la décision la plus logique. Nous nous attendons à ce que les utilisateurs soient principalement préoccupés par les erreurs associées à leurs importations et avec un en-tête volumineux, une trop grande partie de ces informations tomberaient en dessous du pli. La barre latérale pourrait alors être un conteneur pour un résumé des importations et des activités qui serait visible lorsque l'utilisateur faisait défiler.

Conception de la barre latérale : Après avoir décidé d'utiliser une barre latérale, inclure et comment l'afficher.

J'ai eu du mal à créer un design visuellement intéressant car il y avait peu d'informations à montrer. Pour cette raison, je me suis à nouveau retrouvé à ajouter des éléments inutiles pour remplir l'espace, même si je voulais donner la priorité à l'utilisateur. J'ai essayé différentes combinaisons de contenu et de couleurs en essayant de trouver le compromis entre design et facilité d'utilisation. Plus je travaillais avec elle, plus je pouvais analyser le dessin aux os nus. Il est devenu plus facile de différencier les informations utiles des remplisseurs. Le produit final est un design simplifié avec seulement quelques statistiques récapitulatives.

Processus d'importation : la page de progression de l'importation a été créée après la finalisation de la conception de la page d'importation. Le plus grand défi de conception ici consistait à décider comment afficher la synchronisation des importations en cours. J'ai essayé différentes solutions à partir de fenêtres contextuelles et de superpositions, mais j'ai finalement décidé de montrer la progression dans la barre latérale. De cette façon, les utilisateurs peuvent toujours résoudre les erreurs et voir l'historique des données de leur compte lorsqu'une importation est en cours. Pour empêcher toute interruption de l'importation, les boutons "Sync data" et "Back to Badger" sont désactivés pour que les utilisateurs ne puissent pas quitter la page.

Grand aperçu )

Avec les conceptions réalisées, je suis passé à HTML et CSS.

Chapitre 3: HTML / CSS

Ce projet a été ma première expérience avec tout type de codage. Bien que j'aie essayé d'apprendre le HTML et le CSS auparavant, je n'avais jamais atteint le niveau de compétence requis. Et quelle meilleure façon de commencer qu'avec une maquette de son propre design?

Comprendre la logique de l'organisation d'un document HTML m'a rappelé l'organisation du document Sketch avec des symboles et des remplacements. Cependant, les similitudes se sont arrêtées là. Le codage était comme une chose très étrangère que j'essayais constamment de me faire comprendre. Comme le dirait mon mentor, «vous développez des muscles très différents de ceux de la conception ». Avec le produit final en main, je suis convaincu que l'apprentissage du code est la chose la plus cool. J'ai appris à faire depuis ma formation de pot.

Le premier défi, après avoir défini un document et compris les bases, était de travailler avec Flexbox. Le design que j'avais créé impliquait deux colonnes côte à côte. La partie droite était censée défiler tandis que la gauche restait statique. Flexbox semblait être une solution propre à cette fin, en supposant que je pouvais le faire fonctionner.

L'implémentation de Flexbox consistait en de nombreuses erreurs et erreurs de copie du code alors que je parcourais divers sites Web, lisais des didacticiels et inspectais du code. Avec les conseils de mon mentor tout au long de ce processus, nous avons fini par le faire fonctionner. Je n'oublierai jamais le moment où j'ai finalement compris qu'en utilisant flex-direction: column je rassemblerais tous les éléments dans une seule colonne, et flex-direction: row a aidé à placer

Cela fait tellement de sens maintenant, bien que ma compréhension initiale en soit exactement le contraire (je pensais que flex-direction: la colonne mettrait les éléments les uns à côté des autres). Étonnamment, je ne suis même pas arrivé à cette réalisation avant que le code ne fonctionne. Je révisais mon code et je me suis rendu compte que je ne le comprenais pas du tout. Qu'est-ce qui m'a déconcerté? Dans mon CSS, j'avais codé flex-direction: row dans la classe I colonne . Ce scénario était assez révélateur de la façon dont le reste de ma première expérience de codage s'est déroulée. Mon modèle mental était rarement aligné sur la logique du code et ils se heurtaient souvent et se séparaient. Lorsque cela s'est produit, j'ai dû revenir en arrière, trouver mes idées fausses et corriger le code.

Après avoir configuré Flexbox, je devais trouver comment obtenir que la colonne de gauche reste fixe pendant que la partie droite défilait. Il se trouve que cela n’a pas été possible avec une seule ligne de code, comme je l’espérais. Mais cela m'a aidé à comprendre la relation parent-enfant qui m'a énormément aidé dans le reste du processus.

Le codage de la ligne de temps verticale et du cadran était également un processus. La chronologie était plus simple que je l'avais prévu à l'origine. J'ai été en mesure de créer un rectangle mince, de définir une ombre interne et un dégradé de remplissage, et de l'assigner à la largeur de chaque journal d'activité.

Le cadran était délicat. J'ai essayé de l'implémenter avec du CSS pur avec très peu de succès. Il y a eu quelques fois j'ai envisagé de changer le design pour quelque chose de plus simple (comme une barre de progression) mais je suis assez content de l'avoir.

Une des grandes difficultés consistait à sortir le cadran de progression pour faire chevaucher le cercle de fond le long de la frontière. C'est là que j'ai un peu changé la conception – au lieu de couper la partie non chargée du cadran de progression, elle se chevauche tout autour. C'était un compromis entre ma conception et mon code que je ne voulais pas faire au départ. En fin de compte, cependant, j'étais satisfait du résultat final et une fois que j'ai réalisé cela, j'étais heureux de faire ce compromis. Le cadran final a été implémenté via JavaScript.

Il y a eu un moment dans mon processus de codage où j'ai jeté toutes les lignes de code que j'ai écrites dans chaque classe pour essayer de le faire fonctionner. Pour compenser ce manque de recul, je devais passer pas mal de temps à parcourir et à inspecter tous les éléments pour supprimer le code inutile . Je me sentais comme un propriétaire expulsant les locataires qui ne payaient pas de loyer. C'était certainement une leçon apprise en maintenant un niveau de ménage et en étant judicieux et réfléchi avec le code.

La majorité de l'expérience ressemblait à un parcours aveugle et à un apprentissage rétrospectif. Cependant, rien n'était plus satisfaisant que de voir le produit fini. Le fait de parcourir le processus m'a amené à interagir avec mon travail d'une manière que je n'avais jamais faite auparavant et m'a donné un aperçu de la manière dont le design est implémenté. Dans toutes mes attentes pour le stage, je n'avais jamais imaginé pouvoir coder et créer un de mes propres designs. Même après qu'on m'a dit que je serais capable de le faire le premier jour, je n'y croyais pas avant d'avoir terminé cette page.

Chapitre 4: Travailler avec des blaireaux

Dans le cadre du processus d'intégration des utilisateurs de Badger avec leurs comptes CRM, nous avions besoin que nos utilisateurs se connectent à leur CRM, nous obligeant à les rediriger du blaireau vers le site Web natif de CRM. Pour éviter un changement brusque d'un site à un autre, je devais concevoir des pages de chargement intermédiaires.

Grand aperçu )

J'ai commencé avec votre page de redirection statique standard. Ils étaient simples et répondaient parfaitement à leur objectif, mais nous n’en sommes pas très satisfaits.

Le défi consistait à créer quelque chose de simple et d’intéressant qui informait l’utilisateur qu’il quittait notre site Web en quelques secondes. Le design devrait se présenter, expliquer pourquoi il était là et partir avant que quiconque ne soit fatigué de le regarder. C'était essentiellement un exercice de speed dating. Dans cet esprit, j'ai décidé d'essayer des animations, en particulier celle d'un blaireau effronté inspiré du logo existant.

En utilisant le logo du blaireau comme point de départ, j'ai créé différents caractères de blaireau dans Adobe Illustrator. Le logo d'origine était un peu trop sévère pour une animation de chargement, j'ai donc opté pour quelque chose d'un peu plus mignon. Pour conserver la cohérence de la poitrine et des traits du visage, j'ai conservé la cohérence et travaillé à créer un corps et une tête autour de ces éléments. La tête et les rayures ont mis du temps à se masser pour former des formes qui me plaisaient. Le corps a pris la forme un peu plus facilement, mais il a fallu un peu plus de temps pour trouver la juste proportion entre la taille de la tête et celle du corps. Une fois que j'ai compris cela, j'étais prêt à animer.

Mon premier instinct était d'essayer une animation en stop-motion. Je pensais que ça allait être génial – un Wallace et Gromit. Mais après la première tentative, puis la seconde et toutes celles qui ont suivi, il est devenu clair que regarder cette émission en tant qu'enfant ne m'avait pas complètement équipé des compétences nécessaires pour faire une animation en stop-motion.

t capable d'atteindre la finesse que je voulais, et il y avait de petites incohérences qui semblaient trop discordantes pour une animation de chargement très courte. L'animation fonctionne généralement à 23 images par seconde et mon animation de blaireau ne contenait qu'environ 15 images par seconde. J'ai envisagé d'ajouter plus de cadres, mais à la suggestion de mon mentor, j'ai décidé d'essayer plutôt l'animation de personnages.

C'était la première fois que j'animais plus de 5 pièces mobiles. comprendre comment animer un personnage en deux dimensions d'une manière visuellement satisfaisante. J'avais besoin d'animer les éléments individuels pour qu'ils se déplacent indépendamment d'eux-mêmes afin de rendre le mouvement crédible. En travaillant sur l'animation, les calques importés sont devenus de plus en plus granulaires. La tête est passée d'une couche à cinq lorsque j'ai appris le comportement du programme et comment faire bouger le blaireau.

J'ai ancré chaque membre du corps et j'ai placé chaque partie du corps en tant qu'enfant dans la couche parentale du corps. . Je mets les points d'ancrage en conséquence au sommet des cuisses et des épaules pour m'assurer qu'ils se déplacent correctement puis, en utilisant des rotations et des assouplissements, simulez le mouvement des parties du corps. La tête était un peu délicate et nécessitait un mouvement vertical indépendant du corps. Pour rendre le saut plus réaliste, je voulais que la tête reste un peu dans l’espace avant d’être poussée par le reste du corps, et de descendre légèrement après lui. J'ai aussi ajusté l'angle que je tentais de lui donner comme s'il menait avec son nez, pointant vers le haut pendant le saut et simple pendant qu'il courait.

L'animation redirigeant l'utilisateur vers le blaireau affichait le bébé blaireau retournant au blaireau avec un sac à dos rempli d'informations provenant du CRM. [19659121] Animation du bébé blaireau à la demande du blaireau.

Et enfin: le blaireau confus. Cela a été fait pour la dernière page que je devais créer: une page d'erreur informant l'utilisateur des complications inattendues du processus d'intégration. Et quelle meilleure façon de le faire alors un blaireau sympathique et confus?

La partie délicate ici consistait à combiner le profil latéral du blaireau de dessin animé existant et le logo pour créer une forme de tête orientée vers l’avant. Avant de commencer ce projet, je n’avais jamais vu une fois un vrai blaireau. Inutile de dire que Badger a trouvé sa place dans mes recherches d'images Google ce mois-ci. J'ai été surpris de voir à quel point la tête d'un blaireau est plate. Dans mes premiers dessins, j’ai essayé d’imiter cela mais je n’étais pas satisfait du résultat. J'ai travaillé avec la forme un peu plus, ajustant la position du nez, des rayures et des oreilles pour obtenir le résultat final:

m'a obligé à prendre mon savoir préexistant à un niveau supérieur. J'avais besoin de dépasser mes connaissances plutôt que de me limiter à ce que je pensais pouvoir faire. Au départ, je travaillais avec l’animation image par image parce que je ne me faisais pas confiance pour faire de l’animation de personnages. En me donnant la chance d'essayer quelque chose de nouveau et de différent, j'ai pu réaliser quelque chose qui a dépassé mes propres attentes.

Conclusion

Les trois mois que j'ai passés à mon stage ont été incroyablement gratifiants. Chaque jour consistait à apprendre et à essayer quelque chose de nouveau. Il y avait des défis à tout ce que je faisais – même avec des tâches que je connaissais plus, comme le design. Chaque fois que j'ai créé quelque chose, j'étais très incertain et inquiet de la façon dont il serait reçu. There was a lot of self-doubt and lots of discarded ideas.

For that reason, it was incredible to be part of a team and to have a mentor to lead me in the right direction. Being told to try something else was often the only encouragement I needed to try something else and achieve something bigger and better. I like to picture myself as a rodent in a whack-a-mole game, being hit on the head over and over but always popping up again and again. Now the struggles and challenges have come to an end, I only want to do it all over again.

I appreciate what I’ve learned and how I was pushed to go beyond what I thought I could do. It’s crazy to see how far I’ve come in a few months. My understanding of being a UX designer has grown immensely, from figuring out the features, to hammering out the design, and then writing front-end code to implement it. This internship has taught me how much more I have to learn and has motivated me to keep working. I’ve come to understand that what I can do should never be limited by what I know how to do.

(mb, ra, yk, il)