UI – Mozaik Design https://www.mozaik-design.com Graphic Designer Sun, 04 Oct 2020 17:38:15 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.0.6 https://www.mozaik-design.com/wp-content/uploads/2019/09/cropped-MOZ-LOGO-FAVICON-512x512-32x32.png UI – Mozaik Design https://www.mozaik-design.com 32 32 Aeschbach-UX-UI https://www.mozaik-design.com/portfolio/aeschbach-ux-ui/ Mon, 31 Aug 2020 19:46:14 +0000 https://www.mozaik-design.com/?post_type=portfolio&p=9152

AESCHBACH

Conception d’un terminal digital Instore
À propos

La société Aeschbach, spécialisé en chaussures et accessoires, est présente en Suisse Romande à travers une quinzaine de magasins, et via deux sites web. Pour information, cette étude de cas a servi de test à l’embauche pour un poste d’UX-UI Designer en interne.

Demande client
  • En pleine transformation digitale, Aeschbach souhaite créer une expérience davantage connectée avec ses clients
  • Permettre à l’acheteur en magasin de voir l’étendue des produits Aeschbach, et déclencher un achat e-commerce
Durée
  • 3 jours
Mon rôle
  • Analyse de la concurrence
  • Recherches sur la viabilité et la pertinence du dispositif
  • Scénarisation de la navigation via les Wireframe, prototypage sur Marvell, et Visual Design
Solution

Considérant que le résultat de ce genre de ce type dispositif est plutôt mitigé, j’ai préféré suggérer une solution parallèle :

  • Créer une interaction entre la borne digitale et le smartphone de l’utilisateur via son espace client (connexion ou création)
  • Lui donner la possibilité de mémoriser l’intention d’achat via ses favoris, et de valider sa commande par la suite
  • Créer de la relation client/vendeur

CONTEXTE

PROBLÉMATIQUE
Avec plus de 300 grandes marques de chaussures, sport, textile et accessoires présents sur la boutique en ligne aeschbach-chaussures.ch, les 15 magasins et lieux de vente de la marque ne peuvent pas proposer physiquement la totalité des articles disponibles.
Pour pallier ce manque, une solution technique a déjà été mise en place via l’infrastructure e-commerce permettant au personnel de vente de saisir des commandes Internet en magasin au moyen d’outils digitaux (tablettes et smartphones) et d’avoir ainsi accès à la totalité de l’assortiment. 
ANALYSE DU BESOIN INITIAL

Étant plutôt sceptique quant à la demande client initale, j’ai cherché à savoir quels étaient les résultats obtenus via genre de dispositifs. Or, à ce stade, les retours d’expérience sont plutôt médiocres. De nombreuses enseignes et marques se sont lancées dans de premières initiatives digitales qui n’ont finalement pas passé le cap de l’année de l’exploitation.

“Tout part d’un constat. L’observation de l’évolution des Points de Vente physiques témoigne du manque de succès des premières initiatives de lancement des dispositifs digitaux in store. D’une année sur l’autre, le “bouton d’appel vendeur” a disparu chez H&M NY, ou, quand on l’utilise chez Nike NY, on ne voit jamais arriver le vendeur... Les miroirs connectés, s’ils n’ont pas disparu (Ralph Lauren NY), restent à l’état de démonstration. Les écrans qui donnent accès aux sites internet, même en grand format, n’ont pas été utilisés...”
journaldunet.com

Ces semi-échecs s’expliquent pour de multiples raisons :

  • soit parce que ça ne fonctionne pas toujours techniquement,
  • soit parce que le client ne s’en sert pas,
  • soit parce que les équipes terrain s’en détournent…

On peut également en conclure que ces dispositifs n’ont pas été pensé pour servir une Expérience Client nouvelle génération. Ils n’ont pas été co-construits en partant du client, des besoins du collaborateur, et en associant tous les acteurs de l’architecture, de la technique, de la logistique, du terrain, de la communication … et des canaux digitaux.

BENCHMARKS

Par la suite, j’ai testé un certain nombre de sites concurents pour mieux cerner les difficultés que peuvent rencontrer les utilisateurs dans leur parcours de recherche produit. L’offre étant tentaculaire, la grande difficulté est de filtrer les références du mieux possible pour qu’elles correspondent idéalement aux besoins et désirs du client. Pour ce faire, la plupart des sites offrent de nombreuses possibilités de filtrage : taille, couleur, saison, marque… quitte à perdre l’utilisateur dans un dédale d’informations et d’options disponibles qui rende la pratique très fastidieuse. La charge cognitive est beaucoup trop forte en général. L’abondance d’options et de choix peut même décourager l’utilisateur, et l’amener à abandonner sa recherche initiale.

NAVIGATION
Hiérarchie de la navigation

1. FEMME, HOMME, ENFANT :
Catégories principales.
L’entrée principale se fait par le genre.

2. MARQUES, VÊTEMENTS & ACCESSOIRES, PROMOS :
Catégories et éléments de menus secondaires.
Puisque la spécialité est la vente de chaussures, je vais considérer que c’est ce que recherche par défaut et en priorité l’utilisateur. La marque reste la catégorie la plus importante après le genre.

3.NOUVEAUTÉS, COUP DE CŒUR, ETC.
Catégories tertiaires

Filtres

Il est important de limiter les options de filtrage pour ne pas surcharger l’attention de l’utilisateur.

On laissera donc en priorité :
– les types de chaussures (baskets, sandales…)
– la taille
– les coloris
– la collection/saison (printemps-été)

Via un filtre accordéon, l’utilisateur aura la possibilité d’afficher plus d’options si besoin :
– prix, talon, etc.

Un champ de recherche pourra éventuellement être inclus, mais selon moi, il faut éviter au maximum d’avoir à entrer du texte sur ce type de dispositif. Cela demande bien sûr à être vérifié. 

PARCOURS

WIREFRAMES

VISUAL DESIGN

PAGE CHAUSSURES

Les catégories de navigation sélectionnées ou par défaut (femme + chaussures) sont représentées par le bleu (#91C4D3).

FILTRE

Les filtres (animation fade ou popup) recouvrent les produits et laissent visibles les catégories principales afin d’avoir une vision globale et claire des options sélectionnées.

PAGE PRODUIT

Les boutons (CTA, taille…) sont initialement en noir et sont encadrés de bleu au survol et clic.

POPUP DE VALIDATION

Design sobre et minimaliste avec 3 CTA pour se concentrer sur les actions à effectuer.

INFOS PROCESS

Représentation par étape de la validation de la commande. L’utilisateur est invité à interagir avec la borne digitale pour se connecter et poursuivre son expérience.

La solution proposée est donc d’inviter l’utilisateur à poursuivre l’expérience sur son smartphone. De cette façon, plusieurs options s’offrent à lui :
– soit il possède déjà un compte et il peut valider son achat (lieux de livraisons pré-enregistrés, préférences de paiement, etc.)
– s’il laisse les produits dans le panier sans conclure l’achat, cela donne la possibilité lui adresser des mailings de relance dans le jours suivants
– le cas échéant, on l’invite à créer son compte
– ll peut aussi choisir de laisser les articles dans sa wishlist pour se laisser le temps de la réflexion

]]> Rumporter-UX-UI https://www.mozaik-design.com/portfolio/rumporter-ux-ui/ Fri, 28 Aug 2020 12:29:51 +0000 https://www.mozaik-design.com/?post_type=portfolio&p=9015

RUMPORTER

Le magazine de la culture Rhum
À propos

Destiné aux spécialistes, professionnels et amateurs, le magazine Rumporter couvre des dossiers de fond, met en avant des lieux et des marques en rapport avec la culture rhum ainsi que les hommes et les femmes qui font le rhum. C’est aussi un magazine reconnu pour ses commentaires gustatifs sur de nouveaux produits et pour ses conseils concernant les nouveaux lieux où déguster le rhum (ateliers de dégustation chez les cavistes, bars spécialisés…). 

Objectifs
  • Réaliser un site internet sur le modèle Freemium.
  • Mettre en place une architecture de l’information pertinente et fluide.
  • Permettre à notre client une gestion du contenu via un back-office.
  • Réviser l’organisation des contenus par rapport au magazine (voir arborescence du magazine ci-dessous), penser l’ergonomie.
  • Développer une base d’abonnés.
Mon rôle

Ce projet de fin d’études a été mené par une équipe de cinq personnes. J’ai d’abord travaillé sur l’analyse contextuelle (problématique, swot, benchmarks…). Nous avons adressé un questionnaire via les contacts clients (abonnés, professionnels…) et synthétisé les réponses afin de les intégrer au dossier de conception. J’ai ensuite recherché les cibles potentiels et scénariser les parcours utilisateurs. Une fois l’arborescence du site créée, des wireframes ont été définis pour analyser le zoning. En terme de design, j’ai défini la charte graphique du site (univers 60’s vintage : typos, pictos), et réaliser les maquettes des pages principales. 

CONTEXTE

LA PRESSE EN LIGNE

La presse est un secteur particulièrement impacté par l’émergence des nouvelles technologies. Depuis plus de 15 ans, les médias traditionnels font face à une transformation sans précédent. Certains ne réussissent pas à prendre ce virage digital et disparaissent, d’autres s’adaptent, s’appuient sur des technologies robustes et rencontrent de nouvelles audiences.

LE MARCHÉ DU RHUM
  • Le rhum est le seul spiritueux produit sur tous les continents et dans tous les océans ;
  • Le rhum a progressé de plus 40% en volume dans le monde en 10 ans, c’est donc la catégorie ayant connu la plus forte croissance entre 2000 et 2010 (vodka : +25%, Scotch whisky : +14%) ;
  • Le rhum est aujourd’hui le 3ème spiritueux le plus consommé en France (près de 40 millions de bouteilles par an, +33% entre 2002 et 2012).
  • Au cours des dix dernières années, plus d’une centaine de marques du monde entier ont envahi les étagères des cavistes et des bars à cocktails et s’apprêtent désormais à conquérir celles des supermarchés.

 

SWOT
BENCHMARKS
CIBLES
Cibles amateurs

Les amateurs passionnés
Les passionnés souhaitent avoir des informations assez larges sur le domaine du rhum, que ce soit à propos des marques, des produits, des procédés d’élaboration du rhum ou encore de l’histoire.

Les curieux et les gastronomes
La tendance actuelle est aux émissions dédiées à la cuisine. Nous avons identifié une rubrique à fort potentiel qui pourrait attirer de nouveaux utilisateurs, la gastronomie autour du rhum.

Cibles professionnels

Les cavistes (prescripteurs)
Ils sont de véritables leaders d’opinions, ils conseillent leurs clients dans le but de leur vendre le produit correspondant le plus à leurs attentes. Mais ils ont également un pouvoir de recommandation auprès d’un certain nombre de consommateurs très utile dans le cas de nouveaux produits.

Les barmen
Les barmen sont créatifs, ils subliment un “produit brut”. Ils peuvent être à l’origine des nouvelles tendances de par leurs recettes de cocktails mais également faire la promotion de nouveaux produits. Nombreux sont ceux qui alimentent des blogs / pages Facebook et peuvent être de véritables porte-voix pour Rumporter.

FORMALISATION

WIREFRAMES
PARCOURS UTILISATEUR

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

VISUAL DESIGN

]]> Green-Tribe-UX-UI https://www.mozaik-design.com/portfolio/green-tribe-ux-ui/ Tue, 18 Aug 2020 10:55:18 +0000 https://www.mozaik-design.com/?post_type=portfolio&p=8872

GREEN TRIBE

L’écologie, une préoccupation mondiale et fédératrice
À propos

Green Tribe est projet UX/UI de refonte en version mobile d’un site existant green-raid.fr. Initialement, ce site collaboratif a pour vocation de répertorier les acteurs éco-responsable et solidaires partout en France : produits bio (AMAP, producteurs…), services ou activités (jardins partagés, FabLabs, réparation vélo…).

Objectifs
  • Développer et valoriser les commerces de proximité éco-responsables de la ville de Paris.
  • Activer une communauté de quartier en incitant les utilisateurs à adopter des gestes éco-citoyens.
  • Promouvoir les actions «vertes» mises en place par la ville de Paris.
Mon rôle

Nous étions cinq à conduire ce projet ; les rôles n’étant pas strictement assignés, nous avons pu tour à tour nous impliquer chacun dans les étapes qui nous tenaient à cœur. En terme d’UX, j’ai donc travaillé sur l’analyse contextuelle (problématique, swot, benchmarks…), mis en place un questionnaire en ligne et synthétisé les réponses, recherché les cibles potentiels incluant les scénarios de parcours, élaboré une stratégie de communication, structuré l’arborescence du site et formalisé son apparence via les wireframes. En terme de design, j’ai ensuite effectué une refonte du logo, défini la charte graphique du site (typos, univers coloriel, pictos), et réaliser les maquettes des différentes pages avant de réaliser le prototypage interactif sur Marvell. Tout au long de ce process, j’ai également mis en page le dossier de conception.

DESIGN THINKING

CONTEXTE

SWOT
BENCHMARKS

Après analyse de ces sites ayant pour objectif de démocratiser l’action éco-citoyenne, on peut en conclure les éléments suivants :
– L’accent est mis sur la pédagogie 
– Le citoyen est invité à s’engager ; placé au cœur de l’action afin de décomplexer le public et de motiver le passage à l’acte de tous

Mais ces plateformes sont souvent réservées à une niche. Soit des écolo-convaincus, soit des consommateurs bio, éventuellement des citoyens en recherche de partage, d’échange mais pas forcément dans une optique éco-citoyenne. Rarement les trois.

CIBLES
Cibles primaires

Le consommateur connecté
À la recherche d’un produit bio, éco-responsable ou d’un service de développement durable :
– Les familles
– Les jeunes
– Les séniors
– Les bobos
– Les sportifs
– Les végétariens & végans

Le citoyen engagé
Désireux de s’investir dans la vie de son quartier, force de proposition et moteur du site :
– Les militants
– Les écolos

Les commerçants et associations
En recherche de plus de visibilité :
– Bars et restaurants
– Commerces de bouche
– Chaines de distribution
– Les associations civiles
– Les associations commerciales

Cibles secondaires

Les élus
– Maires d’arrondissement
– Responsables de la communication
– Responsables de la petite-enfance
– Responsables du développement durable

Les prescripteurs
– Les blogueurs
– Les personnalités connues pour leur engagement

Les leaders d’opinion
– Presse
– Radio

Les préconisateurs
– Médias spécialisés sur l’écologie

«

PARCOURS

WIREFRAMES
PARCOURS UTILISATEUR

Stéphanie est à la recherche d’un maraîcher bio près de son travail.
Après avoir consulté Google, elle découvre green-tribe.fr où sont recensés de nombreux commerces bio.

VISUAL DESIGN

LOGO

Le « G » de Green Tribe est apposé à un cercle vert posé sur une pointe.
Cette forme a un double signifiant. Elle évoque à la fois : 
– un indicateur de position, repère sur le plan,
– une bulle de parole, symbole d’échange au sein de la communauté.

COLOR SCHEME
TYPOGRAPHIE
SITE VERSION MOBILE
COMMUNICATION

Pour palier au manque de notoriété du site, nous avons imaginé une stratégie de communication avec un plan de lancement basé sur le teasing et la viralité. Avec comme slogan ambigu « Découvrez votre Point G ! » , un premier scénario a été conçu basé sur le concept de la mini série « Bref » faisant figurer Lucienne Moreau et Kyan Kohmandji.

STYLEGUIDE

L’identité visuelle a fait l’objet d’une refonte complète.
]]> Old Fashioned Week https://www.mozaik-design.com/portfolio/old-fashioned-week/ Sun, 14 Jun 2020 10:31:03 +0000 https://www.mozaik-design.com/?post_type=portfolio&p=8322
IDENTITÉ VISUELLE

Old Fashioned Week

La Old Fashioned Week est un festival qui fait la part belle au cocktail préféré des amateurs de spiritueux et à la créativité des bartendeet événement fait référence au « Old Fashioned », un cocktail iconique à base d’alcool, de sucre, de bitter et d’eau.

  • Création logo, affiche, dossier de presse et webdesign de l’application.
Client

Old Fashioned Week

Project Date

Juin 2018

Category

Identité visuelle · Logo · Mobile · UI

Share This

]]> Garuda Holiday https://www.mozaik-design.com/portfolio/garuda-holiday/ Sat, 29 Jul 2017 19:33:19 +0000 http://brandexponents.com/oshin/v30/?post_type=portfolio&p=33
BROCHURE CIRCUITS PRIVATIF
BROCHURE CIRCUITS GROUPE
BROCHURE HOTELS
FLYER A4

Garuda Holiday

Garuda Indonesia Holiday France est un tour-opérateur spécialiste de l’Indonésie.

Depuis 2012, Mozaik les accompagne afin de concevoir les outils de communication valorisant la promotion de leurs offres de circuits et services.

  • Maquette annuel des brochures circuits individuels et groupes.
  • Création de fiche tarifaire, plaquette Hôtels et BtoB, kakemono, flyer…
  • Création de cartes Indonésie, Bali.
Client

Garuda Holiday

Project Date

Depuis 2012

Category

Brochures · Identité visuelle · UI

Share This

Voir sur ISSUU
]]>