Le contexte
Boursorama avait besoin de refondre entièrement son portail pour faire coexister ses nouveaux produits : banque, assurance, bourse, actualité.
(En bref)
Boursorama — Refonte du portail
Beaucoup de contenus, de la publicité, une communauté : tout faire tenir sur une page.
Mon rôle
Au sein de l’équipe design, j’étais en charge d’animer les ateliers UX, de créer les zonings et les wireframes, puis de mettre en place le nouveau design system et les maquettes UI.
La solution
Créer un environnement global au sein duquel peuvent exister plusieurs sous-sites : Actualité, Bourse, Finances, etc.
Du croquis à l’écran
(01) Process
Trois étapes, gardées dans mes fichiers : les zonings dessinés à la main, les wireframes détaillés, puis l’interface finale.
Étape 01
Croquis
Plusieurs zonings explorés à la main : ordre des blocs, place du dossier spécial, de la publicité et du forum. Sur le papier, déjà une règle : « si pas de dossier spécial », l’emplacement revient à l’actualité.
Étape 02
Wireframes
Le zoning détaillé fixe chaque format : bannière 1000×90, publicités natives dans les listes, mise en avant banque ou dossier spécial, rubriques « Les plus lus cette semaine », vidéos Ecorama et forum.
Trois choix
(02) Design — Décisions
Choix 01
Un emplacement, deux usages
À droite de « À la une », un même bloc accueille soit une mise en avant de la banque, soit un dossier spécial. Sans dossier, il redevient une actualité.
Choix 02
La publicité dans le flux
Les publicités natives prennent la forme des articles, avec une mention claire (« Native Ad », « Proposé par… ») pour que le lecteur sache ce qu’il regarde.
Choix 03
La vidéo et la communauté en fin de page
Un lecteur vidéo sur fond sombre avec un carrousel, puis les derniers messages du forum et les membres les plus actifs.
L’UI finale
(03) Design & delivery — UI
Une fois la structure validée, j’ai conçu l’interface haute fidélité, en m’appuyant sur le nouveau design system.