Vancleef & Arpels
Product design
Year
2018-2019
Duration
4 months
Research methods
User personas – Card sorting – Customer interviews – Prototype testing
Context & role
Created with the support of Maison Van Cleef & Arpels, The school of Jewelry Arts offers courses, allowing you to learn about the world of jewelry through the experimentation of the actions of the artisan jeweler, the manipulation and the observation of precious stones. Training Orchestra is an internal tool used by the School of Jewelry Arts.
The intranet already existed, but the aim was to recreate one based on real needs of users.
My mission was to work on the entire UX/UI part of the project from the needs statement to the delivery of my design.
Problem statement
Many tasks are done manually and take a tremendous amount of time.
Discovery
This step was carried out in close collaboration with the product manager.
Different user profiles have been identified,
Daily user, finance, observer, e-commerce, HR…
Each profile has many tasks associated
“Inform and communicate”
“Save time” “Facilitate the work “Automate tasks”
“Centralize tools, don’t have to multiply tools”.
Definition
Make work more fluent by optimizing user journeys and save time by eliminating redundant and repetitive tasks.
Users will be able to focus on what really matters, delivering a good experience to school clients.
“Intuitive, easy to use, functional”.
Building the solution with users, one workshop every 2 weeks including a card sorting workshop
What we had at the end of all meetings :
A sitemap for each profile
Listing of all the functionalities requested.
All information for making user journeys
A validation of the structure of the homepage (by a low-fi wireframe)
Design
Hi-fi Wireframes
This step was realized in 3 weeks, the goal was to cover all use cases.
11 User journeys – 25 pages built – 2 appointments with the client and real users
After validating wireframes I was able to create the UI with another designer. The first step was to define the foundations and then build components using the Atomic design method.
This step was very important in the project given the number of screens to be produced.
Adaptive dashboard + creation of a design system
Displaying all the relevant information for each type of user and giving them quick access to functionalities (eg printing of the attendance sheet).
The complex nature of the intranet necessitated more than 25 screens covering all use cases.
To maintain consistency and ensure efficient design to dev handover, I developed a modular design system based on reusable components and their states. Every component can be rearranged and combined with others while maintaining design consistency and recognizable UI patterns for the user.
Smart planning
Learnings
Make sure that the whole team knows how to use tools we use
We used Abstract to build and maintain the design system without a real knowledge of the tool.
Result : we wasted some time to synchronize with developers.
Another learning, don’t forget client needs can evolve during the conception, so try to work with them closer.
