Ublooo

Refonte du design et de l’ergonomie d’une application de carnets de voyages

Type
Web App
Devices
Tablet - Desktop
Release
2019
Company
Ublooo
Roles
  • UX
  • User story
  • Sketching
  • Interaction design
  • Visual Design
  • Frontend development
Tools
  • AdobeXD
  • HTML5
  • SASS
  • JQuery

Le contexte

Ublooo est une application web permettant de créer ses propres carnets de voyages comme de trouver l'inspiration en consultant les itinéraires des autres contributeurs. Le site permet aussi d'obtenir directement un devis auprès de spécialistes.
Après quelques missions d’intégration de nouvelles fonctionnalités, notamment sur l’interfaces mobile responsive, la mission d’une refonte importante au niveau design et ergonomie m’est confiée. La validation des prototypes sera suivie de la réalisation du chantier front.

Homepage - à gauche "avant", à droite "après"

Le diagnostic

Pour améliorer l'expérience utilisateur, les deux intentions majeures sont d’une part d’épurer le layout, faciliter la navigation en améliorant la prise en main des outils, et, d’autre part de faire la part belle aux images en habillant le site avec une sélection des plus meilleures photographies des carnets.
Le changement de structure sera répercuté sur l’ensembles des pages qui seront à harmoniser sur la base de ce nouveau design. Seuls quelques sections et composants transverses ne subiront pas d’évolutions.

Login - à gauche "avant", à droite "après"

Répondre à l’ensemble des demandes implique de :

  • Simplifier les call to action de la homepage
  • Ne plus perdre le contexte lors d’une inscription / connexion
  • Améliorer le parcours de création d’un carnet en rendant l’action plus accessible
  • Revoir le menu général et la navigation dans les pages institutionnelles
  • Concevoir de manière générale des effets de transitions et micro interactions afin qu’elles apportent du sens à la navigation
Dashboard - à gauche "avant", à droite "après" (contributeur & user)

Déroulement des opérations

Après avoir circonscrit le périmètre du chantier au travers d’un document rédigé et ajusté en collaboration avec le client. Les potentiels points de difficultés y sont anticipés, les objectifs fixés, et les limites établies.
La phase de design commence, ponctuée de micro réunions afin de valider ou ré-ajuster la progression à chaque itération. Le prototypage interactif permet au client d'apprécier précisément la mesure des transformations et peut se projeter sans risque sur le rendu final.

Page Inspiration - à gauche "avant", à droite "après"

Une fois le design validé, la partie développement front démarre en conservant le même rythme de supervision afin de pouvoir palier à toute difficulté inattendue.
L’avantage pour moi est de connaître à l’avance quels sont les aspects du design que j’ai conçu qui nécessitent quelques délicatesses techniques.

Back to projects