Redéfinir un magasin de design d'intérieur numérique (une étude de cas)

Coup d'envoi

Astuce: Je lance toujours un projet en parlant aux parties prenantes. Pour les petits projets avec un ou deux intervenants, vous pouvez fusionner le coup d'envoi et l'entrevue en un seul. Assurez-vous simplement que cela ne dure pas plus d'une heure.

Entrevues avec les intervenants

Nos deux parties prenantes sont des experts du domaine. Ils ont un magasin de brique et de mortier dans le centre de Bangalore qui attire beaucoup de gens. Une fois là-bas, les gens sont ravis de la façon dont les dessins ont l'air et se sentent. Nos clients voulaient avoir un site web qui transmet le même sentiment en ligne et qui ferait que ses visiteurs veuillent aller au magasin.

Leurs points principaux de douleur:

• Le site Web n'était pas sensible .

• Il n'y avait pas de distinction claire entre les clients nouveaux, anciens et potentiels

• Les points de vente de DC n'étaient pas clairement communiqués.

Ils avaient des projets futurs pour transformer le site en hub pour des idées de design d'intérieur. Et, last but not least, DC a voulu attirer de nouveaux talents en design

Définir les objectifs

Nous avons présélectionné tous nos objectifs pour le projet. Notre but principal était d'expliquer de façon claire et attrayante ce que DC fait pour les clients existants et potentiels d'une manière qui les engage à contacter DC et à aller au magasin. Les objectifs secondaires étaient:

• abaisser le taux de chute,

• capturer certaines données client,

• clarifier le message de la marque,

• rendre le site Web réactif,

• mieux expliquer les budgets,

• fournir

Key Metrics

Notre métrique numéro un était de convertir les utilisateurs en prospects qui visitent le magasin qui mesure l'objectif principal. Nous avions besoin de l'améliorer d'au moins 5% au départ – un nombre réaliste que nous avons décidé avec nos parties prenantes. Pour ce faire, nous avons besoin de:

• raccourcir le temps de conversion (temps nécessaire à un utilisateur pour entrer en contact avec DC),

• augmenter le taux d'application de la forme,

• augmenter la satisfaction globale que les utilisateurs obtiennent du site Web.

Nous suivrions ces mesures en configurant Google Analytics Events une fois que le site serait en ligne et en discutant avec des clients potentiels. à travers le site Web.

Astuce: Ne vous concentrez pas sur trop de métriques. Une poignée de vos plus importants sont suffisants. Mesurer trop de choses diluera les résultats.

Discovery

Pour que nous puissions obtenir les meilleures idées possibles, nos entrevues avec les utilisateurs devaient viser les clients précédents et potentiels, mais nous devions aller au minimum, alors nous en avons choisi deux. potentiel et trois clients existants. Ils provenaient principalement du secteur informatique – le principal groupe cible de DC. Compte tenu de notre calendrier plutôt serré, nous avons commencé à effectuer des recherches documentaires en attendant que les cinq entrevues soient planifiées

Conseil utile: Vous devez savoir pour qui vous concevez et quelles recherches ont été effectuées avant. Les parties prenantes vous racontent leur histoire, mais vous devez la comparer aux données et aux opinions, attentes et besoins des utilisateurs.

Data

Nous pourrions référencer quelques données Google Analytics du site Web:

• La plupart des utilisateurs se sont rendus sur cuisine, puis à la chambre à coucher, puis au salon

• Le taux de rebond élevé de 80% + était probablement dû à une mauvaise compréhension du message de la marque et des flux peu clairs et appels à l'action (CTAs)

• Le trafic était principalement mobile

• La plupart des utilisateurs ont accédé à la page d'accueil, 70% d'entre eux et 16% directement (pour la plupart des clients), le reste étant réparti également entre Facebook et Google. ] 90% du trafic des médias sociaux provenait de Facebook. L'expansion de la notoriété de la marque auprès d'Instagram et de Twitter pourrait être bénéfique.

Concurrents

Il y a beaucoup de concurrence locale dans le secteur. Voici quelques motifs récurrents:

• des spots vidéo et des galeries élaborées montrant les projets achevés avec des clients discutant de leurs services;

• attrayantes présentations de design avec des photos de haute qualité; [19659011]

• gros caractères typographiques, moins de texte et plus de graphismes

Utilisateurs

Les clients de DC sont pour la plupart âgés de 28 à 40 ans, avec un ensemble secondaire dans la tranche supérieure de 38 et 55 qui viennent pour leur deuxième maison. Ce sont des professionnels de l'informatique ou des affaires avec un budget moyen à élevé. Ils apprécient la bonne expérience client mais sont soucieux des prix et très pratiques. Parce que ce sont principalement des familles, très souvent les femmes sont les décideurs dominants cachés.

Nous avons parlé avec cinq utilisateurs (trois clients existants et deux clients potentiels) et avons envoyé une enquête à 20 autres (mélange de clients existants et potentiels; Design Cafe Questionnaire ).

Entrevues avec des utilisateurs

Conseil utile: Assurez-vous de planifier toutes vos entrevues à l'avance et prévoyez plus de personnes que nécessaire. Inclure utilisateurs extrêmes ainsi que les principaux. Les chances sont que si quelque chose fonctionne pour un utilisateur extrême, il va travailler pour le reste aussi bien. Les extrêmes vous donneront également un aperçu des cas marginaux auxquels les courants dominants ne s'intéressent pas.

Tous les utilisateurs étaient confus au sujet de l'objectif principal du site. Certains de leurs avis:

• "Il manque un flux approprié."

• "J'ai besoin de plus de clarté dans le processus, particulièrement en termes de délais."

• "J'ai besoin de plus d'informations éducatives sur le design d'intérieur. 19659013] Tout le monde était plutôt bien informé sur la compétition. Ils avaient essayé d'autres entreprises avant DC. Tous ont découvert sur DC par une référence, Google, des annonces ou en passant physiquement par le magasin. Et, mon garçon, ont-ils aimé le magasin! Ils l'ont traité comme un Apple Store pour le design d'intérieur. Il s'avère que DC a vraiment fait un excellent travail avec ça.

  Astuce: Les commentaires négatifs nous aident à trouver des opportunités d'amélioration. Mais la rétroaction positive est également très utile car elle vous aide à identifier les parties du produit qui valent la peine d'être conservées.

  Le contact personnel, le service à la clientèle, les prix et la qualité des matériaux sont les principales motivations pour choisir DC. Les gens insistaient pour pouvoir voir le prix de chaque élément sur une page à tout moment (le design précédent n'avait pas de prix sur les accessoires).

  Nous avons fait une découverte intéressante mais en quelque sorte attendue sur l'utilisation des appareils. Les appareils mobiles étaient principalement utilisés pour la consommation et la navigation, mais la plupart des gens ouvraient leurs ordinateurs portables

  Enquêtes

  Les résultats de l'enquête se chevauchaient en grande partie avec les interviews:

  • principalement par des renvois.

  • Ils ne comprenaient pas très bien l'état actuel du site Web. La plupart d'entre eux avaient recherché ou utilisé d'autres services avant DC

  • Tous les utilisateurs interrogés commandaient des modèles de cuisine. Presque tous avaient du mal à choisir le bon style de design.

  • La plupart des utilisateurs ont trouvé difficile de concevoir leur propre intérieur et se sont intéressés aux caractéristiques qui pourraient faciliter leur choix.

  Conseil utile: questions d'enquête prend du temps. Travaillez avec un chercheur pour l'écrire et prévoyez le double du temps dont vous aurez besoin.

  

  Planification

  Aperçu des voyages d'utilisateurs

  Parler avec les clients nous a aidés à comprendre quels scénarios être le plus important pour eux. Nous avons fait un diagramme d'affinité avec tout ce que nous avons collecté et avons commencé à hiérarchiser et à combiner des éléments en morceaux

  Astuce: Utiliser un tableau blanc pour télécharger toutes les connaissances de votre équipe saturer le plateau avec celui-ci . Groupez tout jusqu'à ce que vous aperceviez des motifs. Ces modèles vous aideront à établir des thèmes et à trouver les points de douleur les plus importants.

  Le résultat était sept points de vue problèmes que nous avons décidé de concevoir pour: 19659073] Un nouveau client a besoin de plus d'informations sur DC parce qu'il a besoin de preuve de crédibilité.

• Un client qui revient doit avoir un accès rapide aux conceptions car il ne veut pas perdre de temps.
• Tous les clients doivent pouvoir naviguer
• Tous les clients veulent parcourir les dessins correspondant à leurs goûts, parce que cela raccourcira leur temps de recherche.
• Les prospects potentiels doivent entrer en contact avec DC afin d'acheter un design
• Tous les clients, une fois qu'ils ont commandé, doivent rester à jour avec leur statut de commande parce qu'ils ont besoin de savoir ce qu'ils paient pour et quand ils l'obtiendront.
• Tous les clients veulent lire études sur des projets réussis, parce que cela les rassurera que DC connaît ses affaires

En utilisant cette liste, nous avons trouvé des solutions de conception pour chaque voyage.



Onboarding

Le précédent Page d'accueil de Design Cafe était déroutant. Il devait présenter plus d'informations sur l'entreprise. Le manque d'information a causé de la confusion et les gens ne savaient pas ce que DC faisait. Nous avons divisé la page d'accueil en plusieurs sections et l'avons conçue pour que chaque section puisse satisfaire les besoins d'un de nos groupes cibles:

1. Pour nouveaux visiteurs (le flux violet), nous avons inclus bref voyage à travers les principaux points de vente uniques (USP) du service, son fonctionnement, quelques exemples de réussite et une option pour lancer le quiz de style.

2. Pour visiteurs de retour (le flux bleu), qui va probablement sauter la page d'accueil ou l'utiliser comme un waypoint, la section des héros et la navigation a pointé un moyen de sortir des designs.

3. Nous avons laissé une petite partie à la fin de la page (le flux orange) pour employés potentiels décrivant ce qu'il y a à aimer DC et un CTA qui va à la page des carrières



Le but du processus d'intégration était de capter l'attention du client afin qu'il pourrait continuer en avant, soit directement au catalogue de conception ou par l'intermédiaire d'une caractéristique nous Nous avons fait le quiz de style pour aider les utilisateurs à affiner leurs résultats

DC avait auparavant une fonctionnalité appelée un constructeur 3D que nous avons décidé de supprimer. Il vous a permis de définir la taille de votre pièce, puis de glisser-déposer des meubles, des fenêtres et des portes dans le mélange. En théorie, cela semble bien, mais en réalité, les gens le traitaient comme un jeu et s'attendaient à ce qu'il fonctionne comme une version minifiée du mode de construction des Sims .



Tout ce qui a été fait avec le constructeur 3D a été complètement modifié par les concepteurs. L'outil donnait aux gens beaucoup de puissance de conception et trop de choix. En plus de cela, le soutenir était un effort technique énorme parce que c'était un produit complet en lui-même.

Comparé à cela, le quiz de style était une caractéristique relativement simple:

1. Il commence par demander à propos de couleurs, textures et dessins que vous aimez.

2. Il continue à poser des questions sur le type de pièce.

3. Finalement, il affiche une liste de designs basée sur vos réponses.



L'assistant de quiz s'étend à seulement quatre étapes et prend moins d'une minute pour terminer. Mais cela incite les gens à investir un peu de leur temps, créant ainsi un engagement. Résultat: nous améliorons le temps de conversion et la satisfaction globale.

Les utilisateurs peuvent également ignorer le quiz de style et accéder directement au catalogue de conception, puis utiliser les filtres pour affiner les résultats. La page affiche automatiquement les modèles de cuisine, ce que la plupart des gens recherchent. Et pour le prix-conscient, nous avons fait une petite fonctionnalité qui leur permet d'entrer la taille de leur pièce, et tous les prix sont recalculés.



Si les gens n'aiment rien du catalogue, il y a de fortes chances qu'ils soient pas le client cible de DC et il n'y a pas grand chose que nous puissions faire pour les garder sur le site Web. Mais s'ils font comme un dessin ils pourraient décider d'aller de l'avant et d'entrer en contact avec DC, ce qui nous amène à l'étape suivante du processus.

Entrer en contact

Contacter DC être aussi simple que possible. Nous avons implémenté trois façons de le faire:

• à travers le chat, affiché sur chaque page – le moyen le plus rapide

• en ouvrant la page de contact et en remplissant le formulaire ou en appelant simplement DC sur le téléphone

• en cliquant sur "Réserver une consultation" dans l'en-tête, qui demande des informations de base et demande un rendez-vous (lors de la soumission, les prochaines étapes sont montrées pour permettre aux utilisateurs de savoir ce qui va se passer exactement)



Notre client avait déjà commencé à travailler sur une séance photo, et les résultats étaient excellents. La photographie de stock aurait ruiné tout ce qui était personnel sur ce site. Les photos résultantes se sont plutôt bien mélangées avec le grand type et ont aidé avec ce langage simple.

Typographie

Initialement, nous sommes allés avec une combinaison de Raleway et Roboto pour la typographie. Raleway est une belle police mais un peu trop utilisée. La deuxième itération était Abril Fatface et Raleway pour la copie. Abril Fatface ressemble à la splendeur de Didot et rend toute la page beaucoup plus lourde et prétentieuse. C'était une direction intéressante à explorer, mais cela ne résonnait pas avec la sensation moderne de DC. La dernière itération était Nexa pour les titres, ce qui s'est avéré être le meilleur choix en raison de son aspect moderne et nerveux, avec Lato – tous deux très bien.

Astuce utile: Jouez avec des variations de type. Listez-les côte à côte pour voir comment ils se comparent. Allez à Typewolf MyFonts ou un site similaire pour vous inspirer. Recherchez les caractères qui ont du sens pour votre produit. Envisager la lisibilité et l'accessibilité. Ne pas aller à la mer avec votre échelle de type; Gardez-le aussi minime que possible. Consultez le résumé des règles clés de Butterick en cas de doute



Couleurs

DC avait déjà un schéma de couleurs, mais ils nous ont donné la liberté d'expérimenter. Les couleurs principales étaient des teintes de cyan, d'or et de prune (ou, plutôt, un étrange genre de bordeaux), mais les teintes originales étaient trop fanées et ne se mélangeaient pas assez bien.

Si la marque a déjà des couleurs, testez de légères variations pour voir comment elles correspondent à la conception globale. Ou supprimez certaines couleurs et n'utilisez qu'une ou deux couleurs. Essayez de concevoir votre mise en page en monochrome, puis testez différentes combinaisons de couleurs sur un dessin déjà mocké. Découvrez d'autres bons conseils de Wojciech Zieliński dans son article " Comment utiliser les couleurs dans la conception de l'interface utilisateur: Conseils pratiques et outils ".

Voici ce que nous avons décidé à la fin :



La façon dont nous avons présenté toutes ces variantes de type et couleurs était à travers des itérations sur la page d'accueil.

Maquettes initiales

Nous avons focalisé la première itération visuelle pour obtenir les informations principales clairement visibles. tirer le meilleur parti des témoignages et des sections de quiz de style. Après discussion, nous avons pensé que c'était trop simple et qu'il fallait l'améliorer. Nous avons modifié les polices et les icônes et modifié certaines sections, illustrées par les itérations 2 et 3 de l'image ci-dessous.

Nous n'avons pas eu le temps de concevoir des icônes personnalisées, mais le NounProject la rescousse. Avec le format de fichier SVG, il est très simple de changer ce dont vous avez besoin et de le mélanger avec autre chose. Cela a accéléré énormément notre travail, et avec l'itération visuelle numéro 4, nous avons signé le design de la page d'accueil. Cela nous a permis de nous concentrer sur les composants et de les utiliser comme blocs LEGO pour construire les templates



Composants System

J'ai listé la plupart des composants ( voir PDF ) dans une planche Sketch pour Gardez-les accessibles. Chaque fois que la conception avait besoin d'un nouveau modèle, nous revenions sur cette page et cherchions des moyens de réutiliser les éléments. Avoir un système visuel en place, même pour un petit projet comme celui-ci, gardait les choses cohérentes et simples

Astuce: Composants, atomes, blocs – peu importe comment vous les appelez, ils font tous partie de la réflexion systématique sur votre conception. Les systèmes de conception vous aident à mieux comprendre votre produit en vous invitant à vous concentrer sur les modèles, les principes de conception et le langage de conception. Si vous êtes nouveau à cette approche, consultez Atomic Design de Brad Frost ou Design Systems d'Alla Kholmatova .



Prototypage avec code

Astuce: Travailler sur un prototype en premier. Vous pouvez créer un prototype en utilisant HTML, CSS et JavaScript. Ou vous pouvez utiliser InVision, Marvel, Adobe XD ou même l'application Sketch ou votre outil de prototypage préféré. Cela n'a pas vraiment d'importance. L'important est de réaliser que ce n'est que lorsque votre prototype verra comment votre design fonctionnera.

Pour notre prototype, nous avons décidé d'utiliser du code et de mettre en place un processus de construction simple pour accélérer notre travail.

et les processus

Gulp ont tout automatisé. Si vous n'en avez pas entendu parler, consultez le guide génial de Callum Macrae . Gulp nous a permis de gérer tous les styles, scripts et modèles, et il produit une version de production minifiée prête à l'emploi du code.

Certains des plugins Gulp les plus importants que nous avons utilisés étaient:

• gulp-postcss
  Ceci vous permet d'utiliser PostCSS . Vous pouvez le combiner avec des plugins comme cssnext pour obtenir une configuration assez robuste et polyvalente.
• browser-sync
  Ceci configure un serveur et met à jour automatiquement la vue à chaque changement. Vous pouvez le configurer pour lancer "gulp watch", et tout sera synchronisé en appuyant sur "Save".
• gulp-compile-handlebars
  Ceci est un Handlebars mise en œuvre pour Gulp. C'est un moyen rapide de créer des modèles et de les réutiliser. Imaginez que vous avez un bouton qui reste le même tout au long de la conception. Ce serait un symbole dans Sketch. C'est fondamentalement le même concept mais enveloppé en HTML. Chaque fois que vous voulez utiliser ce bouton, vous n'avez qu'à inclure le modèle de bouton. Si vous modifiez quelque chose dans le modèle principal, il propage les modifications à tous les autres boutons de la conception. Vous faites cela pour tout dans le système de conception, et vous utilisez donc le même paradigme pour le design visuel et le code. Plus de maquettes de pages statiques!

Composants et modèles

Nous avons dû mélanger CSS atomique avec un CSS basé sur un module pour tirer le meilleur parti des deux mondes. Atomic CSS gérait tous les styles généraux, tandis que les modules CSS traitaient les cas marginaux.

En CSS atomique, les atomes sont des classes CSS immuables qui ne font qu'une chose. Nous avons utilisé Tachyons une boîte à outils atomique. Dans Tachyons, chaque classe que vous appliquez est une seule propriété CSS. Par exemple, .b représente font-weight: gras et .ttu signifie text-transform: majuscule . Un paragraphe avec des majuscules en gras ressemblerait à ceci:

 Paragraphe 

Astuce: Une fois familiarisé avec le CSS atomique, il devient un moyen très rapide de prototyper des choses – et très systématique, parce qu'il vous invite à réfléchir constamment à la réutilisation et à l'optimisation.

Un avantage majeur du prototypage avec le code est que vous pouvez démo des interactions complexes . Conception de micro-interactions dans le navigateur

Notre prototype était si haute fidélité qu'il est devenu la base du produit réel – DC a utilisé notre code et l'a intégré dans leur flux de travail. Vous pouvez consulter le prototype le http://beta.boyankostov.com/2017/designcafe/html (ou en direct le http://designcafe.com ).

Astuce: Avec les prototypes HTML, vous devrez décider du niveau de fidélité que vous voulez atteindre. Cela pourrait prendre beaucoup de temps si vous allez trop loin. Mais vous ne pouvez pas vraiment vous tromper avec ça parce que vous allez de plus en plus profondément dans le code et peaufinez tous les détails possibles, à un moment donné vous commencerez à livrer le produit réel.

Sign-off

Les clients, en particulier les petites entreprises B2C, adorent offrir une solution de conception qu'ils peuvent utiliser immédiatement. Nous avons expédié juste cela.

Malheureusement, vous ne pouvez pas toujours prédire le rythme d'un projet, et il a fallu plusieurs mois pour que notre code soit intégré dans le flux de travail de DC. Dans son état actuel, ce code est prêt à être testé, et quoi de mieux, c'est qu'il est assez facile à modifier. Donc, si DC décide d'effectuer des tests utilisateur à l'avenir, tout changement sera facile à faire.

Takeaways

• Collaborez avec d'autres concepteurs autant que possible. Quand deux personnes pensent au même problème, elles vont fournir de meilleures idées. Prendre des notes en prenant des notes pendant les entrevues et faire un remue-méninges sur les objectifs, les idées et les visuels

• Avoir un développeur dans l'équipe est bénéfique parce que tout le monde fait ce qu'il fait de mieux. Un bon développeur passera aussi peu que quelques minutes sur un problème JavaScript que j'aurais probablement besoin de quelques heures à résoudre.

• Nous avons livré une version fonctionnelle du site web et le client a pu l'utiliser tout de suite. Si vous ne parvenez pas à signer le code, essayez de vous rapprocher le plus possible du produit final et communiquez-le visuellement à l'équipe de votre client. Documentez votre design – c'est un livrable qui sera utilisé et abusé par tout le monde, des développeurs aux spécialistes du marketing en passant par les concepteurs internes. Mettez de côté du temps pour vous assurer que toutes vos idées sont bien comprises par tout le monde.

• Planifier des entrevues et écrire de bonnes enquêtes peut prendre beaucoup de temps. Vous devez planifier à l'avance et recruter plus de personnes que vous ne le pensez. Embaucher un chercheur expérimenté pour travailler avec vous sur ces tâches, et passer du temps avec votre équipe pour identifier vos objectifs. Soyez prudent lors de l'approvisionnement des participants. Votre client peut vous aider à trouver les bonnes personnes, mais vous devrez vous en tenir aux participants qui rencontrent les bonnes données démographiques.

• Planifiez suffisamment de temps pour planifier. Les objectifs, les processus et les responsabilités du projet doivent être clairs pour tous les membres de votre équipe. Vous avez besoin de temps pour permettre de multiples itérations sur les prototypes, car les prototypes améliorent rapidement les produits. Si vous ne voulez pas jouer avec le code, il existe différentes façons de prototyper . Mais même si vous le faites, vous n'avez pas besoin d'écrire du code impeccable – il suffit d'écrire le code du concepteur. Ou, comme l'a dit Alan Cooper "Parfois, le meilleur moyen pour un concepteur de communiquer sa vision est de coder quelque chose afin que ses collègues puissent interagir avec le comportement proposé, plutôt que de simplement voir des images fixes. L'objectif d'un tel code n'est pas le même que l'objectif du code que les codeurs écrivent. Le code n'est pas pour le déploiement, mais pour la conception [and] son ​​but est différent. "

• Ne vous concentrez pas sur un design unique en soi, sauf si c'est la caractéristique principale de votre produit. Mieux vaut passer du temps sur des choses qui comptent plus. Utilisez des cadres, des icônes et des éléments visuels dans la mesure du possible, ou sous-traitez-les à un autre concepteur et concentrez-vous sur les objectifs et statistiques clés de votre produit

(mb, ra, al, yk, il)