UX UI site web e-commerce Maynooth Furniture

Création ⋯ Site web Stratégie  Recherche utilisateurs Personas Arborescence UI UX Writing

Mayooth-furniture-hero-design

Maynooth Furniture

Maynooth Furniture est une nouvelle entreprise qui vend des meubles et de la décoration de luxe aux prix accessibles.

Aperçu du projet

Le problème

Maynooth Furniture est un client fictif, qui souhaite trouver une identité de marque pour attirer les clients a la recherche des meubles et de la décoration de luxe. De plus, Maynooth Furniture a besoin d’un site web e-commerce pour vendre ces collections.

La solution

J’ai proposé une identité de marque par rapport suite a une analyse de competiteurs. De plus, j’ai proposé un parcours UX UI pour la creation du site e-commerce.

Client

Maynooth Furniture
B2C

Secteur

e-commerce, retail

Rôles

UX/UI Designer

Durée

2 semaines

maynooth furniture mobile UI
maynooth furniture mobile UI
maynooth furniture mobile UI
maynooth furniture mobile UI

Mon Processus

Processus design thinking des sites web / carmen-laura design

Cette page en actuellement en refonte. Pour lire la suite du case study (en anglais), veuillez cliquer ici.

Empathie

Recherche

Étude de marché

Pour en savoir plus sur les tendances du marché des centres d’hebergement, j’ai commencé par regarder des sites web déjà existants sur le web. Grâce à ces études de marché, j’ai pu acquérir une compréhension plus approfondie et ainsi combler mes lacunes pour mieux éclairer mes décisions de conception à l’avenir.

Par exemple, j’ai rencontré une difficulté en trouvant des concurrents concernés, car je trouvais plutôt des « Centres d’Hébergement et de Réinsertion Sociale (CHRS) ». Ces hébergements ont généralement des fiches descriptives et non des sites web. De plus, le public des CHRS est différent ( personnes en difficultés voulant retrouver leur autonomie personnelle et sociale). Les besoins du persona de Temps Jeunes sont orientés vers les loisirs.

Analyse concurrentielle

J’ai fait une analyse SWOT des principaux concurrents des centres de Temps Jeunes afin de mieux comprendre le marché, ainsi que leurs points forts et faiblesses. En analysant les concurrents indiqués par la Direction, je me suis aperçue qu’ils avaient un autre fonctionnement : soit un système de réservation en ligne soit une page pour leur hébergement sur le site principal de l’organisation (et non pas un site web dédié).

Cette analyse m’a aidé à anticiper les opportunités et challenges pour les futurs sites web des centres de Temps Jeunes. L’opportunité principale pour Temps Jeunes était la plus-value apportée en ayant des sites dédiés aux centres d’hébergements, surtout adressés aux groupes.
Pour des raisons de confidentialité, ces informations ne seront pas publiées.

Interviews avec les parties prenantes

Pour avoir une meilleure compréhension du projet et des attentes de l’équipe, j’ai réalisé plusieurs interviews avec la direction, la directrice commerciale et la responsable de communication marketing. A la suite des entretiens, il paraissait évident qu’il n’y avait pas un souhait de gestion de calendrier avec un système de réservation en ligne, mais plutôt le besoin d’un formulaire de contact détaillé.

Objectifs des sites web

Grâce aux interviews avec les parties prenantes, les objectifs de l’organisation des site web étaient définis :

    1. Présenter le patrimoine Temps Jeunes afin de faciliter le référencement naturel et la commercialisation des centres permanents.
    2. Présenter les environnements, les activités et les évènements autour des centres de manière professionnelle pour attirer la clientèle.
    3. Présenter les services offerts par Temps Jeunes d’une manière attirante, complète et intuitive.
    4. Proposer un système de réservation en ligne.
    5. Encourager le contact et les réservations en ligne pour les centres de façon mode optimale, rapide et intuitive.

Persona

persona de groupes - temps jeunes / carmen laura design

Identifier les cibles

J’ai été responsable de la définition du persona, à travers des recherches qualitatives.

Dans cette étude de cas, nous avons convenu de recruter 8 utilisateurs correspondant à cette cible de Temps Jeunes. Le but était de définir les besoins du persona.

Les résultats de cette recherche ont permis de créer les personas, leurs parcours et flux utilisateurs  ainsi que l’arborescence du site web.

Critères de recrutement

Personne 30-50 ans, résidant en France

Profil : Chargé.e de réservations de groupes de club sportif, MJC, centre social, organisateurs de sorties enfants, adolescents ou adultes, associations, individuels gires (groupe d’individuels regroupés)

Définition & Idéation

Opportunités suite à la recherche utilisateurs

J’ai découvert plusieurs opportunités concernant le contenu et le référencement de ces sites, ainsi que pour la structure générale des sites web.

De plus, les entretiens ont permis de confirmer que la meilleure solution était de présenter les centres sous la forme d’un site web one page :

    • Le besoin d’un site vitrine pour présenter chaque centre d’hébergement de Temps Jeunes et ses services
    • Tout le contenu est chargé en une seule fois, facilitant le storytelling
    • Il est souvent plus agréable de scroller une page plutôt que de multiplier les clics sur des liens
    • Malgré les inconvénients concernant le référencement naturel des sites one page, les sites web sont référencés sur des plateformes B2B spécialisées groupes (e.g. www.gitedegroupe.fr) ou par des agences de tourismes locales (e.g. sites de mairies) ainsi qu’à à travers des articles de blog.

Architecture de l’information

J’avais une idée de l’architecture du site, cependant, je voulais mieux comprendre comment Nathalie interagirait avec les principales informations du site.

J’ai d’abord commencé par identifier les informations clés que l’utilisateur essaierait de trouver sur le site en fonction de ses objectifs. Ensuite, j’ai inclus ces informations dans un storytelling pour captiver et retenir l’attention de l’utilisateur.

architecture de l'information et userflow des sites web centres Temps Jeunes / carmen laura design

Wireframes LoFi Papier & Crayon

En utilisant ma compréhension de l’utilisateur, des objectifs, de l’architecture et de l’interaction de l’utilisateur avec les sites web, j’ai pris des décisions éclairées sur la façon de concevoir les sites web en esquissant des wireframes basse fidélité.
Je me suis orientée sur une approche mobile-first, pour assurer un design responsive et adapté au mobile.

Prototypage & Test

Wireframes Mi-Fidelité

Après avoir esquissé mes idées, je voulais de tester mes décisions. Mon objectif était de rendre la structure et la narration intuitives pour les utilisateurs. Je voulais m’assurer que le design était fonctionnel avant de passer au design visuel. Ma solution consistait à créer un prototype de fidélité moyenne et à tester la conception sur de vrais utilisateurs avant d’intégrer la conception de l’interface utilisateur et d’effectuer des révisions prioritaires.

UI Design

J’étais responsable du design UI et des choix graphiques pour ces sites.  De plus, j’ai assuré la direction artistique : sélection des photos et vidéos, édition, demande de droits d’utilisation des images au parties externes. J’ai également créé des illustrations et j’ai fait l’UX writing.

KIT UI des centres d'hebergement Temps Jeunes / Carmen-Laura Design

Logo

Temps Jeunes avait déjà plusieurs déclinaisons de logo avec les couleurs de sa charte graphique existante. Ainsi, pour montrer l’appartenance des centres à Temps Jeunes, J’ai choisi d’utiliser le même logo dans une couleur secondaire de Temps Jeunes : le bleu.

Typographie & Boutons

Concernant la typographie, de nouvelles polices ont été choisies pour les sites web, tout en vérifiant une bonne harmonie des polices.

Couleurs

Concernant les couleurs du kit UI, le bleu et l’orange du logo étaient des couleurs préexistantes dans la charte graphique de Temps Jeunes. Pour distinguer les centres, j’ai choisi des déclinaisons de bleu et j’ai gardé l’orange. J’ai également proposé un dégradé des couleurs (bleu et orange), qui avait été fortement apprécié par l’équipe.

J’ai choisi ces couleurs car les teintes de bleu induisent le calme, l’authenticité et le professionnalisme, et l’orange signifie le bonheur et l’aventure.

Pour l’accessibilité et le référencement du site web, j’ai testé les couleurs à l’aide de WebAim.

Iconographie

En ce qui concerne l’iconographie, les icônes présentées dans le kit UI faisaient partie de la charte graphique existante de Temps Jeunes. J’ai créé le reste des icônes présentes sur le site.
J’ai également adapté la carte de la France préexistante dans la charte graphique de Temps Jeunes aux nouvelles couleurs des centres.

Photos & Videos

Pour les photos, Temps Jeunes avait déjà une grande base de photos des centres qui a pu être exploitée pour leur présentation. Celles-ci ont nécessité un travail supplémentaire : retouche photo et optimisation pour le web pour toutes les photos présentes sur les sites. De plus, pour certains centres, j’ai contacté leur responsable afin d’obtenir de nouvelles photos en style « grand angle ».

Pour les images et les vidéos des environnements, des activités et des évènements, j’ai contacté chaque office de tourisme pour demander des photos et des droits d’utilisation d’image.

Maquette haute-fidelité

J’ai créé le prototype web final en utilisant mes wireframes mi-fidélité. L’identité des centres d’hébergement de Temps Jeunes a été définie, j’ai donc intégré leur identité dans la conception visuelle de leur tout nouveaux sites Web. Limitée par le temps, je me suis dédiée à la maquette haute-fidélité desktop, car les utilisateurs utilisent principalement ce touchpoint pour trouver un centre d’hébergement.

maquette haute fidelite 1 du futur site web centres d'hebergement temps jeunes / carmen-laura design
maquette haute fidelite 2 du futur site web centres d'hebergement temps jeunes / carmen-laura design
maquette haute fidelite 3 du futur site web centres d'hebergement temps jeunes / carmen-laura design
maquette haute fidelite 4 du futur site web centres d'hebergement temps jeunes / carmen-laura design
Maquette haute fidelite site web centres d'hebergement temps jeunes / carmen-laura design

Points à retenir & prochaines étapes

Grâce à ce projet, j’ai appris les différents aspects concernant les centres d’hébergement, comment sont-ils différents d’autres types d’hébergement (hôtels, auberges de jeunesse etc.), comment fonctionnent-ils. Grâce à mes connaissances dans l’industrie du tourisme, j’ai facilement compris ce secteur ainsi que les défis du persona. La recherche utilisateur m’a aidé à emphatiser et à mieux comprendre leurs besoins et objectifs.

Ce projet a été un vrai challenge d’un point de vue de complexité, mais j’ai adoré travaillé sur la création des 4 sites web similaires à partir d’un brief jusqu’à leur publication. J’ai hâte de voir comment ceux-ci vont évoluer à l’avenir.

En ce qui concerne l’amélioration de cette expérience, les prochaines étapes seraient les suivantes :

  • effectuer des tests utilisateurs pour avoir encore plus de retours sur les sites actuels
  • itérer avec les améliorations résultantes de la recherche
  • mettre en œuvre d’autres opportunités résultant de la recherche, visibles dans les sections d’opportunité du parcours utilisateur