Coffee Shop App
Victor J. Viquez
Project overview
The product:
Coffee Shop Store is a regional Coffee store located in
the downtown, Coffee Shop is dedicated to provide the
Preview of selected
best coffe in downtown target customers and office polished designs.
workers in downtown who lacks time and have big
orders to place and pick.
Project duration:
October 2021- February 2022
Project overview
The problem: The goal:
Busy office workers and customers who lack Design an app for Coffee Shop App that allows
of time to place a big order and with for it. users to easily place an order and pick up from
the counter .
Project overview
My role: Conducting interviews, paper and
Lead UX Designer digital wireframing, low and high-
fidelity prototyping, conducting
usability studies, accounting for
accessibility, and iterating on designs.
● User research
Understanding ● Personas
the user ● Problem statements
● User journey maps
User research: summary
I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs. A primary user group identified through research
are office workers from the downtown who place many times big orders and don’t have time to
wait for their order.
This user group confirmed initial assumptions about Coffee Shop customers, but research
also revealed that time was not the only factor limiting users from placing an order from Coffee
Store.
Other user problems included go to restaurants in-person to pick up their order.
User research: pain points
1 2 3
Customize
Time Delivery option
the order
Write one to two Write one to two Write one to two
sentences reflecting sentences reflecting sentences reflecting
on the pain point listed on the pain point listed on the ain point listed
above and how it above and how it above and how it
will guide designs will guide designs will guide designs
moving forward. moving forward. moving forward.
Persona: Amy
Problem statement:
Amy is a busy working
assistant who needs to
place customize orders
in advance, because she
doesn’t have enough
time to wait for the
order.
User journey map
Mapping Amy’s user journey
revealed how helpful it would
be for users to have access to Image of user
journey map
a dedicated Coffee Shop app
.
● Paper wireframes
Starting ● Digital wireframes
the design ● Low-fidelity prototype
● Usability studies
Paper wireframes
Taking the time to draft
Image of paper
iterations of each screen of wireframes including
the app on paper ensured five different
versions of the same
that the elements that screen and one
image of the new,
made it to digital refined version
wireframes would be well-
suited to address user pain
points. For the home
screen, I prioritized a quick
and easy ordering process
to help users save time.
Digital wireframes
As the initial design phase
Insert first wireframe
continued, I made sure to Clickable icons
example that
with the image
base screen designs on of the drinks demonstrates design
thinking aligned with
feedback and findings from user research
the user research.
Digital wireframes
Options to pick
up the order
Place a order from the app in
Insert second
fast and easy wireframe example that
demonstrates design
thinking aligned with
user research
Checkout cart
creating
feedback for
the action
Low-fidelity prototype
Using the completed set of digital
Screenshot of
wireframes, I created a low- prototype with
fidelity prototype. The primary connections or
prototype GIF
user flow I connected was
building and ordering coffee, so
the prototype could be used in a
usability study.
View the Coffee Shop App
Usability study: findings
I conducted one round 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
1 Underline and make more
recognizable the clickable icons
2 Add more customized features during
the journey
3 Customize more features to pick up
the order
Refining ● Mockups
● High-fidelity prototype
the design ● Accessibility
Mockups
Before usability study After usability study
Early designs allowed for
some customization,
but after the usability
Image of Image of
studies, I also revised the selected selected
screen before screen after
design so users see all the usability study usability study
customization options
when they note that the
image icons are clickable
High-fidelity
prototype
https://www.figma.com/p
Screenshot of
roto/tKBkgQWpWJ9NVOY prototype with
WOA9zA0/Untitled?page- connections or
prototype GIF
id=0%3A1&node-
id=67%3A5&viewport=24
1%2C48%2C0.5&scaling=
scale-down&starting-
point-node-id=67%3A5
Accessibility considerations
1 2 3
Provided access Used icons to Used detailed
to users who are vision help make imagery for Coffee
impaired through adding navigation easier. options to
alt text to images for help all users
screen readers. better understand
the selection.
Takeaways
Going forward
●
● Next steps
Takeaways
Impact: What I learned:
While designing the Coffee shop app, I learned
The app makes users feel like Coffee
that the first ideas for the app are only the
Shop app really thinks about how to
beginning of the process. Usability studies and
meet their needs.
peer feedback influenced each iteration of the
app’s designs.
Next steps
1 2
Conduct another round of Conduct more user
usability studies to research to determine
validate whether the pain any new areas of need.
points users experienced
have been effectively
addressed.
Let’s connect!
Thank you for your time reviewing my work on the Coffee shop app! If you’d like to
see more or get in touch, my contact information is provided below.
Email: victorj.Viquez@gmail.com
.
Thank you!
