CASE STUDY
SAINT MICHEL
Mobile app & responsive website
French restaurant mobile app & responsive web
February - April 2022
CASE STUDY
SAINT MICHEL
Mobile app
French restaurant mobile app & responsive web
February - April 2022
Project overview
The problem
Full-time executives often find themselves with very little time to leave their office and go out for lunch or buy their meals elsewhere.
The goal
Design a mobile application for the Saint Michel restaurant that enables users to conveniently order food online and specify the exact time they want it delivered to their office.
The product
Saint Michel is a French restaurant located in the financial hub of Santiago, Chile. The restaurant prides itself on preparing classic French cuisine, along with a variety of salads and desserts. They offer an extensive range of prices and promotions during lunch hours. Their target audience includes busy executives with full-time jobs, who work in the central district of Santiago and have limited time for lunch breaks.
My role
UX and UI Designer. Design a mobile app for Saint Michel, from its conception to the final prototype.
Responsibilities
Conduct interviews, prepare paper and digital wireframes, create low and high-fidelity prototypes, conduct usability studies, integrate accessibility features, and iterate on designs.
Understanding the user
By conducting interviews and creating empathy maps, I was able to gain a better understanding of the users’ needs. The research identified busy executives with full-time jobs as a primary user group who preferred a quick and convenient way to get their lunch without having to leave their workplace. These users valued time efficiency and convenience in their lunch choices.
While this user group confirmed the initial assumptions about Saint Michel’s customer base, the investigation also revealed other issues. In addition to the time constraints during lunch hours, the research showed that customers faced long lines when purchasing food and had limited access to healthy and delicious lunch options in the central district, where fast food options dominated.
Pain points
Time
Busy executives have limited time to spare during their lunch breaks.
Accessibility
Some food ordering applications lack accessibility and assistance features.
Navigation
Text-heavy menus and a lack of images in apps often hinder usability.
Persona and problem statement
Carlos is a financial advisor with a busy schedule, who requires a convenient way to order delicious, high-quality food with delivery options near his workplace. Since he spends a considerable amount of his lunch break going out to purchase food, this is especially significant to him, particularly due to his mobility impairment in one of his legs.
User - Journey map
Through examining Carlos’ journey map, it was evident that a specialized mobile application for Saint Michel would offer significant advantages.
Competitive analysis
In order to design an application that would be of value to the users, I conducted a competitive analysis of three French restaurants’ websites and one French product boutique. The analysis was based on six dimensions, and key elements were examined and evaluated.
Starting the design
Paper wireframe
To ensure that the digital wireframes would effectively address user pain points, I took the time to draft iterations of each app screen on paper. During the design of the home screen, I prioritized a quick and easy ordering process, minimizing the number of transition screens required to complete the order. The best options were selected to create the digital wireframes.
Digital wireframes
Based on research it was crucial to prioritize the essential items on the home screen to facilitate the purchase process and make it more convenient for users.
In order to design an app intuitive and easy to navigate I incorporated various features such as filters, a product list with images, and a screen for scheduling the order’s arrival time.
Low fidelity prototype
To conduct the usability study, I created a low-fidelity prototype that allowed the user to browse and select dishes, add them to the cart, pay for the order, and track the delivery. See low fidelity prototype.
Usability studies
To test the usability of the app, I conducted two rounds of unmoderated studies with five participants each, lasting between 20 and 30 minutes. For the first study, I designed a low-fidelity prototype that focused on the primary user flow of ordering a French dish and scheduling its arrival time.
The first round of usability studies generated crucial findings that were used to refine the digital wireframes and produce mockups with improved designs. The second study, which employed a high-fidelity prototype, highlighted areas in need of further improvement.
Round 1 results
- Based on user feedback, there is a need for a search tool with filter options when selecting a dish.
- Users found it difficult to navigate back and forward between screens. A bottom navbar was added.
- In addition, users emphasized the importance of using more signs and icons to facilitate navigation between screens.
Round 2 results
- Users found it hard to read the text in clear grey, due to the low contrast with the background. Same with icons.
- Users noted some titles and text were too small and hard to read.
- Users expected more details and information on the tracking delivery screen.
Refining the design
Mockups
The design was revised to include a bottom navigation bar, a search option on the top, and the app’s elements were rearranged to create a more consistent and cohesive order on the screen.
Color contrast for backgrounds, action buttons, and text was improved to comply with WCAG accessibility standards. Font sizes were adjusted.
The overall spacing on the app was improved, including paddings, margins, the relative distance of elements inside sections, elements size, and distribution on the screen.
More information was added on the tracking screen, such as the remaining time before arrival, and the option to change delivery address.
Accessibility Considerations
Screen readers
Clear and descriptive labels were added to interactive elements throughout the app.
Icons
The design incorporates easily recognizable icons to improve action button interactions.
Constrast ratio
Color scheme and contrast ratio comply with WCAG accessibility standards
Final designs
High fidelity prototype
The high-fidelity prototype of the app offered a cleaner and more intuitive user interface, with enhanced options for ordering food and making payments. This resulted in a more efficient and satisfying user experience. See high fidelity prototype.
Website with responsive design
Site Map
Style guide
Spacing
Responsive Designs concepts
Designs for a responsive website included mobile, tablet, and desktop devices.
Going forward
Learning
Impact
The app makes users feel that Saint Michel really thinks about how to meet their needs. Feedback from a user:
“It is an intuitive and easy-to-use application, in addition to allowing you to schedule the time of arrival or pick-up for lunch.”
What I learned
While designing the app, I learned that the first ideas are just the beginning of the process. Usability studies and user feedback influenced each iteration of the app designs.
Next steps
Conduct another round of usability studies to validate whether the pain points experienced by users have been effectively addressed. Conduct new user research to determine new areas for improvement.