CARESTO
Recipe Nutrient calculator
app for a restaurant
Project overview
The product:
App for a local metropolitan restaurant(Caresto) which
focus is not just on feeding, but on healthy calculated
meals for its customers. Caresto”s target customers are
busy workers and commuters who lack time to prepare
meals for themselves and/or family.
Project duration:
January 2020 to April 2020
The problem:
Busy commuters and workers lack time to
prepare healthy nutritive and calculated meals
for themselves and their families
The goal:
Design an app for Caresto that helps
customers calculate nutrients, calories and
order healthy dishes
My role:
UX|UI designer designing an app for Caresto
from conception to delivery
Responsibilities:
Conduct interviews, paper and digital
wireframing, Low and high fidelity prototypes,
usability studies, accounting for accessibility,
and iterating on designs
Understanding User
● User research
● Personas
● Problem statements
● User journey maps
summary
Conducted interviews and came up with an empathy map to better understand the users I’m
designing for and their needs. Came up with a couple of personas and the primary group was working adults who don’t have time to cook/can’t cook and have health preferences
The research also revealed its not just time which is the factor hindering cooking at home. Some users actually can’t cook and with all the diet health preferences make it even more difficult
pain points
Working adults have
little or no time to
prepare meals
TIME
Commuters and workers
have limited finances to
higher chefs to prepare
healthy meals for them
and and/or their families
Finance
Platforms for ordering
food are not equipped
with assistive tech
Accessibility
Lack of customization,
nutrient and calorie
calculators for users with
diet and health
preferences
IA
Persona: Penjo Baba
Problem statement:
Penjo is a is a busy banker
in a big national bank who
needs easy access to
healthy recipe nutrient
calculated meals because
if he can’t cook himself
and if he doesn’t will have
health complications.
User journey map
Penjo’s journey map helped
me visualize how useful it’ll
be for users to have and
use Caresto
Starting
the design
● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Paper wireframes
Taking time to iterate on paper different home screens and elements helped come up with wireframes which when digital will be suitable for user pain points. I prioritized on quickly having access to meals the user might like so they go straight to modifying
This is so users
can easily order what they already
like
This is so users
can easily order Helps make menu finetuned and direct for faster search what they already like
Button lead to
specific menu
for selected
diets
Digital wireframes
As the initial design stage
continues, i made sure the
digital frame with respect
feedback from research
Digital wireframes
Easing navigation was a priority and also having elements with icons and text to help assistive technology
To ease back
and forth flow
Ease navigation
and screen
reader friendly
Low-fidelity prototype
Using digital wireframes, i was
able to create a low fidelity
prototype of the principal user
flow. The flow is selecting a meal,
modifying and ordering meals so
can be used for usability study
View Caresto low fidelity
prototype here
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
users need clarity on meals selected in menu
users need clear optimization information in calculator
Recipe nutrient calculator is a little
confusing
Round 2 findings
Checkout has unnecessary steps
Recipe nutrient calculator is a little
confusing
Refining
the design
● Mockups
● High-fidelity prototype
● Accessibility
Mockups
Early design gives room for some customization. After usability studies and some insights, i added options like add to cart element in menu to help users know what they have selected and that it has been added to cart
Digital wireframes
Second usability study had some frustrations because of one to many steps in the checkout flow
Mockups
High-fidelity
prototype
The final high fidelity prototype has cleaner and clearer user flow for adding, modifying and calculating recipe nutrition and checkout. It also has more customization and accessibility
View Caresto High fidelity
prototype here
Accessibility considerations
Included an option of
variety of language
selection to increase
accessibility of a variety of
users .
Used icons to help ease
navigations.
Added text to imagery
and hierarchy to help with
screen readers for users
who are vision impared.
Going forward
● Takeaways
● Next steps
Takeaways
Impact:
Users feel the Caresto actually gives them a
place to order meals with clear preferences to
what they particularly need.
The goal:
With designing Caresto i learnt a lot gets better
as the process goes. And usability studies
really have you iterate on little changes you
missed seeing which intend have great significance.
“The recipe nutrient calculator is good but it's the ingredients that really get me. Really nice because i can be allergic to olives and not know its in the dish till i have consumed. So knowing and able to modify is a big plus”
Next steps
More usability studies to
be sure all pain points are
met.
More research and user
feedback to determine
more areas of need and
or update.