Étude de cas product design
Créateur de sites, boutiques en ligne
Système de création de boutiques en ligne · Hébreu / anglais · E-Commerce
À propos du projet e-commerce
Détails du projet
Ce n’est pas un simple projet de design de boutique en ligne. J’ai travaillé sur un système de composants, de modèles, de déclinaisons responsives et d’éléments pour créer des boutiques en ligne facilement et rapidement. Cela a permis à l’entreprise d’outsourcing d’accepter de nombreuses commandes de boutiques en ligne et de les livrer en très peu de temps.
Mon rôle
UX designer / designer visuel
« La guerre dans mon pays a profondément touché beaucoup de gens. J’ai dû travailler dans des cafés, des espaces de coworking, des garages et des parkings. Cela m’a aidé à faire abstraction de tout et à m’immerger bien plus profondément dans les projets. »
Processus de design
Le projet a consisté à identifier le problème business de nos clients, en comprendre les nuances, définir les problèmes et besoins des utilisateurs, transposer le design, créer des modèles basse fidélité et concevoir les écrans du design responsive. Ce processus itératif a permis de créer plusieurs structures de boutiques en ligne et d’assurer une collaboration fluide avec les clients et l’équipe de développement.
Travail sur l’idée
Lors de brainstormings quotidiens, nous avons mené des entretiens répétés avec les clients et analysé ces données. Les personas et les cartes d’empathie ont aidé à mieux comprendre à la fois les clients et les utilisateurs des boutiques en ligne.
Les designers de l’équipe ont étudié la concurrence et repris les meilleures solutions dans notre projet. Les premières étapes ont été rythmées par des réunions avec les développeurs et les managers, ce qui a aussi fait gagner un temps précieux par la suite.
Recherche et visualisation
Ce fut un long et passionnant travail de conception de wireframes pour les différents blocs du système de boutique en ligne. Les blocs ont ensuite été assemblés en pages web complètes. La dernière étape de cette phase a été la création des écrans du design responsive.
Lancement du produit
Les développeurs front-end ont créé des modèles de code pour une mise en œuvre rapide sur différentes commandes. Le manager prend la commande du client, le designer crée un design visuel créatif, et les développeurs intègrent le design en modifiant le code du modèle.
Évolution
Après la première version des modèles de boutiques en ligne, la plupart des processus ont été revus. Résultat : notre entreprise disposait de 3 types de systèmes e-commerce. Cela a permis d’élargir la clientèle et de lancer un processus très simple mais créatif de création de boutiques en ligne.
Dans cette étude de cas, je prends pour exemple le design visuel de l’une des boutiques en ligne que j’ai réalisées. Je montre aussi comment les blocs de pages ont été construits après l’étude de la concurrence, le travail sur différentes mises en page et le processus de design responsive.
Travail sur l’idée
Persona Mark : boutique en ligne
Centres d’intérêt
Raisons de commander notre produit : contexte / problème
Recherche et visualisation
Dès l’étude de la concurrence, les réunions quotidiennes avec l’équipe et l’analyse de la structure des boutiques en ligne, nous travaillions sur les blocs (modèles) des futurs écrans.
Les écrans du design responsive ont aussi été conçus en parallèle, pour faciliter le travail des développeurs. Cela a fait gagner beaucoup de temps pour les étapes suivantes du projet.
Lancement du produit
Étapes de design ultra-rapides
Gestion
C’est l’échange entre le client et le manager de l’entreprise. Élaboration du cahier des charges et transmission aux designers.
Design visuel
À cette étape, le designer prend connaissance du cahier des charges et crée le design visuel des modèles finalisés. Selon les souhaits du client, le design est soit très créatif, soit sobre et épuré
Lancement
Les développeurs reçoivent le design et l’intègrent aux modèles de code existants. Le design est ensuite comparé au rendu front-end. Et enfin, le lancement de la boutique et un client satisfait.
eco-techno store
Couleurs
Quand un client venait nous voir, son produit avait déjà en général une identité de marque. Si l’entreprise n’avait pas d’identité visuelle, nous menions une petite enquête et tenions compte de ses souhaits pour choisir les couleurs.
Typographie
La plupart de nos clients venaient d’Israël, nous utilisions donc des polices compatibles avec l’hébreu. Si le site était en anglais, nous choisissions une police adaptée à l’identité et à la marque de l’entreprise cliente.
Design visuel : desktop
Design visuel : mobile
Lancement
Dans cette étude de cas, je prends pour exemple le design visuel de l’une des boutiques en ligne que j’ai réalisées. Je montre aussi comment les blocs de pages ont été construits après l’étude de la concurrence, le travail sur différentes mises en page et le processus de design responsive.
Conclusion
Ce projet e-commerce va au-delà du simple design d’une boutique en ligne : c’est la création d’un système complet de composants, de modèles, de déclinaisons responsives et d’éléments. Cette approche a permis à l’entreprise d’outsourcing de traiter efficacement de nombreuses commandes de boutiques en ligne dans des délais remarquablement courts. Mon double rôle d’UX designer et de designer visuel a joué un rôle clé dans ce succès.
Lien vers le site de l’entreprise où j’ai pu réaliser ce projet : navoto.com.
Merci !
Merci de votre attention ! Et je remercie les Forces armées ukrainiennes de me permettre de travailler !
