The tools
We used Zeroheight for our documentation.
This allowed us to centralize our Figma files and Storybook components
The team
I was the lead UI Designer of AXA.fr within the Digital Factory team (a team composed of 10 UX and UI designers).
AXA.fr product
- 4 UX Designers
- 3 UI Designers
- 2 squads of 5-7 developers
Customer account product
- 1 UX Designer
- 1 Lead UI Designer
- 1 squad of 4-6 developers
History of Dune
Initialisation of a UI kit
At first, I collaborate with Cyprien Emblanc (Lead UI Designer of the customer account product) to put together our libraries on Figma. We were working on the same foundations (typographies, font size, colors,...) that's why we had to focus on the components.
During this period, we were working together to remove duplicates, write some documentations and update our components to allow them to be more versatile for both products.
Sharing has been beneficial!
Axa.fr was able to benefit from the multitude of cards and data visualization elements, while the customer account product was able to benefit from our inputs.
Aligning Figma and Storybook
Now that every designers were working with the same UI kit, we had to include developers in the process.
As the "customer account" squad already had a Storybook and was ready to launch the design system project, we decided to collaborate with them first.
At the beginning, we had a weekly meeting with the front developers to compare and align ourself to build the new structure and the naming of the Design System elements.
Initialisation of Zeroheight as truth source
Now that we had the same way of talking, we had to find a way to work together.
To do this, we decided to use Zeroheight which was the perfect tool to bring together design specifications from Figma and Storybook components.
🎉 Dune was born 🎉
Find out what It looks like today
New processes for contributors
Now that Dune was taking shape, we had to find how to make it grow.
As we were only 5 UI designers, as long as you were documenting your work, you could contribute directly to Dune.
To ensure that everyone was aligned, we blocked out our Tuesday afternoons to dedicate our time to Dune. This was a time when we could work on a new component, create documentation, refine Zeroheight, do workshops,...
At the end of this day, we had a meeting to do some design review and decide if it was possible to release a new version of Dune.
The next day, we had a meeting with the dev team to present and validate the new release.
Concrete example of a process with the radio button
Starting from a product need
When I was working on the redesign of the car application flow, I noticed how difficult it was for users to complete the form. In order to find his car insurance rate, He had to answer between 20 and 50 questions.
The mental overload of each step had to be challenged by a new component to break the repetitiveness and bring visual cues to help the user in his task.
Drafting a solution
As we already had an existing component on AXA.fr to select an answer from several choices, I didn't wanted to create a new behavior. That's why, I decided to create the most flexible component possible from the radio button.
In order not to forget any use case, I exchanged with the other designers to know the advantages they had in mind with this rework.
That's when I started playing with grids (vertical/horizontal), sizes (Small/Medium/Large) and variants (with/without image, with/without text, with/without price).
Measuring the impact
Once the new component drafted, I had to implement it in my flow to test the value of this major change.
The feedback from the focus groups was immediately positive.
When comparing our new user journey with those of our competitors, users found that our flow was more dynamic and made them want to go to the end.
Check the feasibility to publishing the component
After validating the value with the product, I wrote the design guidelines and shared the new component to the dev team.
Then we organised a peer working session with a front dev to finalise the documentation and find how to play with the flexboxes properties in order to get the right result.
Once we were aligned, I was able to present the new component on a Tuesday afternoon to release the new version of Dune with the component.
