Unblocked Software Growth through Design SystemDébloqué la croissance d’un logiciel grâce à un design system

EntryWriter had been built entirely by engineers. Without dedicated UX design, the product had no visual hierarchy, no clear navigation, and no clear goal. Users did not know what to do once they reached the dashboard, and this led to drop offs.

EntryWriter, l’environnement précédent, avait été entièrement conçu par des ingénieurs. Sans design UX/UI dédié, le produit n’avait ni hiérarchie visuelle, ni navigation claire, ni objectif lisible. Les utilisateurs ne savaient pas quoi faire une fois arrivés sur le tableau de bord, ce qui les amenait à quitter la plateforme.

The engineers created the software as well as they could, but there was no design system in place, and therefore, no components or reusable patterns. Every table, buttons and layout looked different from a page to an other. Because of that, the software looked unreliable and unprofessional.

Les ingénieurs avaient fait de leur mieux, mais aucun design system n’existait, donc rien n’était réutilisable. Chaque tableau, bouton et mise en page était différent d’une page à l’autre. La plateforme paraissait peu fiable et peu professionnelle.

The entire product had been built around one static use case: processing invoices. The software had to grow to include more document types to process, but the interface did not allow for that. The whole flow had to be thought differently in order to be scalable.

Le produit entier avait été conçu autour d’un seul cas d’usage : le traitement des factures. La plateforme devait évoluer pour gérer davantage de types de documents, mais l’interface et le parcours utilisateur ne le permettaient pas. Il fallait repenser toute l’expérience pour la rendre évolutive.

I reduced the amount of steps to process a document from 6 steps to 3 steps, which help reduce mental load. I made these steps clearer through buttons and copy, and linked each steps between themselves to reduce friction.

J’ai réduit le nombre d’étapes nécessaires pour traiter un document de 6 à 3, réduisant la charge mentale de l’utilisateur. J’ai rendu ces étapes plus claires et lisibles via les boutons et les libellés, et ai relié chaque étape entre elles pour améliorer la fluidité.

I built a design system alongside every iteration. I made sure to standardize every table, button and typography and document it to reuse it. It was an investment that slowed the first months down, but accelerated development after. Also, the whole software was visually more pleasant once everything was standardized, as both users and investors pointed out.

J’ai construit un design system au fil de chaque itération. J’ai standardisé chaque tableau, bouton et typographie durant ces itérations, et documenté le tout pour pouvoir le réutiliser. Cet investissement a ralenti le développement durant les premiers mois, mais l’a totalement accéléré par la suite. Le logiciel est aussi devenu visuellement plus agréable une fois standardisé, comme l’ont souligné utilisateurs et investisseurs.

During the rethinking of the flow, every decision was made with future document types in mind. I first had to understand fully what was needed to process different logistics documents, and then I was able to provide a flow and an interface that would scale for all future document types.

En repensant le parcours, chaque décision a été prise en pensant aux futurs types de documents qui allaient être implémentés. J’ai d’abord dû comprendre en profondeur ce qu’impliquait le traitement des différents documents logistiques, avant de pouvoir fournir un parcours et une interface capables de s’adapter à tous les futurs types de documents.

There was no existing user research data when I joined, and no budget dedicated. I had to understand the product and the sector well enough to make decisions I could defend. I studied how logistics professionals work with document-heavy systems, and I audited the existing software.

→ Build trust with users. Users process important documents through this software, it is important that every step be as clear as possible so that they know what happens to these documents.

→ Master manual control before automation. Even if AI processing is the end goal of this software, the manual flow is the foundation of the software and can not be neglected.

Aucune donnée de recherche utilisateur n’existait à mon arrivée, et il n’y avait pas de budget pour en obtenir. J’ai dû rechercher le secteur pour comprendre le produit suffisamment et défendre mes décisions de design. J’ai étudié comment les professionnels de la logistique travaillent avec des systèmes chargés en documents, et audité le logiciel existant.

→ Instaurer la confiance avec les utilisateurs. Les utilisateurs traitent des documents importants via ce logiciel ; chaque étape doit être aussi claire que possible pour qu’ils sachent ce qu’il advient de leurs documents.

→ Maîtriser le contrôle manuel avant l’automatisation. Même si le traitement par IA était l’objectif final du logiciel, le parcours manuel en est la base et ne peut pas être négligé.

There were so many things to fix: readability of document states, usability of the side views to take action on the documents, decision points that didn't have friction, broken flow... I had to prioritize, tackling the most important and urgent fixes first, the flow. Fixing the flow first allowed me to have solid foundations to design on, and the software was able to grow while I was fixing less urgent issues.

Il y avait tant de choses à corriger : lisibilité des statuts de documents, utilisabilité des side views pour agir sur les documents, points de décision manquant de friction, parcours cassé... J’ai dû prioriser, en m’attaquant d’abord au plus urgent : le parcours. Le corriger en premier m’a donné des bases solides pour continuer à concevoir, et le logiciel a pu évoluer pendant que je corrigeais les problèmes moins urgents.

In parallel with each design iteration, I standardized the system. Every new component was documented and reused across the software, so that little by little, everything would be standardized. The first months were slow on my end, and it was normal, creating a design system on an existing product is a long term investment.

En parallèle de chaque itération, j’ai standardisé le système. Chaque nouveau composant était documenté et réutilisé dans tout le logiciel, pour que tout se standardise petit à petit. Les premiers mois étaient lents de mon côté, et c’était normal : créer un design system sur un produit existant est un investissement de long terme.

Since its first iteration 1 year ago, the UDM has doubled (x2) client acquisition compared to the previous environment, Entrywriter.

Depuis sa première itération il y a un an, l’UDM a doublé (x2) l’acquisition client par rapport à l’ancien environnement, Entrywriter.

One year after the beginning of the implementation of the design system, my designing time dropped from 3-4 days per iteration to less than 3 hours. This metrics does not take into account the time the developers were spending designing before I arrived.

Un an après le début de la mise en place du design system, mon temps de conception est passé de 3-4 jours par itération à moins de 3 heures. Ce chiffre ne prend pas en compte le temps que les développeurs passaient à concevoir avant mon arrivée.

As much as validation is always to take with caution in business, investors and users did message us about the product becoming visibly more coherent and easier to navigate.

Même si les compliments sont toujours à prendre avec prudence en business, investisseurs et utilisateurs nous ont spontanément fait remarquer que le produit était devenu visiblement plus cohérent et plus facile à naviguer.

Bringing a designer in early helps avoiding full redesigns like this one. The cost of skipping it shows up later, in developer time, in rework, in a product that is not scalable, that is confusing and not pleasant to use.

Impliquer un designer tôt permet d’éviter des refontes complètes comme celle-ci. Le coût de ne pas le faire se paie plus tard : en temps de développement, en retouches, dans un produit non évolutif, confus et désagréable à utiliser qui ne retient pas ses utilisateurs.

Knowing precisely what the product, the industry, and your clients need allows you as a designer to start making good decisions that will save the company time in the long-term.

Savoir précisément ce dont le produit, le secteur et les clients ont besoin permet, en tant que designer, de prendre de bonnes décisions qui feront gagner du temps à l’entreprise sur le long terme.

If I could do things differently, I would introduce usability testing as best as I could. Even two or three sessions with real users would have validated assumptions that took longer to confirm through iteration alone.

Si c’était à refaire, j’intégrerais des tests d’utilisabilité du mieux possible. Même deux ou trois sessions avec de vrais utilisateurs auraient validé des hypothèses qu’il a fallu bien plus de temps à confirmer par itérations.