Estudo de caso de aplicativo de padaria, com cardápio e pedido online

1. Bakery App
Yara Ribeiro

2. The product:
The study product is an application where the menu of
all bakery products will be made available, where
purchases can be made by the same. The project’s
target audience is people.
Project overview
Project duration:
20-july-2022

3. The problem:
Bakery does not have a digital menu, it is
wasting time and orders due to th amount of
orders at peak demand
Project overview
The goal:
Make the full bakery menu available online and
quickly. Quickly place customer orders via
mobile

4. My role:
UX designer designing an app for Bakery for
digital menu creation and online ordering.
Project overview
Responsibilities:
Conducting interviews, paper and digital
wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, and iterating on designs.

5. Understanding
the user
● User research
● Personas
● Problem statements
● User journey maps

6. User research: summary
I conducted the interviews and created na empathy map to understand the users. At first,
the interviewess were young adults who love coffee and with a busy routine that do not
have time to make small meals at home. In this interview, it was indentified that the app’s
resnpons to purchase more than one product per order was giving na error and causing the
customer to waste considerable time from a tool that aims to reduce the time of the order.

7. User research: pain points
Accessibility
Improve access to
purchase more than one
product or order
Designer
Design of the order
confirmation page, improve
the visualization of products
and add the option to
increased the quantity of
the item already selected.
pagamento
Add Other payment
options
Pain point
Leave harmonic
homepage.
1 2 3 4

8. Persona: Anna
Problem
statement:
Anna is na intern at a large
company and loves coffe, but has
a lactose allergy. She prefers to
order her coffee at the end of
work and needs to order quickly.

9. User journey map
Image of user
journey map
Anna’s user journey mapping
revealed how useful it would be
for uses to have quickly access
to a dedicated app to show all
bakery products whit quick
ordering

10. ● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Starting
the design

11. Paper wireframes
Inthis step, the intention was to
crate the steps from entry,
choice and final payment of the
order in the app, in order to
visualize and understand the
flow of users.

12. Digital wireframes
On the home page I tried to
make the information as clear as
possible to make it easy for the
customer to find the desired
product.
Information of
the
recommended
items of the
day.
List of products
with the same
style and color
inside the
palette to be
harmonic.

13. Digital wireframes
Order confirmation
page, where
respondents
reported difficulty
selecting more than
one product
perorder.
Put btton to
add one more
unit of the
selected
product. Improve the
functionality of
the add more
button.

14. Low-fidelity prototype
Using the full set of digital
wireframes, I created a low-
fidelity prototype. The main
user flow I connected was to
order a cake so the
prototype could be used in a
usability study.
View Lo-fidelity prototype

15. Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from
wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the
mockups needed refining.
Round 1 findings
Functional payment page
1
No option to increase the amount of
selected product.
2
Round 2 findings
Difficulty adding one more product to the
confirmation page.
1
Difficulty accessing the payment page.
2
Confusing home page colors and layout.
3

16. ● Mockups
● High-fidelity prototype
● Accessibility
Refining
the design

17. Mockups
For the homepage, I brought a
color Harmony to all the product
fotos within the color palette,
highlighting the items of
greatest preference and
promotion. For better customer
viewing
Before usability study After usability study
Image of
selected
screen after
usability study

18. Mockups
Added unit increase
button and improved
add more button
functionality.
Before usability study After usability study

19. Mockups

20. High-fidelity
prototype
View the Hi-fideity Prototype
https://www.figma.com/proto/1nOo
fVcsKZr6gHvJWHpSpw/Untitled?nod
e-id=1%3A2&scaling=min-
zoom&page-id=0%3A1&starting-
point-node-id=1%3A2

21. Accessibility considerations
Home page with a cleare
description and photo of
the products inside the
palette, making the
desing more harmonious.
Insert put to increase the
amount of the product
already selected in the order
confirmation page.
Fnctionlity improves the add
more button
1 2 3

22. ● Takeaways
● Next steps
Going forward

23. Takeaways
Impact:
The app makes users feel that the bakery app
really thinks about how mee their needs.
A quote from peer feedback:
“ It’s eay, intuitive and very pratical to order.
What I learned:
While designing the Bakery app, I learned that
the first ideas for the app are only th beginning
of the process. Usability studies and peer
feedback influenced each iterarion of the app’s
designs.

24. Next steps
Improve the visual desing,
based on the data
provided by the survey.
Enter the delivery option
in the app
1 2

25. Let’s connect!
Thank you for your time reviewing my work on the Bakery app! If you’d like to
see more or get in touch, my contact information is provided below.
Email: yara.cris.ribeiro@gmail.com
Website:

26. Thank you!