PROVISIONS DECISION

UX/UI Case Study Responsive Web App Sam Angelos

 PROJECT OVERVIEW

For this project, I selected the recipe responsive web

app. I had been wanting to discover new recipes and

meals to cook from home so I feel like this was the

perfect task for me. Eating takeout and other various

fast foods have had an impact on my wallet and

overall health so I wanted to design a website that

prioritized cost efficient meals that aren’t time

consuming. The target audience for this app is busy

people who are looking for ways to save time and

money on meal planning and cooking. This includes

students, working professionals, and anyone else

who wants to delicious food without spending a lot

of time or money.

OBJECTIVE

The recipe app will allow users to search for recipes.

The main goal of the app will be to allow users to

select recipes based on their budget. It will also

allow users to select recipes based on how long is

required to cook.

HYPOTHESIS

I believe that by providing a recipe app that

categorizes recipes by cost to make, and by time

required to cook, users will then be able to make

informed and efficient choices in their meal

planning and budget. Ultimately enhancing their

overall cooking experience, which in turn would

make them more likely to keep using the app.

 COMPETITOR OVERVIEW

MY NEW ROOTS, a recipe website

A competitive analysis is a critical part of the

ux design process, a competitive analysis

helps Ux Designers understand the landscape

of existing competitors, identify their

products strengths and weaknesses, and

develop effective product strategies. A deep

understanding of the other competitors in

the industry is crucial if you want to stand

out from the other competition on the

market.

KEY OBJECTIVE
Aims to inspire and educate individuals

about healthy eating and living. The key

objective is to provide a wealth of valuable

resources , including plant based recipes.

The emphasis is on whole foods, aiming to

encourage and promote healthy eating

habits and provide an abundance of

resources that inspire individuals to

incorporate these wholesome ingredients

into their daily meals.

OVERALL STRATEGY
My new roots offers a 3 tiered subscription

system. Each one more expensive than the

last but offering more exclusive content. Tier

1 is 5$ and offers access to all recipes and

weekly email updates. Tier 2 is 13$ and adds

a growing ingredient encyclopedia, articles

about various nutrition topics, downloaded

gallery of food photos, and access to a

curated recipe collection. Tier 3 is 17$ and

adds filmed cooking classes, video lectures,

interviews and podcasts with nutrition

experts, and access to all curated

collections.

MARKET ADVANTAGE
I believe the intimate nature of the website

forms a sense of belonging within a

community. A sense of belonging means a

user is more likely to develop a strong

attachment with the service. This connection

can foster user loyalty leading to repeat

business and long term engagement. Loyal

users tend to be more forgiving of occasional

shortcomings and are more likely to

recommend the site and its services to others.

MARKETING PROFILE
My New Roots is a Blog originally started in

2007 by Sarah Britton. She is a holistic

nutritionist and a certified nutritional

practitioner. She is also the main contributer of

STRENGTHS
the site itself. The site offers a subscription

decent social media presence (more than

system that includes a variety of holistic

100k followers on each

nutritional services including cookbooks,

community driven user engagement

recipes, workshops and much more.

strong services offered and strategically

OPPURTUNITIES placed through different subscription

levels
If outside funding was gained Sarah could

expand her business, for example as stated

before if she got an app made for my new

WEAKNESSES
roots

Looking through both mobile app

Adding more subscription levels and services

stores I see that there is no mobile

app version of the site

THREATS
site lacks a sleek and professional
Other competitor sites could undercut her

feel, could be cleaned up a bit,

prices and offer more professional

portions of the site feel incomplete .

services if they have more funding.

Other competitor sites look more

professional and modern and have better

usability

UX ANALYSIS
The site has decent usability and layout in my opinion. Im not a huge fan of the hamburger menu being

located in the center of the page. Also the text over the first picture is very difficult to read. Gives the

site kind of an amateur feel right from the jump considering that is the first thing you see when the

page is loaded. The navigation feels clunky, the location of the menu throws off the whole thing for

me. Also would have made the search bar always visible at the top instead of the user having to click

the menu for it to dropdown and be visible. The compatibility of the site is much cleaner overall on the

desktop browser considering the landscape mode on the mobile browser is nearly impossible to

operate. The site differentiates itself by creating a sense of belonging which can be a uni que selling

point. This can be used to attract new users from competitor apps seeking a more personali zed

experience. The call to action forms are located at the top of the desktop browser, they are slightly

more difficult to find on the mobile browser because they are hidden in the dropdown menu.
 USER PERSONAS
User personas are an essential tool for UX designers, as they
represent the needs and goals of the people who will be using the
product or service being designed. By creating user personas I can
ensure that I am creating a user experience that is tailored to the
needs of my target audience.

MVP OBJECTIVE
The recipe app will allow users to search for recipes. The main goal of the app will be to
allow users to select recipes based on their budget. It will also allow users to select recipes
based on how long is required to cook.

JOBS TO BE DONE & REQUIREMENTS

A "Jobs to be Done" (JTBD) section in a case study is crucial because it helps to focus on
the user's perspective and needs. JTBD is a framework that emphasizes understanding the
motivations behind what users need in order to create a successful iteration of your
current app.

JTBD RATIONALE REQUIREMENTS

When I select a recipe, I want to create a Creating a grocery list manually can be time Ability to select recipe and
grocery list of ingredients, so I can know consuming, especially when planning for automatically generate a grocery lis
what to buy in order to make the meal. multiple meals. An app that generates a Ability to add or remove ingredients
grocery list can help users save valuable time from the list

When I search for a recipe, I want to be Filtering meals by cost allows users to identify Ability to filter searches by cos
able to filter the results by cost, so I can recipes that fit within their budget. This helps Ability to enter a maximum price
find the most cost efficient recipe for my users make smart and economical choices. wanted into search bar
budget.

When I use a cooking app, I want to be With a user account, the app can tailor Ability to create a user profile
able to create an account, So I can save recommendations and suggestions based on
my favorite recipes. the users cooking preferences.

When I select a recipe, I want to be able Users can quickly identify recipes that fit their ability to filter searches by time needed
to see how long it takes to make the available time, allowing them to plan meals to prepare mea
meal, so I can be time efficient. accordingly. Ability to enter a maximum time frame
needed into search bar

When I use a cooking app, I want to see
high quality photos of the meals, So I can
see what the finished product looks like.
High quality photos make the dishes look
appetizing and visually appealing, enticing
users to explore the recipes further and try
them out.
Ability for users to upload high quality
photos of the meals after they make
the
ability for users to scroll through more
than one photo when they select recipe

USER FLOW DIAGRAM

User flows are an important
component for a case study and a
powerful tool for UX designers
because it helps the designer
understand the user’s journey and
identify any potential problems or
areas for improvement. A user flow
diagram can be a valuable way to
showcase ones skills and
understanding of UX design. It can
show potential employers that I
LEGEND
am able to think through the entry point
user’s experience and create user action
designs that are intuitive and
end of flow
easy to use.
start of flow

LOW FI WIREFRAMES
Using the above user flows I was able to develop some low fi wireframes. These are very basic,
but they get the job done and are able to effectively communicate the user flows of the app. I
will use these to conduct user testing next, to further test the viability of this current
iteration of the flows I have created.
 USABILITY TESTING
Conducting usability
testing is crucial to any
case study as it shows
potential employers
that I have the ability to
conduct research,
analyze data, and make
informed design
decisions based off the
data collected from my
research. Below is the
usability testing I
conducted on 3 testers
using my low fidelity
interactive wireframes.

GOAL & OBJECTIVES

The goal of this test is to
assess the learnability of
users interacting with the
recipe application for the
first time on mobile. I would
like to observe and measure if
new users understand the
project, its value, and how to
complete basic functions such
as logging in, and searching
for recipes based on price
and or the amount of time
needed in order to prepare
the recipe.

OBJECTIVES
Gather feedback feedback from users on overall usability of the ap
Determine how easy it is for users to find recipes they are interested i
Determine how easy it is for users to browse recipes by cost and tim
Determine how easy it is for users to apply search filters
Determine how easy it is for users to create a grocery list of ingredients for a recipe

RESULTS SYNTHESIS & ERROR RATING

ISSUE ERROR RATING SUGGESTIONS
I have this at a 2 because I
Sign up option not available 2 believe the option available
on home screen when clicking the menu is
enough.

There should be a hyperlink

Option to redirect to profile
after creating grocery list
Missing back button on
multiple screens
No search bar available on
home page
3 that says “go to profile” and
from there you are taken to
see your lists you have
created.
I will implement back buttons
4 on the top left of screens
that need them, this is
crucial for smooth
navigation.
I disagree with this being an
0 issue because there is a
search icon in the top left
corner.
MID FIDELITY WIREFRAMES
From my rounds of user testing I was able to apply the necessary changes needed to make this
iteration of the app ready to move forward in the design process. The main problem I discovered
from my testing was that my screens were greatly lacking back button navigation. Overall the
main struggle I had was just that, navigation or lack there of. This was addressed in my mid
fidelity wireframes.
PD PDSIGN IN
PD PD PD PD PD PD PD PD PD
OR
6 RESULTS MAX $50

SIGN UP
PIC ACCOUNT
SEARCH 4 tomatoes MAX 2hr

PIC PIC CREATED PIC FILTER BY

3 onions
2 chicken thighs PIC PIC
PIC
CREATE
GROCERY LIST
BROWSE
ACCOUNT YOU CAN NOW SAVE 3 carrots ADDED TO PROFILE
DESCRIPTION DESCRIPTION

DESCRIPTION DESCRIPTION
BREAKFAST
YOUR FAVORITE FISH TACOS MAX COST 1 cucumber KEEP HUNTING FOR
CHICKEN PITA
RECIPES
MORE RECIPES
LUNCH
MAX TIME
PIC PIC
EMAIL SEARCH CREATE LIST
DINNER

DESCRIPTION DESCRIPTION

PIC PIC PIC PIC RETURN INGREDIENTS AND INGREDIENTS AND

OTHER OTHER
DESCRIPTION DESCRIPTION
ABOUT US
DESCRIPTION DESCRIPTION
PASSWORD TO INFORMATION INFORMATION
HOME PIC PIC
PIC PIC DESCRIPTION DESCRIPTION

PIC PIC JOIN

DESCRIPTION DESCRIPTION

42 CREATE LIST
45MIN 25 CREATE LIST
20MIN

DESCRIPTION DESCRIPTION
PIC
DESCRIPTION

MOOD BOARD IDEAS

In a UI case study, where the visual aspects play a significant role, utilizing a mood board
ensures that the final design reflects a coherent and intentional aesthetic that aligns with the
project goals and user needs. This was a crucial step in deciding the overall look and aesthetic
of my app.

OR

MOOD BOARD 1 RATIONALE DECISION

modern sleek elegant look and I decided to go with mood board
approach, lighter colors, less heavy number 2 because of the use of the
feel. color red and the boldness look for
the typefaces and icons. I want to
MOOD BOARD 2 RATIONALE convey an app that is wallet and user
grounded down to earth approach with friendly and I think the down to earth
darker, more warm colors. bold fonts feel and warm colors hammer that
and icons. point home better than mood board 1.
 HI FIDELITY WIREFRAMES AND FINAL STYLE GUIDE
The transition from mid-fidelity wireframes to high-fidelity wireframes involves a methodical
process that aims to add detail, visual elements, and refine the design while maintaining the
structure and functionality established in the mid-fidelity stage. Using my mood board I was able
to apply the decided upon colors and typography to bring these to life. I also created a final
style guide that can be used to ensure my design integrity is maintained though out the app. I
also created and finalized 3 breakpoints, small, medium, and large. These represent the
different screens my responsive app may be displayed on and the different layouts that will be
displayed on each.
PD PD PD PD PD
PROVISIONS DECISION
PROVISIONS DECISION Sign
PROVISIONS DECISION in PROVISIONS DECISION PROVISIONS DECISION PROVISIONS DECISION
or
Sign up

Explore
BBQ CHICKEN BBQ CHICBrea
KEN kfast 2 FISH TACOS BBQ CHICKEN OUR
FAVORITE
OUR
HEALTHY
COLOR PALETTE
MEALS MEALS

Style Guide
18 45MIN 18 Lunch
45MIN
14 22MIN 18 45MIN
Dinner These classic crispy fish tacos are This Delicious BBQ chicken platter
COS T
TIME COS T

EFFICIENT
TIME
EFFICIENT a mouthwatering delight. Served is marinated with a smokey tangy
EFFICIENT EFFICIENT barbeque sauce. Each bite is a
with tilapia and coated in a light
About us crispy batter, adding a burst of flavor explosion, with the charred
flavor to each bite. Served with a edges offering a good contrast to
hot sauce. the juicy interior.
Dominate Secondary Accent Header
INGREDIENTS INGREDIENTS CC2BC4 BFBBBD 111010 FFFFFF
4 tomatoes 2 Chicken breasts TYPOGRAPHY

Mitr Typeface
3 onions 1 bottle bbq sauce TEX NACHOS
2 Tilapia filets 1 bottle seasoning
2 FISH TACOS 2 FISH TACOS 20 25MIN
3 Carrots 3 Carrots
14 22MIN 14 22MIN 1 Cucumber 1 Cucumber
UNDER
$20
UNDER
20 MIN
Head 1 Mitr Bold 40px
Create list Create list Head 2 Mitr Bold 32px
BUTTONS Head 3 Mitr Bold 24px Body Copy Mitr Regular 16px
Head 4 Mitr Bold 16px These classic crispy fish tacos
Edit list Edit list PRIMARY SECONDARY Head 5 Mitr Regular 16px are a mouthwatering delight.

PD PD Join Edit list

Served with tilapia and coated in
a light crispy batter, adding a
burst of flavor to each bite.
PROVISIONS DECISION PROVISIONS DECISION Served with a hot sauce.
Return to home
CLUB SANDY TERTIARY
Max $40 Create list sign in
FILTER BY 10 10MIN
Max 1hr
Account PD PD Confirm list ICONS
Max $ Created! PROVISIONS DECISION PROVISIONS DECISION FAST
LUNCH
CHEAP
DINNER
Search
INGREDIENTS
Max time 4 tomatoes
3 onions
2 Tilapia filets
Search Return to home 3 Carrots

PICTURES
PD
1 Cucumber

Email
Confirm list PROVISIONS DECISION
One of the central themes of the app is the
use of only high definition pictures of food.
Max $40
Password 4 RESULTS Max 1hr
Images should capture food in its most
appetizing and enticing form, highlighting Ui Elements
?
textures, colors, and details that make the
Join
dishes irresistible.
Search bar Expanded card
Already have an account?
sign in
2 FISH TACOS
BEEF NOODLE
1hr
FILTER BY $30
14 22MIN
16 25MIN These classic crispy fish tacos are
a mouthwatering delight. Served
Max Time with tilapia and coated in a light
crispy batter, adding a burst of
flavor to each bite. Served with a
hot sauce.
Max Cost
INGREDIENTS
PD RICE PILAF
Small card 4 tomatoes
3 onions
PROVISIONS DECISION BBQ CHICKEN
2 Tilapia filets
12 15MIN
18 45MIN 3 Carrots
1 Cucumber
Pattern
Grocery list
created!
EGGS POKE
10 10MIN VOICE
Return to home
The language should be conversational and approachable, like chatting with a
friend who loves cooking. Avoid jargon or overly formal terms. Make users feel
RED CHICKEN confident in the kitchen. Use encouraging phrases and celebrate small victories.
22 25MIN
Use inclusive language that welcomes users from all backgrounds and skill levels.

PROVISIONS DECISION PROVISIONS DECISION PROVISIONS DECISION

Sign in
or Sign in
Sign up or
Sign up
Home
BBQ CHICKEN Home
BBQ CHICKEN
Delicious BBQ
chicken platter 18 45MIN Explore
Breakfast
Delicious BBQ
chicken platter 18 45MIN
Explore

Breakfast
BBQ CHICKEN
COST
TIME Lunch Delicious BBQ
EFFICIENT EFFICIENT Lunch chicken platter 18 45MIN
Dinner COST
TIME
About us EFFICIENT EFFICIENT Dinner

About us COST
TIME
EFFICIENT EFFICIENT
MEALS MEALS

2 FISH TACOS
Crispy fish tacos
with hot sauce 14 22MIN

2 FISH TACOS
Crispy fish tacos
with hot sauce 14 22MIN

2 FISH TACOS
Crispy fish tacos
with hot sauce 22 14MIN
RESPONSIVE BREAKPOINTS MOCKUPS

SMALL
BREAKPOINT
MEDIUM
BREAKPOINT

LARGE
BREAKPOINT
FINAL MOCKUPS
 FINAL THOUGHTS
If I could of done one thing differently it would be to conduct more user testing,
specifically on my high fidelity final designs to see how they were perceived. I also
would have done a little bit more research in to different websites and their
different breakpoints. That was were I found the most trouble when designing this
particular responsive web app. Determining what content to prioritize and display on
smaller screens while maintaining the essence of the user experience can be tough.
Adapting content without losing the overall integrity of you design can be a delicate
balance. I believe I succeeded in meeting the criteria of this project because I
developed an app that centers around recipes that can save you time and money.
This is a rather unique feature that solves a problem most competitors aren't.