Stage · UX & web design

Stage UX chez eNotes

Pendant mon stage chez eNotes, une plateforme d'aide aux études basée à Seattle, j'ai repensé quatre pages du site : le paywall, À propos, FAQ et Contact.

Client
eNotes
Quand
Hiver 2019
Rôle
Stagiaire en design graphique
Périmètre
Illustration, photo, wireframes
La page équipe d'eNotes repensée, sur un iPad

Le brief

eNotes aide les élèves en littérature depuis 1998, et son site commençait à dater. Ma mission était de le rendre plus frais et plus moderne tout en restant fidèle à la marque, légère et ludique mais toujours élégante.

01

Le Golden Square (paywall)

Illustration

Le Golden Square, c'est ce que voient les lecteurs lorsqu'ils arrivent sur un contenu premium : une invitation à démarrer un essai gratuit. On m'a demandé de le recréer, en commençant par une nouvelle illustration.

Après la première critique, je me suis rapprochée du style maison créé par l'illustratrice Yumi. Un dessin plus simple, plus esquissé, fonctionne mieux sur les petits écrans mobiles tout en restant parlant.

Recherches de palette et deux versions d'une illustration d'étudiant devant un ordinateur
Premier jet : recherches de palette et d'illustration.
Illustration esquissée d'un visage avec une bulle contenant un livre
Après critique : un trait plus libre, plus proche du style eNotes.
Wireframes du paywall dans Adobe XD, pour desktop et mobile
Les wireframes finaux remis à ma directrice : l'illustration à différentes tailles et positions, sur desktop et mobile. C'était mon premier projet, et c'est ainsi que j'ai appris l'esprit de la marque.

02

Page À propos

Le point de départ

La page d'origine présentait de petites photos rondes sous un épais bandeau bleu qui faisait corporate et daté.

J'ai rendu les photos carrées tout en les gardant petites, pour que la page reste compacte. J'ai renforcé la hiérarchie et supprimé le bandeau pour une page plus ouverte et plus moderne.

La page À propos d'origine d'eNotes, avec des photos rondes des stagiaires
La page d'origine.
Premières recherches de mise en page pour la page À propos dans Adobe XD
Premières recherches, inspirées d'autres entreprises et de blogs. Elles utilisaient des photos provisoires en attendant le nouveau shooting de l'équipe.

Le shooting

En deux semaines, nous avons pris des centaines de portraits. L'objectif : des photos nettes et claires, avec une lumière naturelle douce et chaleureuse.

eNotes étant une entreprise littéraire, chaque personne a posé avec son livre préféré. Une simple série de portraits est ainsi devenue une histoire sur l'équipe.

Planche contact de portraits de l'équipe, chacun avec son livre préféré
Wireframe final de la page À propos dans Adobe XD
Le wireframe final guide le regard en douceur jusqu'en bas de la page, sans surcharge.
Tasse de café, plante et livre ouvert sur un rebord de fenêtre
L'une de mes photos lifestyle. J'ai aussi photographié les bureaux, le quartier de Capitol Hill, et des mises en scène avec les plantes et les livres de mes collègues.

03

Page FAQ

Des sections dépliables

C'était l'un de mes derniers projets, j'avais donc plus de liberté créative. J'ai repris le style épuré de la nouvelle page À propos et transformé de longues listes de questions peu pratiques en sections dépliables. On parcourt les thèmes et on n'ouvre que ce dont on a besoin.

Wireframes de la page FAQ, sections repliées et dépliées
États replié et déplié.

04

Page Contact

Rester simple

Une personne qui contacte le support est souvent déjà un peu agacée. J'ai donc gardé cette page minimale, avec un formulaire court, l'adresse, l'e-mail et les questions les plus fréquentes juste à côté.

Une illustration abstraite et apaisante de Yumi sert de visuel provisoire.

Maquette de la page Contact avec formulaire, illustration et questions fréquentes

Ce que j'en retiens

Ce stage m'a appris à concevoir au sein d'une marque existante, à recevoir des critiques et à adapter mon style d'illustration.

Projet suivant Refonte Badoo →