![Cover_page-0001.jpg](https://static.wixstatic.com/media/9523eb_3302ee827e6f400aa1b9dc0b94e1f580~mv2.jpg/v1/fill/w_979,h_652,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Cover_page-0001.jpg)
![tools used logo2_page-0001.jpg](https://static.wixstatic.com/media/9523eb_3bac4a7ba9764cef9bf5582288842837~mv2.jpg/v1/fill/w_600,h_106,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/tools%20used%20logo2_page-0001.jpg)
Tools Used
Role
Researcher and UI/UX Designer
OVERVIEW
CHALLENGE
GOAL
-
La Brioche is a app used as a digital menu card for the French Patisserie.
-
Ordering of food can be done through this app.
-
Seat reservation can also be done through this app.
-
Nonnative people find menu cards difficult to understand as it is not in their native language which causes a language barrier.
-
People find waiting for the table time wastage when the place is full.
-
Standing in the queue and making the payment is a task for some people who are in hurry.
To build a app for a French Patisserie which can Provides services like
-
Online menu card
-
Ordering food
-
Making payments
-
Booking of a table.
Project Overview
Time Period
12 Weeks
Device
Mobile App
PROBLEM STATEMENT
A French patisserie wants to develop a menu and ordering app for its customers. The app should allow customers to view the patisserie's menu, place an order for pickup or delivery, and pay for their order through the app. The app should be easy to use, visually appealing, and reflect the patisserie's branding. Additionally, the app should have the capability to notify customers of any special promotions or discounts and allow them to earn rewards for frequent orders. The patisserie wants to streamline the ordering process for its customers, reduce wait times, and increase sales.
![mockup1_page-0001.jpg](https://static.wixstatic.com/media/9523eb_e9430bad1c71414a914d5f68acac938e~mv2.jpg/v1/fill/w_453,h_605,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/mockup1_page-0001.jpg)
DESIGN PROCESS
UNDERSTANDING THE USER
Competitive Audit -
A competitive audit was conducted between 3 competitors and the study was documented, to take deep dive into our market to know how the competitors describes themselves in the market.
We analysed every competitor alone to know about their - Target audience, Unique value prepositions, First impressions, Interaction, Visual Design and Content.
![Competative audit chart_edited.jpg](https://static.wixstatic.com/media/9523eb_9f2660cfcc994b8a99593a753dca6a6e~mv2.jpg/v1/fill/w_1028,h_1040,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Competative%20audit%20chart_edited.jpg)
USER PERSONAS
![Fruto_ Introducing Remote UX Workshops_page-0018.jpg](https://static.wixstatic.com/media/9523eb_22012c0dade0453eac75bc7fca6962c4~mv2.jpg/v1/fill/w_949,h_696,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Fruto_%20Introducing%20Remote%20UX%20Workshops_page-0018.jpg)
![Fruto_ Introducing Remote UX Workshops_page-0019.jpg](https://static.wixstatic.com/media/9523eb_1e3b24f40aab4abcb0c54f9396a1ea73~mv2.jpg/v1/fill/w_949,h_696,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Fruto_%20Introducing%20Remote%20UX%20Workshops_page-0019.jpg)
VALUE PROPOSITION
1
Different language options.
2
Pre order
options
3
Detailed
Description
4
Payment
options.
5
Easy
checkouts
USER JOURNEY
![user journey 2.jpg](https://static.wixstatic.com/media/9523eb_fc174ab0775f490b9b7b4e7a36641fb6~mv2.jpg/v1/fill/w_1427,h_572,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/user%20journey%202.jpg)
![Experience map template by Antoine Pezé.jpg](https://static.wixstatic.com/media/9523eb_9eaca458458b493daa9dc32775fcb2ce~mv2.jpg/v1/fill/w_1427,h_572,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Experience%20map%20template%20by%20Antoine%20Pez%C3%A9.jpg)
USER STORY
PERSONA 1
JOSEPH
As a new student in the city who has trouble understanding the language, I want to order at my convenience with language options, So that I can order food conveniently.
''
''
PERSONA 2
ELLIOT
As a cook who is on a budget and takes online bootcamps, I want to have a detailed information about my food and convenient ordering process, so that I can peacefully conduct my work while being outdoors.
''
''
USER FLOW MAP
1) Browse menu and and make payment
![User journey 3 (1).jpg](https://static.wixstatic.com/media/9523eb_2bbd40d02d9d4d788f16fe9df3a901bf~mv2.jpg/v1/fill/w_1591,h_895,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/User%20journey%203%20(1).jpg)
2) Order regular meal
3) Book a seat
PAPER WIREFRAMES
After collecting the information above I have come up with multiple options for the UI of the La Brioche app.
This is the final UI concept I have to consider which is best suited for this app.
UX design storyboard: Close-up storyboard.
Scenario: To make an order and payment of a regular customer at the patisserie.
![low-fidelity prototype_edited.jpg](https://static.wixstatic.com/media/9523eb_a01a660b4a9946e38d8848265d80936b~mv2.jpg/v1/fill/w_330,h_357,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/low-fidelity%20prototype_edited.jpg)
![low-fidelity prototype_edited.jpg](https://static.wixstatic.com/media/9523eb_57ecab61b6e84cffb40c1b20c7daf10d~mv2.jpg/v1/fill/w_329,h_369,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/low-fidelity%20prototype_edited.jpg)
![low-fidelity prototype_edited.jpg](https://static.wixstatic.com/media/9523eb_49ccb1f397224017975a1c1c84b1abaa~mv2.jpg/v1/fill/w_303,h_358,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/low-fidelity%20prototype_edited.jpg)
![low-fidelity prototype_edited.jpg](https://static.wixstatic.com/media/9523eb_1385a2b1b64b43858611ea8d064822d3~mv2.jpg/v1/fill/w_280,h_371,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/low-fidelity%20prototype_edited.jpg)
![low-fidelity prototype_edited.jpg](https://static.wixstatic.com/media/9523eb_8dc51e5cd57d4ef4908a838a433e56e8~mv2.jpg/v1/fill/w_268,h_358,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/low-fidelity%20prototype_edited.jpg)
![low-fidelity prototype_edited.jpg](https://static.wixstatic.com/media/9523eb_6648369ad0664e01becd26e12171e6ee~mv2.jpg/v1/fill/w_307,h_371,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/low-fidelity%20prototype_edited.jpg)
LOW-FIDELITY PROTOTYPE
![Degital low-fidelity prototype_page-0001.jpg](https://static.wixstatic.com/media/9523eb_a5e0ae26ed814547bd25cfbd946a1fa0~mv2.jpg/v1/fill/w_1061,h_1417,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Degital%20low-fidelity%20prototype_page-0001.jpg)
UI STYLE GUIDE
![page 1.jpg](https://static.wixstatic.com/media/9523eb_bb5a6764289e456eb2f4d28b4f3b484c~mv2.jpg/v1/fill/w_1380,h_2522,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/page%201.jpg)
![loading screen.gif](https://static.wixstatic.com/media/9523eb_5243de7ee18d43a7ad398e3dc180c8b2~mv2.gif)
UI SCREENS
![sodapdf-converted_Page_4.jpeg](https://static.wixstatic.com/media/9523eb_59caad623e7f4f18953116058dc98800~mv2.jpeg/v1/fill/w_1284,h_622,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/sodapdf-converted_Page_4.jpeg)
![sodapdf-converted_Page_1.jpeg](https://static.wixstatic.com/media/9523eb_6967480893984dbca53fe4dacef51046~mv2.jpeg/v1/fill/w_1284,h_1276,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/sodapdf-converted_Page_1.jpeg)
![menu to cart.gif](https://static.wixstatic.com/media/9523eb_5023d938bce84e26ad2b041969980938~mv2.gif)
![sodapdf-converted_Page_2.jpeg](https://static.wixstatic.com/media/9523eb_0df90864db0645df804e6d7baaa7e3d4~mv2.jpeg/v1/fill/w_1282,h_1283,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/sodapdf-converted_Page_2.jpeg)
![payment.gif](https://static.wixstatic.com/media/9523eb_9e643a5998454d31bacb1de7ff7b38cf~mv2.gif)
![sodapdf-converted_Page_5.jpeg](https://static.wixstatic.com/media/9523eb_17a591b33f094edd9b55198fc4418d48~mv2.jpeg/v1/fill/w_1282,h_1262,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/sodapdf-converted_Page_5.jpeg)
![regular meal.gif](https://static.wixstatic.com/media/9523eb_0f69ed4e1e4e47c3ae1ae27a477738b4~mv2.gif)
![2.jpeg](https://static.wixstatic.com/media/9523eb_461a568207074586ab871723485106b0~mv2.jpeg/v1/fill/w_1281,h_712,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/2.jpeg)
![table booking.gif](https://static.wixstatic.com/media/9523eb_20c6c9805ab14a07a1bb7216cc74d7db~mv2.gif)
USABILITY TEST
A Usability Test was conducted to eliminate any biases.
The test report and insights are as follows-
Study Details -
Research Questions
Participants
Methodology
●How much time do people take
to order food if they order after
coming to the place in person?
●How much time people take to
order their regular order everyday?
●What methods do people take
to make payment after ordering
the food.
●Where do people look for the
menu?
●How much time do people take
to search for their desired food?
# 5 participants
●2 male and 2 female
participants (age group
between 18-40 and between 40
- 65 ) in both categories.
One user which uses assistive
technologies and a user with
disability.
# 5 to 10 minutes
Remote India.
Unmoderated usability study
Users were asked to perform in
low fidelity prototype.
Themes found -
Theme 1
● 3 out of 5 participants found difficulty in
creating or editing their account
● but everyone completed it eventually.
● Not everyone were confused
"It is a bit difficult but i completed it ".
Theme 3
● 5 out of 5 participants did not perform
the booking of their meal activity.
● All the users were not able to perform
the booking of their regular meal activity.
“Ohh I guess i could not click it because this
portion is not designed yet”
Theme 2
● 4 out of 5 participants wanted no of
table during booking their table.
● Most people wanted to know the
number of people that can be occupied
in a table they are booking.
“The process is very easy and clear to
understand but I need the option to add of no
of tables to book instead of table number”
Theme 4
● 3 out of 5 participants wanted the
payment of the food to be after eating
their food.
● Most people want to pay at the
end of their meal and not beforehand.
" But i think that the payment option should be
after the eating during leaving the cafe and
not before.”
Research Insights-
![combine_page-0001.jpg](https://static.wixstatic.com/media/9523eb_490682aa0d094eefb28962d5dd75bab7~mv2.jpg/v1/crop/x_246,y_0,w_3446,h_3446/fill/w_201,h_201,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/combine_page-0001.jpg)
Unable to locate account section
![combine_page-0002.jpg](https://static.wixstatic.com/media/9523eb_6c55de4cf1a14dbbb962024b55232e85~mv2.jpg/v1/crop/x_246,y_0,w_3446,h_3446/fill/w_201,h_201,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/combine_page-0002.jpg)
Unable to select number of chairs
![combine_page-0003.jpg](https://static.wixstatic.com/media/9523eb_8c02e1a495374a478b1ca28cea9e91fc~mv2.jpg/v1/crop/x_475,y_230,w_2983,h_2982/fill/w_201,h_201,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/combine_page-0003.jpg)
Not able to book regular meal
![combine_page-0004.jpg](https://static.wixstatic.com/media/9523eb_aa42366a1ae44c8b94374fb6f8d546ab~mv2.jpg/v1/crop/x_246,y_0,w_3446,h_3446/fill/w_201,h_201,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/combine_page-0004.jpg)
Confused payment situation
Most of the users had
difficulty in finding their
profile section.
Most of the users were
interested in knowing
number of chairs also
and book according to it.
Users were not able to
book their meal because
it was not designed yet.
Most of the users wanted
the payment to be done
after the meal is done
eating and not before
DESIGN MODIFICATION
![sodapdf-converted_Page_2.jpeg](https://static.wixstatic.com/media/9523eb_a38f89f0d8584f9b9a971a73c67e6bbe~mv2.jpeg/v1/fill/w_1280,h_627,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/sodapdf-converted_Page_2.jpeg)
![table booking.jpeg](https://static.wixstatic.com/media/9523eb_3fd5d2c99c384bf583ffd872f2043b95~mv2.jpeg/v1/fill/w_1282,h_1164,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/table%20booking.jpeg)
![sodapdf-converted_Page_3.jpeg](https://static.wixstatic.com/media/9523eb_a8c7c77c151945e0bcffcbe373723074~mv2.jpeg/v1/fill/w_1283,h_1157,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/sodapdf-converted_Page_3.jpeg)
ACCESSIBILITY CONSIDERATIONS
-
Provision of sufficient contrast between foregrounds and background
-
Use of Colours, Pictures, Symbols and Text to convey information
-
Clear highlighting of interactive elements through colour, shape and borders
-
Provision of clear and consistent navigation options
-
Use of clear visual hierarchy in headings and text
-
Inclusion of image alternatives to text
-
Provision of different language options