Personas
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
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.
Samir Kumar
Goal: To find an easy and quick way to order meals
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.
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
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
User flow for Bonjour! app
Possessing all this information I outlined a user flow
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.
The homepage low-fidelity wireframe for Bonjour! app
I made sure that my initial designs are based on the user research data
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.
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.
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.
Affinity diagram for Bonjour! app
I synthesized the data from the 2nd round of my usability study on the affinity diagram
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.
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.
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.
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?