Case study

Refonte de l’identité et de l’interface mobile

Chap’nGo est une application gratuite permettant d’échanger ses bonnes adresses entre amis en évitant les nombreux faux avis. Du médecin au concept store, en passant par les restaurants, avocats, pédiatres… Le partage et les recommandations se font en toute confiance et en toute confidentialité.

Objectif

Actualiser les codes graphiques et intégrer de nouvelles fonctionnalités à l’application existante.

L'approche Yumans

Adapter les codes graphiques à la proposition de valeur

Capitaliser sur l’historique de la marque

Améliorer la hiérarchisation du contenu et des fonctionnalités

Créer une direction artistique cohérente

Etape 1

Repenser les codes couleurs

La couleur est le pilier de l’identité de marque. Le branding existant s’appuyait sur une couleur unique : un vert d’eau lumineux. Son ultra présence avait tendance à créer certains effets de bord non négligeables comme des problèmes de lisibilité, d’accessibilité et d’affordance. Afin de palier à ces différents problèmes, tout en capitalisant sur cette couleur iconique, nous avons créé une nouvelle palette intégrant une nouvelle couleur primaire très contrastée (un bleu nuit). Nous avons également mis en place un nuancier de gris pour améliorer la hiérarchisation des textes ainsi qu’une nouvelle gamme de couleurs pour tous les éléments de l’interface.

Etape 2

Harmoniser l’iconographie

L’iconographie joue un rôle important dans l’application. Notamment afin d’identifier rapidement les réactions des utilisateurs aux différentes adresses et de représenter la nature de ces dernières (restaurant, hôtel, …). Une attention particulière a été portée sur la lisibilité lors du choix de la librairie utilisée. Le traitement actuel des icônes en « outline » était peu adapté pour représenter des points d’intérêts sur une carte mobile. Ces nouvelles icônes proviennent de la librairie Google Material, au design universel. Les réactions ont été quand à elle entièrement redessinées et associées à des codes couleurs afin d’en améliorer leur personnalité et leur identification.

Etape 3

Définir une nouvelle interface

Cette refonte avait pour but d’apporter de la clarté et de la lisibilité. Mettre en place une nouvelle hiérarchisation du contenu a été une étape importante du processus, notamment par une mise en avant du contenu principal. Une part plus belle a été donnée aux visuels et un retravail des espaces et des respirations a été réalisé. La carte et les fiches (contacts et adresses) ont été totalement repensées. Le redesign a aussi été l’opportunité d’ajouter de nouvelles fonctionnalités avec l’accentuation de la dimension sociale (like, commentaire). La navigation a aussi dû être fluidifiée pour une meilleure hiérarchisation entre les fonctionnalités principales et secondaires.

Avant / Après