expertises techniques

Design System : la fusion du design et du développement

Une démarche pour améliorer l'ergonomie et booster la productivité.
scroll to content

Concevoir une expérience utilisateur qui soit à la fois ergonomique et consistante peut s'avérer compliqué. L'approche Design System consiste à mettre en place un référentiel de composants uniques, adaptés à sa marque voire déclinables pour du multi branding. Les gains sont multiples : expérience utilisateur unifiée, cycles de développement et conception de pages plus rapide, meilleure maintenabilité de son application.

D'où vient le Design System ?

L'ancêtre du Design System a été popularisé par Twitter et s'appelait Bootstrap. Il s'agissait de la bibliothèque de composants la plus populaire dans les années 2010. Elle présentait l'avantage de facilement embarquer tout un ensemble de briques à utiliser sur le front de son application afin d'accélérer le développement.

Airbnb s'est ensuite approprié la démarche associée, dite de “Design System”. En effet, très grands utilisateurs de ReactJS, ils ont tout de suite perçu l'importance de l'approche composants. Cependant, dans des applications aussi volumineuses, il devient rapidement complexe de propager un branding ou encore de modifier le comportement de tous les composants identiques. Ils ont donc décidé de tendre vers une démarche proche de celle que proposait Bootstrap mais avec leur propre librairie de composants.

L'approche Design System consiste à la mise en place d'un référentiel unique de composants. Le paradigme composant est porté par tous les frameworks frontend modernes tels que ReactJS, AngularJS ou Vue. De plus, des briques open source telles que Storybook qqui facilitent la mise en œuvre d'un Design System sont déployables très facilement.

Mettre en place un Design System c'est avant tout simplifier le travail de l'équipe de développement. Chaque composant est traité de manière unitaire. Il devient alors bien plus simple de constituer de nouvelles pages pour son application avec une intervention minime de la part de son équipe créative.

La conception d'interfaces ergonomiques et unifiées est un enjeu clé aujourd'hui. Grâce au Design System, votre équipe technique pourra produire elle-même ses propres pages en respectant les principes d'ergonomie préalablement définis par vos designers.

Quand réaliser un Design System ?
01

Proposer une UI (interface utilisateur) unifiée

Les Design System permettent de designer des UI unifiées car les parcours seront conçus sur base des composants disponibles dans le Design System.

02

Proposer un produit en marque blanche

De plus en plus de produits en SaaS proposent de la marque blanche. Ceci peut s'avérer complexe à mettre en place, en particulier lorsque l'on veut offrir de la flexibilité sur la personnalisation. Le Design System résout cette problématique en vous permettant d'injecter des variables qui seront par la suite votre marge de manœuvre pour modifier à la fois le branding de l'application, mais également des comportements adaptés au public. Vous pourrez par exemple proposer une expérience de navigation différente selon que votre public soit très sensible aux applications ou au contraire plutôt novice.

03

Homogénéiser un parc applicatif varié

Le Design System est également la meilleure manière de conduire une stratégie d'homogénéisation de son parc applicatif. Le fait de partager une bibliothèque de composants au sein de toutes vos applications vous offre l'opportunité de centraliser en une seule base de code l'ensemble de votre branding. Vous pourrez ainsi faire évoluer votre parc à moindres frais et vous assurer une cohérence et une consistance, aussi bien graphique qu'au niveau des comportements.

04

Pour des back office

Les applications de type back office sont l'exemple même des applications qui réutilisent toujours les mêmes briques. Des tableaux, des menus, des blocs d'information, des dashboard. En dehors des règles métiers et des données qui y figurent, chaque page réutilise des composants similaires. Ceci peut rapidement devenir ingérable lorsque l'application prend de l'ampleur. Grâce au Design System, le développement de l'application revient à assembler des legos. Les cycles de développement sont réduits et la phase de recettage est également plus aisée.

Tests utilisateurs à revoir et à partager

Vous avez une intuition, une idée, une envie… Mais est-ce la bonne ? Correspond-elle à des besoins utilisateurs ? Est-elle différente ou va-t-elle au-delà de ce qui existe déjà ? Avez-vous un business modèle et la feuille de route qui garantissent une mise en œuvre réussie ?

C’est à ces questions et à bien d’autres que répond la stratégie produit. Notre méthode pour la dérouler : associer planning stratégique, écoute utilisateurs & acteurs de votre écosystème à la rigueur d’une feuille de route bien calibrée.
Nos Design Systems

Nos références :

Logo-design-sprint-dc
Logo-design-sprint-dc
Logo-design-sprint-dc
Logo-design-sprint-dc

Vous voulez en savoir plus sur le design system ?

Nous avons abordé le sujet dans le blog ! Les articles suivant vous permettront d'approfondir le sujet.
DESIGN, DESIGN SPRINT

Le design sprint : retour d'expérience après 2 années de pratique

Après plus de 30 design sprints réalisés au sein de l'agence sur les 2 dernières années, que penser de la méthodo de GVenture ? Peut elle être améliorée ?

Vous avez un
produit
en tête ?