Objective

Ensure consistency across our Customer Store Solutions by building a system, a combination of a UI library, components, patterns, guidelines and good practices on how to use these elements.

 

Company

Dunnhumby

Timeline

November 2021 - March 2023

 
 
 

Role

Lead designer
UX designer
UI designer
Product owner

 

Teams I collaborated with

Product, Engineering, Design team

 
 

Skills

User Research, Facilitator, User experience, Interaction Design, User Interface, Product Thinking

 

Tools

Sketch, Adobe XD, Figma, Html/CSS

 
 
 

Timeline and process

 
 

Background

User need

 
 
 
 
 

Business need

Our Design System is the representative of a coherent UI, UX and ergonomics that will be respected by all. It is a source of truth for the brand.

 
 
 

Challenge

Dunnhumby’s Customer Store Solutions products have been designed and evolved without the help of a system to keep their experience consistent. Building and maintaining a Design System from scratch without slowing down our ongoing work was a real challenge, and a responsibility that I enjoyed taking on.

 
 
 

User research

As part of my research on this project, I have looked for and gathered all previous documentation and libraries created in the past few years. I then conducted interviews in order to understand what we had been missing using these instead of a design system and validate my assumptions. This Design System is internal to Dunnhumby, which gave me access to a large panel of end users on all different fields: designers, contractors, developers, engineers, product managers and product owners.

 

This is the first comparison table I have done to identify opportunities.

 
 

Study

Thanks to the output of my research, I have been able to compare all the previous documents, including an online component library, built a few years ago by the engineering team. My next step has been to gather everything together, and prune down the library to only what would be needed by our end users. The main difference between a library and a system is this: a library provides access to every different variation of a component, when a system provides the users with a coherent and consistent approach on how to use the best component for a particular matter.

 

This is one page of the Design System showing the CTAs, their variations and stages, as well as the corresponding good practices.

 
 

UX/UI design

This project has been tackled micro step by micro step in order not to shake our ongoing processes up to hard. After pruning and cleaning down the current library, I then rebuilt all the necessary components and their enhancements in Adobe XD, our design tool.

 
 
 
 

Outcome

After a few months managing this whole process by myself, I have managed to build a dedicated team of UX designers, UX writes and developers to ensure the long life of our design system.

We have started a migration to our new design tool: Figma, and I became the Lead UX designer and well as the Product Owner and manager of this project.

I have grown up with this project, taking over more responsibilities, new hats, and sharing my passion for UX and design.

 
 
 

Reflection

Learnings, key takeaways, things I would have done differently…

 

Use new technologies at the service of design

I believe in the benefits of artificial intelligence, provided it is used intelligently. I think that by using it to assist my work as a UX designer, I could have saved time in my process.

 

Ideate, create, learn, iterate

I've always had the desire to learn more about my profession, ever since the start of my career. Learning and collaborating with technological advancements, staying up to date with innovations, new practices, and updates—all these allow me to continuously progress in my field. If I were to redo this project, I would take advantage of all the new features Figma offers, which would enable me to make this design system even more complete and useful.