Portfolio | Bastien ROBERT

Nexalt

Plateforme de recherche d’alternance

Dans le cadre de « My Digital Project » au sein de notre école, nous avons proposé, avec Lilian BEILLARD, un projet que nous allions par la suite réaliser avec différentes personnes au sein de toutes les promos de 3ème année de l’école c’est à dire : les E-Business, les WebMarketing, les Développeurs et les WebDesign.

 

Après plusieurs heures de répartition des équipes, l’équipe Nexalt était née !

 

Composée de Sandy MARTIN (E-Business), Naomi GREGOIRE (WebMarketing), David DOGNIN (Développeur) ainsi que Lilian et moi (WebDesign) les porteurs de projets, notre équipe de choc était prête à révolutionner la recherche d’alternance.

 

Nous nous sommes alors vus tous les jeudis pendant les cours pour travailler sur le projet durant 6 mois, mais avons également travaillé de chez nous pour faire avancer le projet. La finalité étant une soutenance d’une heure avec 35-40 minutes de présentation puis 20 minutes de questions.

Date

janvier, 2022

Rôle

UI / UX Designer, Graphiste, Motion Designer

Outils

Adobe Illustrator, Adobe XD, Adobe Photoshop

équipe

Lilian BEILLARD, Sandy MARTIN, Naomi GREGOIRE et David DOGNIN

Le projet

L’idée initiale poussée par Lilian et moi était de s’inspirer des plateformes freelance très connues telles que Malt ou la Crème de la crème et de le transposer à la recherche d’alternance.

Le principe est simple, un étudiant en recherche d’alternance remplis son profil Nexalt avec toutes les informations nécessaires et qui pourraient séduire un employeur comme ses compétences, ses formations ou encore ses dernières expériences.

Par la suite, les entreprises en recherche d’alternants viennent sur notre site et peuvent utiliser notre puissante barre de recherche afin de trouver le profil qui leur correspond le mieux parmi des centaines de profils étudiants. Une fois la « perle rare » trouvée, l’employeur peut envoyer un message à l’étudiant et convenir d’un entretien.

Pour éviter les profils inactifs ou ayant trouvé une alternance entre temps, le site demande aux étudiants de confirmer toutes les semaines qu’ils sont toujours à la recherche d’une alternance afin d’être référencé par le site.

Les objectifs étaient de créer une maquette complète de la solution accompagné de son site,  l’identité de Nexalt, une analyse marketing et des contenus pour les réseaux sociaux.

L'identité graphique

Au niveau de l’identité graphique, j’ai eu l’occasion de créer le logo. Au début, nous ne trouvions pas de nom pour la plateforme puis j’ai eu l’idée d’un nom combinant « nexus » qui signifie lien/liaison en anglais, car le but est de mettre en relation les employeurs et les alternants, et « alt » du mot alternance qui donne « Nexalt ». En plus de la fusion des deux mots, le « nex » de Nexalt fait aussi penser au mot « next » en anglais qui signifie suivant ou prochain qui appuye l’idée que Nexalt permet de chercher une future alternance.

Le logo sur la droite représente donc cette « prochaine alternance » avec la flèche pointant vers le « alt ». Le « e » représente un coquillage avec sa perle à l’intérieur pour revenir à notre slogan qui est « Trouvez votre perle rare« , c’est-à-dire les étudiants sur notre plateforme. La version couleur reprend les deux couleurs de notre charte graphique qui sont un violet-bleu et un violet plus foncé.

J’ai choisi avec Lilian ces couleurs, car nous voulions avoir une touche de bleu qui est associée à la confiance primordiale pour ce genre de plateforme. Mais aussi, le violet qui est une couleur connue pour apaiser les tensions et qui stimule la créativité comme celle de nos profils étudiants.

En termes de police, nous avons choisi Graphie pour le logo et Poppins pour tous les textes du site. Graphie nous a séduite par ses contours et bords arrondis qui correspondaient bien à ce que nous voulions pour Nexalt. Pour Poppins, c’est une police d’écriture très lisible et qui reprenait aussi ces courbes en plus d’avoir un nombre de graisses différentes satisfaisant et c’est donc pour cela que nous l’avons choisie.

Le maquettage 1/2

J’ai été chargé de faire le maquettage du site dans sa globalité, accompagné de Lilian. Voir la maquette ici. Pour le design du maquettage, je suis resté fidèle à l’identité graphique avec les couleurs et les bords arrondis sans pour autant tomber dans la facilité du bouton « pilule » entièrement arrondi.

Pour la page d’accueil, le zoning s’est fait assez rapidement, l’objectif premier était de mettre en avant la barre de recherche et d’inciter l’utilisateur, employeur ou étudiant, à essayer le site et le tenter pour s’inscrire et/ou poster son profil. Aussi, cela permettait de comprendre en un titre et une petite description l’utilité de la plateforme.

Par la suite, on retrouve une liste de points forts et quelques logos d’entreprises « partenaires » de la plateforme pour mettre en confiance les internautes. Pour continuer le déroulement de la page, la prochaine section explique en quelques points le fonctionnement de la plateforme et incite à revenir à la recherche avec un CTA (Call To Action). Et enfin, on a une section sur les différentes offres et tarifs de la plateforme, quelques points finaux pour convaincre les personnes sceptiques puis nos réseaux sociaux.

Lorsque l’utilisateur est connecté, j’ai eu l’idée de mettre en place un menu latéral afin d’accéder facilement à toutes les sections du site. Un tableau de bord avec des statistiques, la messagerie, le profil afin de le modifier si besoin, la page « favoris » si la personne a aimé certains profils ainsi que des paramètres. On peut aussi directement se déconnecter, accéder aux ressources d’aide de Nexalt ou encore de contacter le support en un clic.

Le maquettage 2/2

Sur le header, les boutons « Connexion » et « Inscription » restent toujours affichés tant que l’utilisateur n’est pas connecté. Les deux boutons sont disponibles pour éviter un clic supplémentaire si l’utilisateur est déjà inscrit ou vice-versa.

Par ailleurs, les pages « Connexion » et « Inscription », sont conçues de manière à ce que l’utilisateur n’ait pas de point de fuite et finalise l’action de s’inscrire ou de se connecter. Elles arborent un style différent des autres sans header ni footer et prennent toute la taille d’écran de l’utilisateur. Un bouton pour changer de formulaire est disponible au cas où l’utilisateur se serait trompé de bouton. Le formulaire est assez basique mais comprend les API pour Google et Facebook afin de s’inscrire ou de se connecter de façon plus rapide et plus simple.

L’inscription est accompagnée d’une barre de progression, car elle se fait en plusieurs parties, ceci permet de ne pas lasser l’utilisateur avec des dizaines de champs différents sur la même page. Elle facilite notamment sur les étapes suivantes lorsque l’on demande si l’utilisateur est un employeur ou un étudiant en permettant de poser les questions en fonction du profil choisi.

Pour conclure, la page « Qui sommes-nous » est beaucoup mise en avant pour, une fois encore, rassurer l’utilisateur et leur expliquer notre légitimité dans ce domaine.

Conclusion

Pour conclure, en motion design, nous avons réalisé avec Lilian, une vidéo professionnelle d’une minute afin de présenter le site ainsi que son fonctionnement.

La vidéo s’adresse aussi bien, aux employeurs qu’aux étudiants. Nous avons réalisé un storyboard et un scénario sur Figma avant de faire la vidéo sur AfterEffects avec les maquettes réalisées.

Bon visionnage ! Les maquettes mobile et desktop de Nexalt sont accessibles via le lien ci-dessous.

Voir le prototype