top of page

Craigslist : Refonte du site Web

Refonte du site Web
craigsliost-mockup.png
Aperçu

Craiglistest l'un des sites de petites annonces les plus populaires sur Internet. A commencé comme une simple liste de diffusion en 1995 et l'a transformée en site Web en 1996. Elle reçoit plus de 360 millions de visiteurs chaque mois. Pourtant il amauvaise conception du site Web.

Client

Craiglist

Rôle

Concepteur UX/UI

Chronologie

octobre 2021-novembre 2021

(4 semaines)

Services fournis

En tant que concepteur UX/UI, on m'a confié la tâche de faire des recherches approfondies sur le site Web et de proposer un design convivial qui correspond aux besoins et aux exigences du client. Pour cela j'ai effectué :

  • Audit de site Web

  • Recherche UX

  • Tests de guérilla

  • Structure des informations

  • Maquettes

landing-page-mockup-2.png
Frustration

Lors de mes recherches UX, j'ai rencontré un grand nombre de groupes qui étaient soit frustrés, soit confus quant à la conception du site Web. Beaucoup d'entre eux pensaient que l'application était soit sous-développée, tandis que certains ont déclaré qu'elle ignorait simplement la conception pour éviter plus de temps de mise en mémoire tampon.

frsutrations #1.png
frsutrations #2.png
Énoncé du problème

Après avoir fait un UX-Audit, j'ai découvert un certain nombre de lacunes qui nécessitaient une étude et un travail plus approfondis. J'ai passé des heures à rechercher les meilleures pratiques, à analyser les entretiens avec les utilisateurs et à débattre du type de solutions les plus appropriées pour ce projet.

Craigslist a un design très encombré sans aucun repère visuel ni sens de l'orientation. L'ensemble du processus de navigation en tant que listes, conceptions de formulaires pour les publications d'annonces et tous les autres aspects doit être amélioré. 

  • Conception encombrée

  • Aucun visuel

  • Petite police

  • Ne répond pas

  • Mauvaise lisibilité

painpoints.jpg
Guerilla Testing.jpg
Solution

Craigslist disposera désormais d'une maquette de site Web adaptative réactive (bureau-mobile) qui sera le résultat de tous les tests utilisateurs et d'une architecture triée pour celle-ci. La conception sera conviviale avec une meilleure fonction de recherche, de meilleurs aperçus, une structure d'annonce bien organisée et plus encore.

Mon objectif principal était de visualiser la future application en rendant l'expérience utilisateur plus agréable et engageante, et de créer une interface visuelle digne de confiance.

grid-mockup-1.png
Procédé de design

Craigslist est un site Web américain de petites annonces qui comporte différentes sections d'annonces à des fins diverses telles que les emplois, le logement, la vente, les articles recherchés, les forums, etc. Mais comme le site Web officiel manque de conception, j'ai commencé par noter quelques points clés de mon Guerilla essai. Ensuite, j'ai fait des recherches et créé un dossier approprié pour faire avancer l'architecture du site Web. Plus tard, j'ai créé des wireframes et des maquettes avant de faire les tests finaux.

Avant de me lancer dans une réflexion sur le design, j'ai décidé de recueillir des commentaires critiques pour le site Web, ce qui m'a aidé dans mes recherches ultérieures. J'ai regardé divers articles et offres d'emploi, sur craigslist, et j'ai formulé un mémoire pour cela.

J'ai noté la vision, le but, les objectifs et le public cible de l'entreprise.   Parallèlement à cela, j'ai également recherché ce que font ses concurrents dans le même secteur.

Structure des informations

Tout d'abord, le projet nécessaire était la carte de la structure de l'information, car le site Web actuel est entièrement basé sur des liens bleus par défaut et n'indique pas exactement à l'utilisateur où chercher. 

Depuis que l'architecture a été mise en place, il était temps de guider l'utilisateur sur le site Web. Pour y parvenir, j'ai créé un serment dans lequel l'utilisateur naviguera sur la page d'accueil, recherchera l'annonce par différentes approches, appliquera les filtres requis, les parcourra, puis y répondra. Ce flux a beaucoup aidé à couvrir tous les fils d'Ariane possibles qui ont été laissés pendant la structure de l'information et a donné un sens au site Web.

Flux d'utilisateurs

Étant donné que le site Web lui-même n'est constitué que de liens bleus et de texte brut et épais, il avait besoin d'une architecture et d'une organisation approfondies. Pour ce faire, j'ai noté toutes les actions possibles qu'un utilisateur pourrait faire sur n'importe quel site Web de liste d'annonces, puis j'ai regroupé et imbriqué toutes les étapes jusqu'à ce que j'atteigne la navigation finale. Ce processus impliquait toutes les autres catégories de pages ou sous-menus que le site pourrait avoir.

raw brainstorming.jpg
sitemap.jpg
userjourney.jpg

Basse fidélité
Maquettes

IMG-1597_edited.jpg
Maquettes
(Basse fidélité)

Après avoir mis en place l'infrastructure du site, je suis passé aux wireframes basse fidélité. Mon approche principale lors de la mise en place de ces wireframes était de garder les visuels aussi simples que possible car Craigslist a l'un des trafics les plus importants au monde. Avoir une structure compliquée augmenterait le temps de chargement, perdant ainsi l'attention de l'utilisateur.

Cela a abouti à la création de quatre wireframes :

Page de destination
Page d'accueil
Page des listes d'annonces
Page des détails de l'annonce

Haute fidélité
Maquettes

craigsliost-mockup.png
Maquettes
(Haute fidélité)

Les wireframes basse fidélité se sont ensuite transformés en maquettes où j'ai pris des images haute résolution, des graphiques, des visuels, etc. Ensuite, je les ai mis dans un guide de style et les ai intégrés dans les wireframes que j'ai créés à l'étape précédente, ce qui transmettrait le sentiment du site web  et mettrait à nouveau en évidence une approche individuelle.

Le site Web a maintenant commencé à paraître plus convivial et attrayant, où les gens pouvaient faire confiance et postuler pour les annonces qui y étaient publiées.

final-mockup.jpg
Résultats
À la fin de ce projet, j'ai non seulement repensé le site Web, mais également mis en œuvre mes meilleures pratiques pour rendre l'expérience utilisateur plus attrayante, conviviale et intuitive.

Je pense que ce projet m'a donné une grande idée de l'importance du design, quelle que soit votre tâche ou le trafic du site. La première impression est l'objectif le plus important que chaque interface devrait pratiquer en dehors des services. La refonte de ce site Web et son apport ici à mon portefeuille ont transformé mes capacités à mener des audits UX pour les petites et grandes entreprises et à apporter le changement au maximum.

© 2020 Vanshika, ViniArts

vini-logo-small-logo_edited.png
bottom of page