Missions principales

👩💻 Pour l'équipe Rakuten DX, j'étais en charge du design UI de l'application web (lead UI). Rakuten DX aide les entreprises à concevoir leur application mobile grâce à un outil WYSIWYG et no code. Mes principales missions étaient :

• créer une interface utilisateur cohérente sur toute la plateforme
• développer le design system et le passer de sketch à la figma
• coacher toute l'équipe sur la façon d'utiliser le design system et figma (car ils n'utilisaient qu'une petite bibliothèque sur sketch, et l'entreprise voulait passer tout leur design sur figma)

‍

🚨 Mise à jour 2022 : le design system est désormais déployé sur chaque produit de l'équipe. Et c’est désormais une fonctionnalité principale de l’Appbuilder (uploader le système de conception du client pour avoir une cohérence dans le flux utilisateur)

‍

Onboarding

Nous avons commencé par l'intégration de la plateforme. Le but était de rendre la création de l’application très simple et fluide, avec une interface sobre, afin que l’utilisateur puisse personnaliser l’application, les couleurs, les polices…

‍

Concevoir la navigation de l'application

Nous avons ensuite ajouté la possibilité de personnaliser la navigation de l'application que l'utilisateur est en train de créer. Avec la possibilité de créer :

• une bottom bar(icônes, noms, liens, couleurs…)
• un menu Hamburger (icônes, noms, liens, couleurs…)
• des onglets (nombre d'onglets, noms, liens, couleurs…)

Concevoir le contenu de l'application

L'utilisateur peut désormais également créer, gérer et personnaliser le contenu de l'application avec :

• Des éléments de base tels que des titres, du texte, des boutons, des images…
• Éléments de navigation
• Mises en page

‍

Design system

Nous sommes passés d'une petite bibliothèque de composants sur sketch à un véritable design system sur figma. Lorsque j'ai commencé à travailler pour Rakuten DX, l'équipe avait déjà travaillé sur une bibliothèque sur sketch, où ils rassemblaient certains éléments de l'application tels que des composants :

Des typos et des couleurs de bases :

Quelques inputs et CTA :

Mais cette bibliothèque n'était pas exhaustive et nécessitait vraiment quelques règles et documentation, pour que l'équipe et le futur UI Lead puissent mieux comprendre comment utiliser les composants et pour que le design system puisse évoluer.

Nous avons également dû le créer sur figma car toute l'entreprise basculait tous ses projets sur cette application.

Malheureusement l'équipe ne connaissait pas figma et aux design system, j'ai donc organisé quelques réunions tout au long de ma mission afin :

- d'évangéliser le sujet du design system :

-de les former sur figma avec des projets concrets comme passer des plans de travail de sketch à figma, recréer des composants et ajouter des couleurs et des polices à la bibliothèque de figma par exemple.

‍

‍

⚠️ article en cours d'écriture