En septembre 2019, j'ai été embauché en tant que concepteur UX/UI pour travailler pour Spot Educação .

Le projet qui m'a été confié était un produit B2B destiné aux écoles à petit budget à la recherche d'une solution parfaite pour leurs angoisses d'apprentissage de l'anglais. L'objectif principal de Go Bilingual était d'approcher ces écoles avec une application conviviale destinée à leurs enseignants et gestionnaires, offrant notre expertise en matière d'apprentissage de l'anglais à faible coût.

Le concept promettait de nombreuses fonctionnalités. Mais qu'est-ce que c'était vraiment ? Quels ont été nos utilisateurs, leurs parcours ? Combien de choses pourrions-nous réellement développer en si peu de temps ?

Ici, je vais couvrir notre parcours jusqu'à présent, tout ce que nous avons appris du développement et de la conception du produit et l'avenir que nous envisageons pour lui.

1. Découverte

Dès que j'ai commencé à travailler pour Spot Education , les choses semblaient sombres : nous avions une idée du concept, mais il n'existait toujours pas ; Nous n'en savions rien à part le fait qu'il devait avoir quelques fonctionnalités, mais même cela n'a pas été facile. Le chemin était brumeux et rempli d'incertitudes. Nous ne savions pas qui était notre utilisateur final ; nous ne savions pas si beaucoup de ces fonctionnalités seraient réellement viables dans notre MVP ; nous ne savions même pas si le produit serait écrit dans une architecture entièrement nouvelle, construite à partir de zéro, ou si nous allions en cloner une existante, à partir d'un produit déjà fonctionnel de notre société appelé Edify , et commencer à partir de là.

Découvrir ce qu'était notre produit était vraiment important ; Notre société a donc engagé une aide extérieure sous la forme de Grito.cc .

Grito est une agence de design numérique de Rio de Janeiro, au Brésil. Leur objectif était de fournir une solution agile et agréable à nos problèmes. Ils ont fait des recherches avec des enseignants et des professeurs et ont tout préparé pour notre sprint de conception . Ils nous fourniraient également 6 écrans pour les applications de bureau et mobiles, sur la base de cet exercice et de notre propre philosophie et direction de conception.

En partant de zéro, nous avons commencé à discuter de ce que notre produit devrait être, avoir et de ce qu'il ne serait pas et n'aurait pas. Nous avons rédigé quatre personnages, tous enseignants, d'horizons, d'âges et de statuts sociaux différents. La principale chose que nos recherches et notre exercice d'empathie nous ont montré est que l'un des principaux malheurs des enseignants était qu'ils ressentaient le besoin d'avoir plus de soutien professionnel et aussi d'être plus en contact avec un contenu important et pertinent visant leurs besoins pédagogiques. Ils voulaient se perfectionner en tant que professionnels.

En interne, nous avons ressenti le besoin de contempler les malheurs des directeurs et administrateurs scolaires également ; nous avons donc fait nos propres recherches et avons trouvé notre propre personnage, quelqu'un qui utiliserait notre application en interne, gérerait le personnel, passerait les commandes et plus encore.

Donc, à la base, nous avions deux produits en un : un Extranet, utilisé par les administrateurs et les managers ; et un portail de l'enseignant, utilisé par les enseignants et, éventuellement, les étudiants. Nous sommes donc partis concevoir et développer les deux.

2. Définir

Alors, comment développerions-nous et concevrions-nous nos applications ? Quelle technologie serait utilisée ? À quoi ressemblerait le design ? Après le sprint de conception, nos propres recherches et nos besoins commerciaux, comment définirions-nous nos produits ?

Étant donné que le produit était déjà vendu, nous avons commencé à discuter s'il serait rentable de concevoir une toute nouvelle architecture à partir de zéro ou simplement de cloner une architecture existante déjà utilisée par l'un des produits de la société, Edify . Les décideurs ont opté pour ce dernier, car nous avions un calendrier serré et devions livrer l'Extranet le plus tôt possible.

Nous commencions également, en même temps, à définir à quoi ressemblerait le portail des enseignants ; une solution Web réactive pour nos enseignants, où ils pourraient bénéficier d'une orientation professionnelle et d'un mentorat de la part de nos pédagogues.

Donc, fondamentalement, toutes ces décisions et définitions sensées nous ont permis de développer et de concevoir le produit de manière bidirectionnelle et nous ont également permis de démarrer nos sprints et nos cycles de produits. Alors que j'étais chargé de concevoir le produit dans son ensemble et d'avoir une vue d'ensemble, les développeurs étaient chargés de construire à partir de zéro en fonction de nos décisions.

3. Conception

Accrochez-vous car ça va être long.

Dès que nous avons eu le feu vert pour commencer à développer et à concevoir le produit, j'ai créé un fichier Figma appelé " Go Bilingual Design System ". Au début, nous n'avions pas grand-chose à faire; quel serait le concept de notre système de conception ? Quels étaient nos objectifs en développant ledit système ?

En m'inspirant d' Atomic Design , j'ai décidé de commencer par nos icônes , car elles sont le plus petit élément dont notre produit aurait besoin. Après quelques recherches, je suis tombé sur un excellent système de conception des gens d' Akveo , Eva . Les icônes de ce système de conception avaient la rondeur et la lisibilité que nous recherchions, elles étaient donc parfaitement assorties. La seule différence, cependant, est que nous avons établi une règle de base lors de l'utilisation des icônes ; au lieu d'avoir deux ensembles d'icônes, nous avons décidé de rendre un ensemble disponible et l'autre d'être l'ensemble d'interaction, ce qui signifie que chaque fois que vous interagissez avec une icône d'une manière spécifique, une éventuelle deuxième icône serait montrée à l'utilisateur.

Après avoir décidé ce que seraient nos icônes — et puisqu'il n'y aurait pas besoin de les concevoir à partir de zéro — la prochaine étape serait d'examiner notre marque, son logo, ses valeurs et son identité visuelle, car les systèmes de conception prennent généralement une approche différente, plus ouverte et fluide du développement et du design de la marque.

L'identité visuelle de Go Bilingual a d'abord été conçue par les gens de Quintal . Le manuel qu'ils nous ont fourni comprenait le logo et quelques applications, la palette de couleurs, avec les options primaires et secondaires et la typographie, avec Panton comme option principale et Open Sans comme secondaire. Cependant, les équipes commerciales trouvaient leur approche trop "joyeuse", "jeune" et "colorée" et ce n'était pas forcément notre cible, puisque les principaux utilisateurs de notre produit seraient les directeurs d'école et les enseignants. Nous avions besoin d'une identité visuelle plus sobre, dans laquelle nos utilisateurs se sentiraient plus à l'aise et à l'aise pour utiliser le produit pendant de longues périodes. Nous avons également pensé qu'un produit numérique devait être plus flexible et fluide au niveau de ses systèmes, et son identité visuelle devait refléter cela.

Nous avons décidé d'étirer les couleurs du projet ; seules trois teintes principales peuvent être bonnes pour un grand projet de conception d'impression, mais ce n'est pas assez quand il s'agit des nuances qu'un projet numérique doit englober, du moins d'après mon expérience. Donc, ce que nous avons fait, c'est de prendre chacune des couleurs principales et de créer trois nuances différentes basées sur elles et nous avons également augmenté le nombre de tons principaux et subsidiaires. Une autre règle que nous avons définie était que n'importe quel nombre de dégradés entre l'une des deux couleurs de notre ensemble était possible, rendant notre conception fluide et extrêmement polyvalente.

Notre nouveau logo a été développé en interne ; c'était juste une réinvention de l'ancien, en se concentrant davantage sur les dégradés et les contours, apportant ainsi un visuel plus moderne à notre marque. Nous avons également lié le concept derrière l'ensemble du système de conception alors que nous examinions notre logo et c'est à ce moment-là que l' idée du "treillis" est née. Étant donné que tous nos systèmes devaient être faciles à construire et hautement gérables, nous avons pensé à un treillis, une grille ouverte, où les idées pourraient être placées, développées et conçues librement et en constante évolution.

Nous croyons vraiment aux conceptions et aux systèmes fluides et aux environnements en constante évolution.

Avec notre ensemble de thèmes Design System , nous avons commencé à concevoir nos composants et chaque élément qui serait présent dans nos applications numériques. Nous avons pris ce qui a été appris de notre sprint de conception et de tout ce qui a été produit jusqu'à présent et avons commencé la production, en essayant d'être cohérents et en travaillant autour des directives établies. Je crois que la conception et le développement de produits sont une question de cohésion et de thématisation ; quelque chose que j'ai apporté de mes jours en tant que concepteur de jeux et directeur artistique qui est toujours vrai à ce jour et je suis heureux que nous, en tant qu'entreprise, suivons les mêmes prémisses.

4. Livraison

Le moment est donc venu, après un long cycle de conception et de développement, de livrer notre produit. Quelles sont exactement les fonctionnalités qui se sont retrouvées sur notre produit et comment cela a-t-il fonctionné ?

Notre produit a été développé en utilisant Ruby pour son back-end et React pour son front-end et nos développeurs ont utilisé les directives établies par le système de conception pour implémenter notre portail des enseignants .

Notre MVP aurait une page de destination , qui présenterait les valeurs et la mission de notre produit et ce que nous essaierions de réaliser ; une page de tendances , où l'utilisateur pourrait voir, regarder, lire et écouter du contenu exclusivement adapté aux enseignants, éducateurs et professeurs ; une page de ressources , où vous retrouveriez l'intégralité des contenus créés par nos pédagogues ; une page de parcours de développement , où les enseignants pourraient apprendre à devenir encore meilleurs professionnels en suivant nos cours spécialisés ; et une page Parlez-nous , où les mêmes utilisateurs pourraient nous contacter et résoudre leurs questions et leurs inquiétudes.

Il nous a fallu un certain temps pour développer l'ensemble du produit car il avait de nombreuses fonctionnalités, mais à la fin, tout s'est bien passé et le voici; Go Bilingue's Teacher's Portal , dans toute sa splendeur.

Les besoins des entreprises évoluent constamment et Go Bilingual a été abandonné lorsque Spot Educação est devenu Edify Education . Cependant, tout le travail et les efforts qui y ont été consacrés ont été montrés ici et nous sommes vraiment fiers de ce que nous avons livré. Notre MVP a été vraiment difficile à produire et nous avons eu des tonnes de défis en cours de route, mais je suppose que c'est ainsi que se déroulent la conception et le développement de produits, et cela a été assez amusant et captivant professionnellement. De plus, ce projet jette les bases de nombreux produits au sein de l'entreprise.

Le site Web principal de Go Bilingual était http://www.gobilingual.com.br/ , mais il est actuellement hors ligne car le produit n'existe plus. Vous pouvez toujours accéder au portail des enseignants ici : http://teachersportal.gobilingual.com.br/ . Merci d'avoir lu!