Redesign Resto.Paris Website

As the first real client project, I wanted to work for an ethical cause. I’m very sensitive to ecological & social issues of our century, I really wanted to get involved in something that have sense for me. Then because I’m really passionate about food & tech, I wanted to find a project in both fields. I knew an ethical label for restaurants in Paris, which I contacted to offer my service as a final Ironhack project. They introduced me to Resto.Paris, the collaboration between, Olvo, Ecotable & Coop Cycle.

When : last two weeks of January
How long : 2 weeks
How : everything remotely
Method : Design Thinking Process
Team : Amanda & Myself

The client :

Resto.Paris is a project born during the first lockdown. It is the union of :

- ​ Ecotable: the sustainable food label
- ​ Olvo: the bike cargo company and
- ​ Coopcycle : the cooperative for bike delivery.

This website, supported by the City of Paris, enables any eco-responsible restaurants to offer its healthy and sustainable food, in click & collect or delivery, to Parisian consumers.

Feel free to check their website and grab some amazing food in the best and eco-friendly platform : https://resto.paris/fr/

First, preparing Kickoff Meeting

The stakeholders interview is very important to understand what and why we are trying to achieve for the business and on what timeframe. At the end of the meeting you want to align and agree on the Final Project Goal with the client. We tried to find an ambitious but manageable piece of the problem that we could solve in two weeks. In other words, what were we designing for the next two weeks?

Nothing better then than to arrive well prepared ! In order to achieve that, we organized few activities with the stakeholders.

We first conducted a stakeholders interview, followed by multiples activities such as : listing our assumptions, desired outcomes, mapping the existing solution…

Here the brief we came up with at the end of the meeting :

Challenge the user experience of the Resto.Paris website from the homepage to the payment page.

Attention should be paid to the following elements:

- User education in the economic and social model of the platform
- The research bar and the presentation of partner restaurants
- Understanding of the Olvo x Ecotable x Coopcycle partnership
- Understanding of the order shipping method: click & collect and delivery
- Integration of customer support

Enroll in the Design Thinking Process

A great place to start is what many of you know as the “double diamond” process. It takes you through four main phases to get from the problem to the solution:

Double Diamond

• Empathize — building shared understanding and empathy
• Define — identifying key flows, challenges and pain points
• Ideate — ideate, sketch, low fi prototype
• Prototype — iterative design, test, and implementation

We created a UX strategic planning to organize our work and define each deadline for both client meetings and tasks to do.

Empathize phase : Research — let’s understand our users and context

Market Analysis

We conducted a competitive analysis to better understand the market of the food delivery. Without surprise, Uber and Deliveroo are the big winners of this market. They are two types of actors : the Platform-to-Consumer Delivery and Aggregator platforms. More than 2 out of 3 orders are made by an aggregator (Uber Eats, Deliveroo, DejBox, Glovo) or a virtual restaurant (Nestor, Frichti, Popchef, Foodchéri…).

The Food Service Vision firm estimated this market at 3.3 billion euros in 2018 in France and projects growth of 20% per year for the next 4 years. The market should therefore double by 2022!

Three major market challenges:

Environmental responsibility (packaging, transport, etc.)

Social responsibility (working conditions of delivery people, etc.)

Social responsibility (unbalanced diet, etc.)

Sources : Statista, Food Service Vision, Kantar, Les Echos Etudes

Lean Survey

First, I created a lean survey to understand how people perceive the delivery / click & collect system in catering and their expectations on this market.

We had very interesting figures that will enable us to lead our future solutions. Here a sample of data we’ve got from the survey :

91% of respondents have already used a delivery platform

89% of the respondent are sensitive to an eco-responsible approach

80% of the respondents considered that paying all actors of the value chain fairly is important

77% would agree to pay more for an ethical platform

We collected almost 120 answers

User’s interview : ”It’s good that the Uber Eat/Deliveroo monopoly is being pushed around by other players”

We conducted 6 user’s interviews that we split in 3 expert users and 3 non experts, meaning people who have ever used the platform and people who don’t. We structured our work with interview guide and each interview was supervised by the two of us, with one facilitator and one note-taker.

From the results we’ve got from the interviews, we created an affinity map to highlight the big main problems we should focus on.

Here the main insights from the interviews :

Top pains :

1. The UX of Resto.Paris platform is too complicated and full of blockers
2. Uniformity lack regarding the content of Resto.Paris website
3. Resto.Paris value proposition is unclear

Top Gains :

1. The selection of restaurants at Resto.Paris is highly appreciated.
2. Significant awareness among users regarding the hidden conditions and their impact
3. 80% of the respondents considered that paying all actors of the value chain fairly is important

Define phase : Analyze — affinity map, persona & journey map

In order to bring order in all the data we gathered, we worked through an affinity diagram which enabled us to organize our data into groupings based on their natural relationships. We came up with big categories such as : delivery concerns, huge amount of packaging, click & collect small use, investing on a good client support, resto.paris user frustrations, global mood regarding the classical model …

We chose to focus on one them, “against the classical model” group. We gathered all the pain and gain points regarding this topic (the one above) and start creating our user persona.

Please, let me introduce you Alexandra, the connected committed foodie!

Alexandra’s Goals :

• Find alternative platform with ethical commitments
• Take into consideration delivery man conditions (status, equipment & salary) as well as packaging and fair remuneration base
• Get access to local and healthy food through the delivery platforms
• Get access to mobile website or mobile app of food delivery with a user friendliness and intuitive environment (familiar interface)

Frustrations

• Annoyed by the opacity of the delivery platforms regarding the work conditions and their margin
• Frustrated about not finding alternative platforms
• Tired about the amount of food packaging
• Doesn’t feel satisfied with the classical client support of the platform

Motivations

• Be aligned with herself and her values
• Raise awareness among her inner circle about these issues
• Invest money in a more sustainable system and an eco-responsible company
• Use new technologies at environment’s service

Let’s know discover the journey map (as-is) she is going through when she orders something on Resto.Paris actual website :

Here, the main frustration points she is facing :

This exercice gave us a good perception of the Alexandra’s experience while she is traversing the path taken between having a need and getting that need met. Finally, we can see that the her goal is not reached with the actual website because too many blockers prevent her from ordering some food. We start seeing the first area of improvements.

From here, we wrote our problem statement, which is the following :

Alexandra, the committed foodie in the thirties needs an alternative platform of food delivery with ethical committments (fair rider conditions, eco-responsible restaurants, transparent & fair platform) because existing options such as Deliveroo or UBER eats are not aligned with her convictions and she wants to support sustainable companies through a friendliness and intuitive interface.

We will know that we reached our goal if Alexandra is able to order food on time and on her budget without compromising her beliefs.

Ideate phase : How Might We, Crazy’s 8 & feature prioritization, Info architecture

How might we be transparent regarding riders & partner restaurants earnings?

How might we help Alexandra explain to her colleagues why Resto.Paris is a better option than other platforms ?

How might we get a more uniform site at Resto.Paris while scaling?

We took the insights from the different interviews and we focused on turning insights into “How Might We” Statements. This helped the ideation sessions we did with other people.

We conducted 3 rounds of crazy’s 8. One just with the two of us, one with our client and the last one with two other designers.

With more than 40 ideas generated, we worked with the MOSCOW method. This led us to think of the possible features and try to categorize them by Must have’s features, Could have’s, Should have’s and Won’t have’s.

We finally chose to emphasize the redesign website on :

• Rethink completely the homepage and present each partner and competitive advantage
• Add filter feature
• Add the value chain repartition info somewhere in the user experience
• Change the research bar
• Make the resto.paris content consistent
• Add more info regarding resto.paris contraints during the user experience

Site map & User Flow

Actual Site map

In order to have a better grasp on what we should tackle on the website, I created the actual site map. It enabled us to understand that the architecture of the site map didn’t need to be changed. We needed to work more on the content of each page.

We chose to redesign the homepage, the search bar, design a filter screen, add new options, change the aspects of the blockers, change the design of the payment and confirmation page. Here the happy path of Alexandra, using the new website :

Prototype Phase : Low-fi, Mid-fi, Hi-Fi & Tests

From this user flow, we started creating the low fidelity wireframe in order to make our ideas more tangible. We get inspiration from multiple platforms, in the some field or not and sketched the first screens.

Mid-fi & Usability Tests

Before designing a more fully-functional prototype, we worked on the mid-fi and we conducted 5 users usability tests to get feedbacks on the different functions we implemented. We had a lot of feedbacks on the mock-ups we had created but mainly on small things, such as words, size of the buttons.

The first iterations came on the category page, where the header weren’t clear, and the size of the button too small. We also had a client feedback to highlight the resto.paris constraints :

Then, we had to tackle on restaurant page. Indeed, the choice of “Pick up” word and the impossibility to go back to the last page created some issues to the users. The client also advice us to add more info regarding the minimum amount of order, what we did by creating an info pop up.

One of our last task revealed another pain point on the payement page : it was impossible for our users to well understand the repartition of the order amount. We made it more clear.

UI Elements : Moodboard, Style Tile, Hi-Fi Proto

From here, we started working on the User Interface steps.

First, the moodboard to get inspiration of what tone and feeling we wanted to go for. We chose images, illustrations that represent the attributes of foodie, town of committed. Creating a moodboard is a great way to convey the design idea, lay a foundation and establish the theme of the project.

Since the client asked us at the last meeting before creating the full hi-fi prototype to use the main color of the actual website, we had to change some images to make it more consistent.

We worked also on the Style Tile to define the actual interface elements without defining the layout.

As the client wanted simple shapes, and minimalist style such as Notion, we went for strict forms, without radiant except for labels & tags, little color flattening but a more premium visual identity in view of partner restaurants. We changed also the actual logo just by moving some elements. We chose the Work Sans typeface, commonly used on the web, since a lot of our competitors use this rounded typo, reminiscent of the world of food, gluttony and roundness. Also, this typeface has a lot of styles which enabled us to make some contrast in the different info we displayed.

Usability Tests on the Hi-Fi

We conducted 6 others tests on the Hi-fi prototype, since it contains more design details, which can leave users better impression, especially for the specific elegant designs. Our users payed more attention to the details of the interface, and less on the logical side. This kind of test is suitable for the prototype that has already confirmed all the functions and only left parts of the details to complete.

We made some iterations on the homepage pictures for exemple. Users told us the first picture wasn’t relevant regarding Resto.Paris concept and didn’t transmit the values. We decided to add a slider with 3 pictures that represent well the actors and the business.

Then, since we tested on a phone, we discovered that the button were too small, again. We decided to increase the size of input elements, clickable texts, buttons.

Hi-Fi video

Responsive website

As we had to make a responsive website, you can see our work on the Hi-Fi prototype of the desktop part.

Homepage

Category & Restaurant pages

Desirability tests

Finally, we conducted a desirability test with more than 10 designers to get their impressions and validate that our UI changes had positive impacts.

Next steps and key learnings

After 2 weeks designing for Resto.Paris, I would recommend them to :

• Finish the hi-fi prototype for the desktop part
• Code the new website and add the changes
• Create an interface for the BtoB offer
• Create contente for a blog part to improve their SEO

Key Learnings :

• The kickoff meeting is sooo important, just to frame the work and the do’s and don’ts of the project. For example, the client asked us to change the main color after spending hours creating a moodboard, if we had agreed on this from the start, we would have saved time.
• Organizing your Figma is like, crucial ! We had so many pages, assets, styles. Fortunately I decided to clean and organise it as often as possible. It makes also easier to transmit the deliverables to the client at the end of the project.
• Create components, seems like a nightmare at the beginning but
  this can be a great time saver.
• When you work in a team, always promote to do the same task and put in commun to get the find the better solution.

To conclude, I really enjoyed working on this project, above all because I wanted to take part to an ethical project, improve it through my skills, and help this kind of initiative to spring up. The several interviews I conducted where very enriching and reassuring to see that many people want to change the codes of uberization in our society. Then, I really liked the collaboration with the client which was smooth and pleasant. They also warned us about the technical constraints from the web dev side which I really appreciated to understand better the job that has to be done after. Then, globally, I love working as UX/ UI designer, I think this job is intellectually stimulating and I am literally passionate about the UI, which immerses me in this creative meditation that I also know while drawing. A delight !

I’m more than looking forward my next UX/UI mission !

Thanks for following me until here, I could say you’re quite brave.