Bonjour!

"A Sweet Story!"
A food delivery mobile app for a French patisserie & cafe

Image alt tag
Overview

Problem

Bonjour is a local French patisserie and cafe located in Vancouver, Canada. It specializes in cakes and meal options for breakfast and lunch (e.g. salads, sandwiches, quiches) and strives to deliver healthy, specialty dishes inspired by French cuisine. It needs a mobile app which to increase the number of orders and retain existing customers

Task

To create an ordering and payment app for a French patisserie and cafe

Users and audience

Bonjour targets customers who live in nearby districts and don't have time for cooking and workers in close area offices who want to have a healthy and tasty lunch

My role

My role was UX and UI designer of an app from conception to delivery

Images: unsplash.com

Project duration

September 2021- December 2021

Methodologies

I used user interviews, empathy maps, pain points, personas, user stories, user journey maps, problem statements, competitive audit, paper, and digital wireframes, mockups, low-fidelity, and high-fidelity prototyping, and usability testings, note-taking spreadsheet, affinity diagrams

Constraints

Location and time zone differences became the primary constraints for this project

Tools

Figma, Jamboard, Maze

My process

In my work I followed the Design Thinking Framework: 

Research

Secondary research

I started my work on the project with secondary research. I had to find out what is patisserie, what range of products do they usually sell, and what other services offer. After conducting the research I found out that while in France patisserie offers exclusively cakes (unlike boulangerie, for instance), in other parts of the world patisseries can sell besides cakes other kinds of products, including bread, sandwiches, salads, etc. 

This research outcome helped to inform the menu and specialization of the Bonjour patisserie.

Primary research

The next step was primary research – interviews with potential users. I wanted to understand the process and emotions that people experience when ordering food delivery. I also had to identify common user behaviors and experiences with food ordering and understand user needs and frustrations people experience during the process of ordering from a restaurant or a café.  I interviewed 5 people in person online.

Participants in user interviews: mobile phone users who order food through food ordering apps at least twice a month, aged from 18 to 65, generally prefer healthy meals and are ready to pay more for quality food. Participants included 2 males, 3 females, and people with different abilities including 1 user who isn’t fluent in English.

The user interviews revealed a number of pain points and frustrations users face during the food ordering process.

Pain points

Based on research I created an aggregated empathy map, personas and distilled major pain points: delivery takes too long; no reminder in the app (that the restaurant is about to close soon/order is ready for pick up/delivery is at the door, etc.) is frustrating for users; hard to switch between two or more addresses in the app; no information on nutrition value.

Personas and problem statements

Bonjour!

Personas

Problem statement

Samir is a busy freelance designer who needs a quicker, easier, and more accessible way to order meals because he does not have time for grocery shopping and cooking.

Problem statement

Marisa is a mother and a professional who needs healthy and calorie-balanced meal options to pick up quickly because she does not have time for cooking.

User journey maps

User journey maps allowed me to see the improvement opportunities for Bonjour! app.

Bonjour!

Samir Kumar

Goal: To find an easy and quick way to order meals

Bonjour!

Marisa Pacheco

Goal: To find an easy and quick way to order and pick up healthy meals

Competitive audit

In order to see what the competitors are doing and define their strengths and weaknesses, I conducted a competitive audit. Its goal was to compare each competitor's apps or mobile websites user experiences.

Bonjour!

Gaps

  • Both “Beaucoup” and “Thierry” (like a majority of bakeries and patisserie cafes in

  • Vancouver) don’t have a mobile app

  • Both “Beaucoup” and “Thierry” don’t have online order and quick pre-order services

  • Both “Beaucoup” and “Thierry” don’t have reward programs or perks

  • “Beaucoup” and “Small Victory” lack visual presentation of their products

  • All the brands analyzed have accessibility issues

Bonjour!

Opportunities

  • Produce menu and payment app for a French patisserie and café with assistive technologies

  • Provide pick up and delivery options

  • Offer rewards or perks for returning customers

  • Provide full ingredients and nutrition information on the items on the menu

  • Offer customization options in a menu

Summary

Creating empathy maps, personas, user journey maps, and conducting competitive audit helped me envision potential users that I would design for, come up with ideas for designs that truly support the users’ needs and solve their problems, and informed my ideation process on how to stand out from competitors on the market.

Designing early concepts

Creating user flow and low-fidelity wireframes

Bonjour!

User flow for Bonjour! app

Possessing all this information I outlined a user flow 

Bonjour!

Paper wireframes for Bonjour! app

I usually prefer to start wireframing with sketches. It allows me to iterate quickly on many design ideas. I sketched out paper wireframes for each screen in the main user flow in my mobile app.

Moving from wireframes to prototypes

After creating paper wireframes I turned them into digital wireframes and after transitioned to low-fidelity prototypes.

Bonjour!

The homepage low-fidelity wireframe for Bonjour! app

I made sure that my initial designs are based on the user research data

Bonjour!

Menu page low-fi wireframe of Bonjour! app

The initial designs addressed major pain points discovered during the primary user research

Usability Testing

Preparing and conducting usability testing

It was critical to test my early design concepts, so I created a short survey screener and recruited users to test my low-fidelity prototypes. I conducted a moderated remote usability study.  

The usability study allowed me to gain a deeper understanding of how users felt about my app. I came out of it with a number of valuable insights.

  • Users would like to see more descriptions of the items on the menu (like the weight or size of a dish and its ingredients).

  • Although users were able to perform a task, they would prefer to see more detailed navigation in the menu to find a specific dish quickly without going through the whole menu.

  • Some copy wasn’t clear to users, so there was an obvious need to use more accessible language when explaining to users about the reward program, its terms, and rewards. 

  • The usability study also revealed that users need more payment options.

View the usability study presentation

Refining

Mockups and high-fidelity prototypes

I developed mockups and high-fidelity prototype with the implementation of the insights of the usability study to improve user experience in the further versions of the app’s prototype.

Bonjour!

Early designs contained the text buttons “See nutrition value” on the menu page, on click it opened the nutrition info tab.

After the 1st  round of usability study, I removed the text button. The product’s image and title open to a separate page with product information.

2nd round of usability study

To ensure that the visual part of the prototype works well for users I conducted the next round of usability study. The testing revealed that users had difficulties during the checkout process. The design of the tabs on the checkout page needed revising. Also, users found some fonts too small, so fonts should be changed to be accessible throughout the app. Besides that some copy on the CTA buttons and category labels needed improvement.

Bonjour!

Affinity diagram for Bonjour! app

I synthesized the data from the 2nd round of my usability study on the affinity diagram

Bonjour!

Mockups

The second usability study revealed frustration with the checkout flow. To streamline this flow and prevent the tabs from messing up with the CTA button I changed the screen layout and simplified the flow.

Bonjour!

UI kit for Bonjour! app

UI kit

To keep consistency throughout all my designs, I created a UI kit identifying different types of UI elements and styles used in the mockups.

Bonjour!

High-fidelity prototype for Bonjour! app

High-fidelity prototype

The final high-fidelity prototype presented a cleaner user flow for ordering a cake/meal and checkout. It also met user needs for pickup and delivery options as well as nutrition value information.   

See the clickable hi-fi prototype here

Accessibility considerations

1

All the colors in the app were checked for contrast ratio. I used icons in the bottom navigation bar to make navigation easier.

2

I provided access to users who are visually impaired by adding alt text to images for screen readers.

3

All the animations and motions applied in the app meet the accessibility requirements according to W3C.

Final solution

Outcomes and lessons

Impact

The app makes users feel like Bonjour’s app thinks about how to meet their needs. Here are some quotes from users' feedback:

“This app is very easy to use, I wouldn't change anything."

“I think it is very easy, the menu is very clear, it looks like a very friendly and elegant café. I think everything looks very nice.”

"I would definitely use this app!"

What I learned

While working on the app I learned that market and competitive research is a very helpful and efficient tool. The competitive audit research that I conducted helped me overcome the main challenges of this project - a foreign location and market.

While designing Bonjour’s app, I also learned that user research and feedback are critical for the design process.

Usability studies and feedback influenced each iteration of the app’s designs.

Let's connect!
Do you need a designer or have a product idea?