Brief
Donkafele, né en 2016, se voulait une simple boutique en ligne spécialisée dans la vente de vêtements, d’accessoires et d’objets recyclés en nombre limité.
Aujourd’hui, ce modèle ayant évolué, Donkafele souhaite promouvoir l’économie circulaire en mettant en place une plateforme qui permettra aux utilisateurs de vendre et/ou acheter des pièces uniques de seconde main et de découvrir des créateurs indépendants à travers l’Afrique.
Motivation
L’ Afrique, surtout celle Francophone de l’ouest, est souvent négligée par les géants internationaux, pour ce qui est du déploiement de leurs produits et services, et ceci pour des raisons qui sont diverses, que je me retiendrai de citer. Pour preuve, ni Amazon, Ebay,… ne sont disponibles ici et même Instagram, bien que disponible ici, n’offre pas la fonctionnalité “Shops” dans la sous-région, et cela après toutes les campagnes et pétitions organisées par des artistes et créateurs locaux, pour que ces fonctionnalités soient offertes ici. Aussi, ceux parmi ces géants qui prennent la peine de s’implanter, le font sans réel effort d’adapter leurs produits au contexte local, cela cause de gros problèmes d’accessibilité et d’expérience globale.
Donc, pour concrétiser l’idée de révolutionner la vente en ligne en Afrique, nous savions qu’il faudrait une proposition de valeur unique, adaptée aux réalités locales et qui puisse attirer vendeurs et acheteurs malgré le confort et la sécurité que ceux-ci ont déjà, à utiliser les réseaux sociaux et autres plateformes appartenant aux géants multinationaux pour satisfaire les mêmes besoins.
A cet effet, le premier pari était celui de faire, avec le peu de ressources que nous avions, une application mobile aux standards internationaux, qui pouvait faire tout ce que la concurrence proposait mais cette fois, en ayant l’utilisateur Africain au centre de l’eXpérience.
Challenge
Quoi de plus facile que de créer une application de vente en ligne… n’est-ce pas ? En effet, c’est ce que l’on pensait, mais le temps nous aura vite fait comprendre la réalité.
Pour la première version, le design sera fait sur Adobe XD, écran après écran, nous avons travaillé sans repos, pour fournir les interfaces aux développeurs dans les délais repartis, cependant, avec l’évolution du projet, nous rencontrions de plus en plus de problèmes de consistence et d’efficience, le travail devenait répétitif et lassant et cela nuisait à notre performance.
En effet, plus on évoluait sur le projet, plus on remarquait des carences, quant à notre processus de design. A chaque fois qu’il fallait mettre à jour ou remplacer un élément du design, il fallait faire les changements sur les éléments un par un par, écran après écran… Besoin de modifier la couleur du bouton principal ? Aucun souci, cela nous prenait juste 3 jours et quelques casiers de boissons énergisantes… le temps de changer la couleur du bouton sur tous les écrans.
Quelle galère, n’est-ce pas ? Il était temps de se poser les bonnes questions, ce projet était plus complexe qu’on s’était imaginé. Travaillait-on dur ? Oui, mais pourrions-nous travailler plus intelligemment ? Je pense que là était la bonne question. Comment travailler moins mais mieux, gagner en temps, être plus consistant et obtenir un meilleur résultat, ce qui nous donnerait plus de temps pour penser à d’autres choses, comme l’expérience globale de l’utilisateur.
Il nous fallait donc penser à cette application non pas comme une collection de pages, mais un écosystème composé de plusieurs éléments, des éléments tous dépendant les uns des autres, dont la modification de l’un, aurait des conséquences sur les autres. Il nous fallait introduire le design atomique, il nous fallait un Système de Design.
Processus de réflexion
Pour commencer, il nous fallait comprendre où est-ce que nous avions failli sur la première version et comment mieux nous y prendre pour la suite.
Pour ce faire, nous avons listé tous les problèmes auxquels nous étions confrontés. Après avoir abordé les problèmes que sont les répétitions, les longs délais pour de petites modifications, nous savions quelle erreur avait été commise dès le début et c’était d’avoir fait du design au niveau macro, sans penser aux composants un par un et aux éléments qui composent ceux-ci.
Mais par où commencer ? Comment mettre en place un écosystème de collaboration avec les autres designers pour que nous puissions évoluer et apprendre de nos erreurs ? Qu’est-ce que Google, Apple, Microsoft et autres géants tech ont en commun, qui fait que tous leurs produits soient si consistants et à grande échelle.
Nous avons donc fait une liste par ordre de priorité, des problèmes et de leurs solutions. Nous avons commencé par l’outil que nous allions utiliser.
Adobe XD vs Figma (Oui, en ce moment on se posait encore cette question)
Avant de penser à créer ce système de design, nous parlions souvent de la possibilité de switcher vers Figma, mais on ne pouvait se faire à l’idée de devoir recommencer tout le travail abattu jusque-là, juste pour quelques fonctionnalités de plus.
C’est pourquoi, quand nous avons compris que nous étions dans l’obligation de recommencer le travail pour le bien du projet, il nous fallait profiter de l’occasion pour aller vers Figma parce qu’Adobe XD, l’outil utilisé pour les premières interfaces, bien qu’étant un excellent outil, avait des carences à certains endroits et pour nos besoins, Figma proposait de meilleures fonctionnalités.
Nous avons donc fait la transition et après avoir mis en place notre environnement de collaboration, avons directement enchainé avec le système de design.
Brief:
Donkafele, né en 2016, se voulait une simple boutique en ligne spécialisée dans la vente de vêtements, d’accessoires et d’objets recyclés en nombre limité.
Aujourd’hui, ce modèle ayant évolué, Donkafele souhaite promouvoir l’économie circulaire en mettant en place une plateforme qui permettra aux utilisateurs de vendre et/ou acheter des pièces uniques de seconde main et de découvrir des créateurs indépendants à travers l’Afrique.
Motivations:
L’ Afrique, surtout celle Francophone de l’ouest, est souvent négligée par les géants internationaux, pour ce qui est du déploiement de leurs produits et services, et ceci pour des raisons qui sont diverses, que je me retiendrai de citer. Pour preuve, ni Amazon, Ebay,… ne sont disponibles ici et même Instagram, bien que disponible ici, n’offre pas la fonctionnalité “Shops” dans la sous-région, et cela après toutes les campagnes et pétitions organisées par des artistes et créateurs locaux, pour que ces fonctionnalités soient offertes ici. Aussi, ceux parmi ces géants qui prennent la peine de s’implanter, le font sans réel effort d’adapter leurs produits au contexte local, cela cause de gros problèmes d’accessibilité et d’expérience globale.
Donc, pour concrétiser l’idée de révolutionner la vente en ligne en Afrique, nous savions qu’il faudrait une proposition de valeur unique, adaptée aux réalités locales et qui puisse attirer vendeurs et acheteurs malgré le confort et la sécurité que ceux-ci ont déjà, à utiliser les réseaux sociaux et autres plateformes appartenant aux géants multinationaux pour satisfaire les mêmes besoins.
A cet effet, le premier pari était celui de faire, avec le peu de ressources que nous avions, une application mobile aux standards internationaux, qui pouvait faire tout ce que la concurrence proposait mais cette fois, en ayant l’utilisateur Africain au centre de l’eXpérience.
Challenge:
Quoi de plus facile que de créer une application de vente en ligne… n’est-ce pas ? En effet, c’est ce que l’on pensait, mais le temps nous aura vite fait comprendre la réalité.
Pour la première version, le design sera fait sur Adobe XD, écran après écran, nous avons travaillé sans repos, pour fournir les interfaces aux développeurs dans les délais repartis, cependant, avec l’évolution du projet, nous rencontrions de plus en plus de problèmes de consistence et d’efficience, le travail devenait répétitif et lassant et cela nuisait à notre performance.
En effet, plus on évoluait sur le projet, plus on remarquait des carences, quant à notre processus de design. A chaque fois qu’il fallait mettre à jour ou remplacer un élément du design, il fallait faire les changements sur les éléments un par un par, écran après écran… Besoin de modifier la couleur du bouton principal ? Aucun souci, cela nous prenait juste 3 jours et quelques casiers de boissons énergisantes… le temps de changer la couleur du bouton sur tous les écrans.
Quelle galère, n’est-ce pas ? Il était temps de se poser les bonnes questions, ce projet était plus complexe qu’on s’était imaginé. Travaillait-on dur ? Oui, mais pourrions-nous travailler plus intelligemment ? Je pense que là était la bonne question. Comment travailler moins mais mieux, gagner en temps, être plus consistant et obtenir un meilleur résultat, ce qui nous donnerait plus de temps pour penser à d’autres choses, comme l’expérience globale de l’utilisateur.
Il nous fallait donc penser à cette application non pas comme une collection de pages, mais un écosystème composé de plusieurs éléments, des éléments tous dépendant les uns des autres, dont la modification de l’un, aurait des conséquences sur les autres. Il nous fallait introduire le design atomique, il nous fallait un Système de Design.
Processus de réflexion:
Pour commencer, il nous fallait comprendre où est-ce que nous avions failli sur la première version et comment mieux nous y prendre pour la suite.
Pour ce faire, nous avons listé tous les problèmes auxquels nous étions confrontés. Après avoir abordé les problèmes que sont les répétitions, les longs délais pour de petites modifications, nous savions quelle erreur avait été commise dès le début et c’était d’avoir fait du design au niveau macro, sans penser aux composants un par un et aux éléments qui composent ceux-ci. Mais, par où commencer ? Comment mettre en place un écosystème de collaboration avec les autres designers pour que nous puissions évoluer et apprendre de nos erreurs ? Qu’est-ce que Google, Apple, Microsoft et autres géants tech ont en commun, qui fait que tous leurs produits soient si consistants et à grande échelle.
Nous avons donc fait une liste par ordre de priorité, des problèmes et de leurs solutions. Nous avons commencé par l’outil que nous allions utiliser.
Adobe XD VS Figma
Avant de penser à créer ce système de design, nous parlions souvent de la possibilité de switcher vers Figma, mais on ne pouvait se faire à l’idée de devoir recommencer tout le travail abattu jusque-là, juste pour quelques fonctionnalités de plus.
C’est pourquoi, quand nous avons compris que nous étions dans l’obligation de recommencer le travail pour le bien du projet, il nous fallait profiter de l’occasion pour aller vers Figma parce qu’Adobe XD, l’outil utilisé pour les premières interfaces, bien qu’étant un excellent outil, avait des carences à certains endroits et pour nos besoins, Figma proposait de meilleures fonctionnalités.
Nous avons donc fait la transition et après avoir mis en place notre environnement de collaboration, avons directement enchainé avec le système de design.
Le système de design
Les couleurs et la typographie: Cette partie était déterminante, le choix des couleurs devait refléter l’identité de la marque sans aller à l’encontre des bonnes pratiques de design, la typographie, elle, devait permettre une bonne lisibilité, un bon contraste pour permettre une meilleure accessibilité au plus grand nombre.
Les icônes: Les délais réduits ne nous permettaient malheureusement pas de faire toute l’iconographie à partir de zéro, nous avons donc pris comme base les icônes du Material Design de Google, nous y avons apporté des touches de personnalisation afin d’adapter au contexte et à l’identité de la marque.
Les composants: Pour faire face au problème de consistance et pour permettre une adaptation facile au fil de l’évolution de l’application, et ainsi largement optimiser le processus de design, il était indispensable de penser à l’application comme un ensemble modulaire et ainsi mettre en place des frameworks, composants réutilisables qui seraient faciles à faire évoluer et adapter à grande échelle.
J’ai ainsi mis en place un ensemble de composants, adaptables à tout type de scénarios, des boutons, champs d’information, menus de navigation,…
L’interface utilisateur
Après avoir mis en place un système de design en amont, faire les interfaces était devenu un jeu d’enfant désormais, il suffisait de glisser et déposer les composants
Qu’aurais-je appris ?
#DareToRestart le hashtag né de notre aventure, m’aura appris qu’il faut oser reconnaitre ses erreurs et recommencer sur de meilleures bases. J’aurais retenu que l’expérience utilisateur n’est pas que pour les autres, qu’elle commence par nous, comment on décide de travailler et de résoudre nos problèmes. Que faire du design ce n’est pas que les beaux écrans, que c’est le processus, la planification et l’eXpérience globale.