date_range dernière mise à jour le 10 avril 2018

language Read the original in English

cas d'étude

Ergonomie et systèmes

Problématique : Nous voulions présenter des arguments pour augmenter le budget pour les mannequins engagés, la photographie et le site web.

Il ne restait plus beaucoup de temps. Le budget sera légèrement augmenté et si nous n’agissions pas bientôt, l’occasion nous serait passée sous le nez, et qui savait quand elle reviendrait... En investissant un peu plus que prévu, nos efforts en marketing et notre présence en ligne serviraient d’une juste vitrine à la marque. Nous avions simplement besoin de convaincre nos employeurs.

Table of Contents


Ce projet associait principalement Jennie McGuirk (directrice de création) et moi (graphisme, prototypage). Nous recevions aussi de l’aide de notre photographe en freelance.


Ideation in Wireframes

filter_1 Preface

Il s’agît ici de l’histoire d’une étincelle, celle qui révélerait notre potentiel.

L’étincelle est apparue lorsque j’ai rencontré la directrice de création d'entreprise, Jennie McGuirk. Elle souhaitait envoyer un bulletin mensuel aux clients de TAGS sur ce qui faisait démarquer notre boutique. TAGS approvisionnait de beaux vêtements provenant du monde entier : des maillots de bain de l’Australie, des pulls de la Belgique et des chemisiers en soie de France. Toutefois, on faisait peu de choses en ligne pour mettre en avant ces trouvailles et leur marque.

Donc, tous les mois, nous soulignions un designer différent avec des questions et réponses ainsi que quelques photos tirées pour l’occasion. Nous commencions à avoir de plus en plus d’idées, mais toute idée qui nécessitait un peu plus d’effort a été laissé de côté par la direction. Il n’y avait pas vraiment ni du branding ni d’identité visuelle, la qualité de nos mannequins était inégale et le site web avait besoin d’ajustements et d’un rafraîchissement.

Ensuite est venu une bonne chose, en fin de compte, lorsque le propriétaire de la boutique disait vouloir une meilleure qualité de photographie pour les accessoires de mode. Elle engagerait davantage notre photographe en freelance pour ce faire. Au lieu d’être blessés, nous avons profité de l’occasion. En travaillant sur le branding et l’identité visuelle de la marque, en collaboration avec le photographe, nous avons convaincu les employeurs d’ augmenter le budget pour la photographie et les mannequins. Comme nous faisions des économies de temps pour produire des campagnes d’emailing avec notre guide sur l’identité visuelle, nous arriverions à de nouveau livrer un design, cette fois-ci pour convaincre notre développeur surmené à rafraîchir le site web. Pour cela, nous avons identifiés les changements optimaux.

À noter : le site web, et même son logotype, a changé depuis mon départ de TAGS. Ainsi, si vous allez visiter le site web maintenant, il ne ressemblerait plus ni aux descriptions ni aux visuels inclus dans ce cas d’étude.

filter_2 Préparation

Nous avions à définir ce que la marque devait dégager. Nous savions que les tissus et modèles étaient excellents, mais nous ne le voyions pas trop dans les campagnes et surtout pas sur le site. Alors, nous avons commencé par la sélection des adjectifs qui décriraient mieux notre marque, suivi par le choix de la définition de la mission.

Une fois établi, nous jouions avec les polices, les couleurs, les photos et les dessins pour capturer notre marque. Avec l’analyse concurrentielle et des planches de tendance, nous sommes arrivés à trouver la bonne combinaison des polices et couleurs.

filter_3 Exécution

À la séance suivante de photo, nous avons veillé à embaucher une de nos mannequins les plus prometteuses pour donner vie à notre identité visuelle.

Avec les guides, avec des visuels comparatifs des rivaux, nous avons créé un diapo pour convaincre nos patrons d’augmenter le budget. Nous étions nerveux, mais avions confiance dans notre travail et étions prêts à le défendre.


Nous avons réussi !


La meilleure partie, c’est que grâce aux meilleurs mannequins et plus de temps avec notre photographe, je pouvais faire les visuels pour les campagnes d’emailing plus rapidement. En effet, notre modèle simple permettait aux vêtements de parler d’eux-même, tout en maintenant une cohérence avec toutes nos images numériques.

Cela signifiait aussi plus de temps pour explorer d’autres moyens d’améliorer l’expérience de nos clients.

filter_4 Problème: site web

Notre prochaine étape était de travailler sur le site web, pour les trois raisons suivantes :


filter_5 Recherches

Pour commencer à réaménager le site web, nous avons dressé un audit de contenu pour chaque contenu unique sur le site web. Ainsi, nous sommes parvenus à repérer les manques de cohérences, les redondances et d’autres points du site à perfectionner.

Certains étaient banals, comme ajuster l’espace blanc pour refléter la manière dont un utilisateur regroupe naturellement des éléments (Gestalt). Par exemple, l’adresse de la boutique était scindée en deux, alors que le numéro de téléphone se trouvait plus près en-dessous. D’autres points étaient un allègement de la page d’aide qui ressemblait à des modalités très difficile à lire en diagonal, l’ajout des liens pour sauter vers certaines marques sur une page à 15 écrans sur mobile et la multiplication de points d’entrées vers les produits sur la page d’accueil.

filter_6 Design

En dressant l’audit de contenu, nous nous concentrions sur les deux extrêmes du site web responsive : version desktop et version mobile, surtout que l’usage d’un téléphone mobile sur les sites é-commerce commençait à monter en flèche ( 2014 ). Nous avons prêté une attention particulière à la page d’accueil ainsi que le processus d’achat : de la navigation à la confirmation d’achat.

Comme la version mobile du site était plutôt le site en version desktop rétréci pour un écran plus petit, nous pouvions faire beaucoup pour améliorer la facilité de naviguer avec son doigt et la qualité de lecture ainsi que l’expérience globale sur mobile.

En ce qui concerne le site en version desktop, nous avons beaucoup appris en effectuant des analyses concurrentielles. Avec tant de manières pour répertorier un produit et ainsi fournir des points d’entrées, nous avons décidé d’employer les mega-menus déroulants qui devenait de plus en plus à la mode.

Pour nous aider à ressortir les idées rapidement et les ajuster avec peu d’effort, nous avons utilisé Basalmiq.

filter_7 Livrables

Après avoir décidé sur la structure par des wireframes créées en Basalmiq, j’ai commencé à ajouter les visuels avec Adobe Illustrator. C’était particulièrement utile, car nous n’étions pas toujours sûr sur laquelle des deux ou trois solutions étaient la meilleure. En plus, ce serait utile aussi pour souligner les changements sur le site web pour le développeur, comme nos changements étaient parfois subtils et discrets.

Ideation in Wireframes

Prototypes : Afin de convaincre notre équipe de la faisabilité et la désirabilité des nos ajustements, j’ai réalisé un prototype du frontend entier en HTML et CSS, avec une site responsive à l’esprit et tenant compte des points d’arrêt. Un plus, c’était que le développeur pouvait ainsi utiliser l’outil “inspecter” pour identifier les marges intérieures et extérieures et les couleurs sans devoir consulter un guide fleuve.

Typography and Layout fo" alt="Ideation in Wireframes">

filter_8 Conclusion

Notre employeur était convaincu des améliorations suggérées et peu après, le développeur a intégré nos recommandations pour le site web. Nous espérions que la marque et son expérience ( y compris le site web, les messages, les visuels et bientôt l’emballage ) refléteraient la qualité des vêtements élégants triés sur le volet et du monde entier.

À noter : depuis mon départ, l’équipe à TAGS a décidé de changer complètement son image et d’aller vers une image beaucoup plus spécifique : voyager avec style et à l’aise. Ainsi, leur site web ne correspond plus aux descriptions et aux visuels inclus dans ce cas d’étude.


J'espère que ce cas d'étude vous a plu.


Cas d'étude dernier:
Unhangry

Connecter:
Trouvez moi sur Linkedin

Copyright © 2018 - Irvin Fong