Seaquest : ma montée en compétence
Lors de ma seconde année en Technology and Business en spécialisation création et design digital chez Sophia Ynov Campus, j’ai été initié à plusieurs discipline dans ce domaine comme le motion design, le webdesign ainsi que le design d’interface et l’ergonomie. Ce dernier point a été marquant car lors d’un projet, j’ai rendu un prototype qui représentait l’une de mes passions : la voile. Pour contextualiser, notre intervenant nous a proposé un projet fil rouge sur quelque chose auquel nous étions attachés. Après avoir choisi notre thème, il a demandé à ce que nous designions un site web en réalisant une maquette correspondant à ce thème. Mon idée était de produire un annuaire avec des traversées de la Méditerranée en bateau à voile. Ce que je voulais faire ressortir à travers mon projet était la découverte, l’aventure et la liberté. Ces notions me semblaient essentielles pour transmettre ce que représente la navigation en mer pour moi : une invitation à sortir de sa zone de confort et à explorer l’inconnu. J’avais déjà quelques idées notées sur mon notion (image ci-dessous) avant de commencer le prototype tels que des descriptions détaillées de la traversée (possibilité de voir des animaux, d’avoir de superbes vues, etc…), développer les avis des clients pour suggérer des voyages et mettre une carte avec les points à ne pas rater (animaux, points de vues, activités, lieux).
Après avoir noté mes idées, j’ai commencé à faire l’arborescence de mon prototype. Il existe trois types de voyages possible. Certains utilisateurs veulent partir en autonomie pour naviguer, découvrir, se reposer. D’autres peuvent tout simplement prendre un voilier pour faire la fête entre amis lors d’une soirée. Et en dernier lieu, nous pouvons avoir des personnes passionnées par la navigation qui veulent découvrir la Méditerranée en navigant.
L’un des défis était de rendre chaque type de voyage attractif tout en restant fidèle à l’esprit de la voile et de l’exploration. Maintenant, il ne me restait plus qu’à trouver les couleurs et les typographies idéales pour l’identité de mon prototype. Un mélange de bleu océan et de orange pour symboliser le levé comme le couché de soleil ainsi que des polices représentant les valeurs de mes idées : l’aventure et la liberté. J’ai également fait le dégradé de couleurs de mon bleu pour avoir plus de choix et possibilité pour ma maquette.
Avec tous les éléments en main, j’ai donc commencé mon prototype sur Figma tout en apprenant à l’utiliser. Tout d’abord, j’ai configuré mes différents styles de couleurs (avec le dégradé) ainsi que les styles de polices. La création de la page d’accueil, qui nous plonge dans le monde de la mer Méditerranée dès le début, a permis de présenter les trois voyages possibles en expliquant leur intérêt. La page d’accueil devait captiver immédiatement l’utilisateur, le faisant rêver dès le premier coup d’œil et l’incitant à explorer davantage les possibilités offertes par le site. Par la suite, j’ai conçu les différentes pages pour chacun des styles de voyage, ce qui m’a conduit à découvrir les composants et leur utilisation pour dynamiser le prototype (changement de couleur au survol, slider ou retour en haut de page). Ensuite, toutes les pages des neuf voyages fictifs ont été réalisées, permettant de sélectionner une date et de réserver. Lors de cette réservation, une fenêtre modale apparaît avec trois étapes. Une fois le processus terminé, la fenêtre disparaît et l’utilisateur est redirigé vers la page d’accueil. Pour finir, j’ai développé une page compte regroupant les coups de cœur des traversées ainsi que les réservations effectuées. Le prototype, une fois lancé, est totalement fonctionnel, comme un site web. C’était l’aboutissement d’un projet riche en apprentissages, mêlant à la fois mes compétences techniques et ma passion pour la navigation. Si vous souhaitez naviguer jusqu’à mon projet, cliquez ici.
