2. The product:
MOCHI cat food vendor provides tasty and healthy cat
food products located in Yangon,Myanmar. The shop
has its own app with online deliverable systems in order
to purchase fresh and delicious large varieties of cat
food just with a mobile phone.
Project overview
Project duration:
Over 8 months to fully polish as a final project.
(August 2022 - April 2023)
3. The problem:
Fulfil the lack of high quality cat food products
nearby.
Project overview
The goal:
Deliver fresh and tasty cat foods to all over the
world with just one easy click.
4. My role:
From researching and brainstorming the ideas
to high fidelity product.
Project overview
Responsibilities:
● User Research
● Branding
● User flows
● Ux writing
● Visual design
● Prototyping
● Information architecture
● Usability testing
6. User research: summary
I have conducted an online survey test including 5 questions about how they order cat food,
why they can’t choose the right food for their cats and their age. Thanks to this survey, I can make a
group of my target users who are age limit between 20-63 who are obviously the owners of one or
more cats at home.
This user group clearly shows their frustration of lacking high quality fresh and healthy cat
food groceries to go buy in-person for their cats. Also, they face the challenge about finding the
right kind of food their cats would love keeps delaying their time.
7. User research: pain points
Time
Couldn’t have the right
decision for their cats’
favorite cat food just in
one place delays their
time.
Place
Hard to find the cat food
store nearby.
Accessibility
Very rare amount of cat
food vendor app is the
only reason of
inaccessibility for cats
and their owners.
IA
Most of pet food apps
have restricted payment
method made the users
difficult to order.
1 2 3 4
8. Persona: Andrea
Problem statement:
Andrea is a busy doctor
who works all day and
night long needs a quick
and easy way to order
healthy food for her cats
Because she has no time
to choose from one pet
store to another.
9. User journey map
Image of user
journey map
Mapping Andrea’s user
journey revealed how
helpful it would be for
users to have access to a
dedicated MOCHI cat food
vendor app.
10. ● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Starting
the design
11. Paper wireframes
I have faced several iterations
of brainstorming ideas with
paper wireframes to acquire
easy to use and well-suited
user flows for the app. In the
photo beside, I put some
active and playful layouts, in
addition of easy navigation
and menu bars to get better
user flows of the app.
Image of paper
wireframes including
five different
versions of the same
screen and one
image of the new,
refined version
Stars were used to mark the elements of each sketch that
would be used in the initial digital wireframes.
12. Digital wireframes
According to feedbacks
and reviews for the paper
wireframe, I have changed
some details in the digital
ones to better navigate the
main user flows and attract
the users at their first
experience.
This top menu
bar makes the
app clean and
easy to navigate
These content
blocks are put
with flexible
layouts to
enhance the
attention of the
user.
The bottom
menu bar plays
the role as FAB
for quick and
easy navigation
of user’s flows.
13. Digital wireframes
I have faced some challenges
about how to display the
product systematically to give
detailed info and visual
attraction.
As shown in the right photo,
I separate two buttons with
different hierarchy and
horizontal slider with
interesting layout to better
engaging with the app.
Another fun and
clean layout to
catch user’s
eyes.
This horizontal
sub title can be
easily moved
side by side to
see details.
Big, black and
bold action
buttons to make
a decision for a
user.
14. Low-fidelity prototype
Screenshot of
prototype with
connections or
prototype GIF
With a set of digital wireframes,
I can make lo-fi prototype using
these. The image beside shows
the lo-fi prototype of the main
user flow of the MOCHI app.
You can test prototype here -
MOCHI Lo-fi 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
Confuse with only one add to cart
button existing
1
Need to find past history
2
Round 2 findings
Need logging out button
3
User wants more suggestion for best
products
1
User is difficult to find category option
2
User needs dark mode because it is
too bright.
3
17. Mockups
I realized users want more
suggestions and categories
about what to choose next.
So, I add some options at
recommendation page to
improve my user-centered
design according to
usability test.
Before usability study 1 After usability study 1
Image of
selected
screen after
usability study
18. Mockups
After usability study 2, the
app still needs iterations to
refine some details.
As the photo shown, I
decided to put two CTA
buttons instead of only “add
to cart” one. That delayed
the main user flow before
but it would be better now
with two options available.
Before usability study 2 After usability study 2
Image of
selected
screen after
usability study
21. Accessibility considerations
Contains dark mode,
color blind mode,
changing theme
colors and languages,
even face id scanner
for vision impaired
and inaccessible
users.
Used several icons to
help make
navigation easier.
Used detailed
imagery for all the cat
food products for
visual engaging.
1 2 3
23. Takeaways
Impact:
This MOCHI app will make users feel their cats
are safe and healthy with their beloved favorite
flavours food while scrolling and discovering
the app.
One quote from peer feedback:
“This is the first app for only cat food I have ever
seen in my life and easy to navigate with detailed
facts. Plus, the colors of the app theme is
changeable and this is super cool.”
What I learned:
While designing the MOCHI cat food vendor
app, I learned that the first ideas for the app
are only the beginning of the process. Usability
studies and peer feedback influenced each
iteration of the app’s designs.
24. Next steps
Conduct another
round of usability
studies to validate
whether the pain
points users
experienced have
been effectively
addressed.
Conduct more user
research to determine
any new areas of
need.
Learn the trends to
follow the world.
1 2 3
25. Let’s connect!
Thank you for your time!
I will always improve my product and make it better and better.
If you’d like to
see more or get in touch, my contact information is provided below.
leonegan88@gmail.com
https://www.behance.net/phonelinnthant
