bandeau_top.png
 

Client : BMCE Bank
Année : 2013
Rôle : Concept, webdesign
Agence : emagin 

Proposition de concept pour le projet BMCE Jeunes dans le cadre d'une consultation restreinte.

Mon ambition pour ce projet était de concevoir un espace jeune résolument moderne et créatif offrant à ses visiteurs une expérience d’utilisation dirigée, utile et engageante à travers une interface web claire et fonctionnelle adaptée aux codes de la cible et aux technologies d’aujourd’hui.

 
trait_edito.jpg
 

Concept

Les enjeux : offrir une interface utile et utilisable qui saura conjuguer les intentions commerciales de la banque aux besoins et aux attentes des utilisateurs en adoptant un language visuel adapté à la cible et répondant aux spécificitées ergonomiques de l’Internet d’aujourd’hui.

4 intentions essentielles ont orienté et guidé mes propositions :

 
 
concept1.png

1 - Un parcours utilisateur dirigé - Un accueil en 2 temps

Une home page composée de 2 parties distinctes : La première permet d'identifier, “séduire” et aiguiller l’utilisateuren fonction de son profil, son besoin ou de ses attentes.La seconde invite à la découverte en proposant un aperçu global de l'ensemble des familles d’accès du site.

 

concept2.png

2 - Un langage visuel adapté - Images, aérations et couleurs.

S'adresser aux jeunes impose l’utilisation d’un langage visuel particulier. Nous privilégierons ainsi des accès clairs, aérés et colorés, l’emploi d’une iconographie adéquate et l'utilisation de grandes images.

 

concept3.png

3 - Une navigation simple et intuitive - Un seul clic, tout les accès.

Quelque soit sa position dans le site, l’utilisateur a la possibilité à tout moment et en un seul clic d’afficher un menu complet le renseignant d’un coup d’oeil sur l’ensemble des accès disponibles sur le site.

 

concept4.png

4 - Un affichage “Responsive design" - une interface adaptée et adaptable.

Quelque soit l'appareil utilisé par le visiteur : ordinateur, tablette ou mobile, la grille d’affichage de l'interface s'organise pour proposer des contenus spécifiques à chaque écrans.

 

trait_edito.jpg
 

Intentions graphiques

Un parcours utilisateur dirigé - Un accueil en 2 temps

Premier temps : Identifier - Séduire - Aiguiller

L’écran d’accueil présente une interface épurée, lumineuse et colorée qui met en avant de façon claire et intuive les accès stratégiques et essentiels de l’Espace Jeunes. L’utilisateur découvre ainsi en premier lieu les différents produits bancaires adressés aux jeunes mais il peut également accéder rapidement à des contenus spécifiques établis en fonction de son profil ou de ses besoins. Le menu principal étant masqué à l’ouverture, l’utilisateur est donc dirigé et guidé intuitivement vers des contenus qui lui sont adaptés, renforçant ainsi son sentiment d’identification et l’impact des arguments commerciaux de la banque. 

 
1tps_interface.jpg
 
 

1 - Identifier

L’accès "Vous êtes" laisse apparaître, grâce à un déplacement latéral de l’interface, la liste des accès profilés. Le détail présente un argumentaire, des contenus adaptés ainsi que les produits et services relatifs aux profils.

 
1tps_detail1.png
 

2 - Séduire

Un diaporama central en plein écran présente des différents produits bancaires destinés aux jeunes. L’argumentaire est illustré par un grand visuel de situation. Des bullets de navigation permettent le défilement des différents produits.

 
1tps_detail2.png
 

3 - Aiguiller

L’accès "Vous souhaitez" laisse apparaître, également par déplacement latérale de l’interface, la liste des différents besoins identifiés de la cible. Le détail présente un argumentaire, des contenus adaptés ainsi que les produits et services liés au besoin.

 
1tps_detail3.png
box_recherche_avancee.png
ico_recherche_avancee.png

Recherche avancée

Le panneau de recherche avancée affiche, en plus de la recherche classique par mots clés, une liste préétablie de sections susceptibles d’intéresser le visiteur, participant ainsi également à l’aiguillage de l’utilisateur vers des contenus appropriés. 

 

trait_edito.jpg
 

Second temps : Découverte

L’utilisateur peut ensuite parcourir la suite de l’accueil en faisant défiler la page ou en cliquant sur le bouton en bas de l’interface. Se dévoile alors à lui un aperçu des principaux accès du site sous la forme d’une grande grille divisée en blocs de contenus.

 
bt_toute_votre_banque.png
1tps_end_accueil.jpg
trait_edito.jpg
 

Gabarits de pages

Une langage visuel adapté - images, aérations et couleurs

Nous détaillons à la suite 2 gabarits de pages de l’Espace Privé (utilisateur identifié) afin d’illustrer le comportement et la répartition des informations dans les pages intérieures.

 

Page Détail d'un accès profilé

(Espace Privé )

2tps_argumentaire1.png
trait_edito.jpg

Page Détail d'un produit bancaire

(Espace Privé )

2tps_argumentaire2.png
trait_edito.jpg

Principes de Navigation

Une navigation simple et intuitive - 1 clic, tous les accès.

 

Sur l'Espace Public

Sur l’espace public, quelque soit la position de l’utilisateur dans les pages, le bandeau de menu reste figé en haut de l’interface. L’ouverture du menu peut ainsi être activée à tout moment par l’intermédiaire du bouton à gauche du bandeau dévoilant alors en grand menu clair et aéré qui présente l’ensemble des accès du site.

 
2tps_princip_nav1.jpg
 

Sur l'Espace Privé

Sur l’Espace Privé, le menu principal en haut de page est remplacé par une barre verticale latérale, figée à gauche de l’interface. Elle regroupe 3 onglets rétractables qui proposent : le menu principal - le menu client - l’onglet de recherche avancée. Ces menus sont accessibles à tous moments et de tous endroits sur la page.

 
2tps_princip_nav2.jpg

Aperçus ouverts des onglets de menus de l’Espace Privé

2tps_ap_menus.png
trait_edito.jpg

Mobiles & tablettes

Un affichage “Responsive design" - une interface adaptée et adaptable.

Les dimensions mobiles et tactiles sont des aspects incontournables de l'Internet d'aujourd'hui, ils le sont d'autant plus lorsque l'on s'adresse à un public jeune. Concevoir un site en "Responsive Design” permet, grâce à une grille de découpage modulable, de pouvoir adapter l’interface et la navigation du site à tous les types d'écrans et de résolutions.

ico_display.png

Exemples d’affichages “responsive” pour BMCE JEUNES.

3_responsive1.jpg
principes_tablettes.png
principes_mobiles.png
3_responsive2.jpg