Intergation of a product return system

Bien ou Bien return process

Year
August 2021
Role
UI designer
Company
Bien ou Bien
Bien ou Bien return process

Context

Company

Bien ou Bien is a new marketplace based on ecological, local and ethical goods. Each product on the marketplace has to follow strict rules such as being produced in France, Europe or under a Fair Trade label, using ecological or recycled materials, having a low carbon impact... The goal of Bien ou Bien is to promote the reasonable consumption of long lasting products.

Project

The project around Bien ou Bien return process project begun just after the launch of the marketplace. Bien ou Bien had been launched as a first version with the most basic functions of a marketplace and we needed to add new ones such as user accounts or handling of returned products. For this project, the different return cases such as exchange or refund needed to be taken into consideration. Before going into design, those cases had been developed in the form of user flows and we had found technical solutions to manage them.

Tools used for this project: Notion, Miro, Figma

Prototyping & design

My job started from wireframes designed by the rest of the team. They had used our current components and UI layout to produce those first visions of the future UI.

Wireframes of the return process UI
Wireframes of the return process UI

Thanks to the design system and components I had previously created, I was able to quickly turn our wireframes into proper UI screens. This was a very useful approach since our return cases contained around 10 flows and a hundred screens. I was able to quickly design all of them, turn them into working prototypes and iterate.

UI of one product return flow
UI of one product return flow

After some modifications, we discovered new cases and problems while testing the prototypes. We solved those issues and were able to validate all of the flows. The next step was then to provide the development team with a series of desktop screen.

Desktop screen of our product return UI
Desktop screen of our product return UI

The management of returning products being extremely complex we also needed to build new components and document them for our development team so they would be able to properly code our designs. That's why we made large UI boards documenting each state of the components depending on cases and flows.

Components states
Components states

A returning process usually happening both in the marketplace UI and on the customer / seller inboxes we had to design a series of emails that would work simultaneously with our new UI. Those emails were designed at the same time to ensure consistency and to include them in our testing flows.

Mail states
Mail states

Follow UP

The Bien ou Bien return flow project allowed me to start working on this new marketplace and to test the design system that I had just built from the UI kit provided by Bien ou Bien's previous design team. This project was challenging since it required to quickly understand how to modify a product while following its rules and design system. The return flows were also complex interactive UI that needed a lot of attention to ensure the consistency of all cases and possibilities.