Overview

UX research

Findings

Wireframe

Design Proposal

Prototype

Details

Reflection

Role   UX/UI Designer (Individual Design Exercise)

 

Tool    Figma

           Photoshop

           Procreate

Tool    Figma

           Photoshop

           Procreate

overvIew

overvIew

overvIew

People need to create the most delicious, best sandwiches for parties, football games, or for something amazing for themselves.

“My Sandwich” solves the specific challenges that users might face in the timing, finding the correct ingredients, and sandwich-making processes with fun, simplicity, and flexibility in different contexts.

overvIew

People need to create the most delicious, best sandwiches for parties, football games, or for something amazing for themselves.

“My Sandwich” solves the specific challenges that users might face in the timing, finding the correct ingredients, and sandwich-making processes with fun, simplicity, and flexibility in different contexts.

01

In My Sandwich, categories and sections are managed in a simple and clear way.

02

Supportive visuals for the recipe steps and process bar to be easier to understand

03

I also considered suggesting sandwiches with the user's ingredients to save time.

Project Timeline

Project Timeline

Project Timeline

user research

user research

user research

Problem Scope & Target Audience

"People who cook at home" was the subject of this design exercise. However, I realized that people who don’t know how to cook may want to use the app to start from somewhere. In order to keep my scope clear, I decided to focus on people with busy schedules and who don’t want to spend a lot of time cooking. Some of their characteristics are:

  • People with busy working hours who don’t have time for cooking

  • People who have children and have challenges finding different and quick meal ideas

  • People who don’t know how to cook anything and want to learn cooking

user research

Problem Scope &
Target Audience

"People who cook at home" was the subject of this design exercise. However, I realized that people who don’t know how to cook may want to use the app to start from somewhere. In order to keep my scope clear, I decided to focus on people with busy schedules and who don’t want to spend a lot of time cooking. Some of their characteristics are:

  • People with busy working hours who don’t have time for cooking


  • People who have children and have challenges finding different and quick meal ideas


  • People who don’t know how to cook anything and want to learn cooking

User Interview & Storyboarding

​Scenario: An app to help users making original sandwiches as quickly as possible with suggested recipes

User Interview & Storyboarding

​Scenario: An app to help users making original sandwiches as quickly as possible with suggested recipes

Competitive Audit

My next step was to look at some of the existing products and see what pain points they were addressing. What I studied included one direct and one indirect competitor: the Sandwich Recipes app and the Smoothie Recipes app.

Both apps let users select their ingredients at home, select the special categories based on ingredients and track the cooking process.

One common drawback of these apps is that they provide a limited amount of accessibility features.

Competitive Audit

My next step was to look at some of the existing products and see what pain points they were addressing. What I studied included one direct and one indirect competitor: the Sandwich Recipes app and the Smoothie Recipes app.

Both apps let users select their ingredients at home, select the special categories based on ingredients and track the cooking process.

One common drawback of these apps is that they provide a limited amount of accessibility features.

"I feel very comfortable doing what I love, as well as cooking the food I love" Daniel, 22

Goals

  • Don’t spend extra time for cooking

  • Like cooking to relax

  • Choosing the food quickly

Frustrations

  • Can't decide on what he wants

  • Spend a lot of time for cooking

  • Have a busy schedule

Daniel would like to demonstrate his commitment to the job, complete everyday tasks efficiently, and eventually be trusted with increased responsibilities in the office. He enjoys the time spent working with his mentor on a campaign, he also enjoys doing other tasks like getting coffee and food for the office for an opportunity to network.

I feel very comfortable doing what I love, as well as cooking the food I love

"I feel very comfortable doing what I love, as well as cooking the food I love" Daniel, 22

Goals

  • Don’t spend extra time for cooking

  • Like cooking to relax

  • Choosing the food quickly

Frustrations

  • Can't decide on what he wants

  • Spend a lot of time for cooking

  • Have a busy schedule

Daniel would like to demonstrate his commitment to the job, complete everyday tasks efficiently, and eventually be trusted with increased responsibilities in the office. He enjoys the time spent working with his mentor on a campaign, he also enjoys doing other tasks like getting coffee and food for the office for an opportunity to network.

I feel very comfortable doing what I love, as well as cooking the food I love

findings

findings

User Stories and Personas

To inquire the pain points and current solutions, I interviewed 5 participants and created two personas

findings

User Stories and Personas

To inquire the pain points and current solutions, I interviewed 5 participants and created two personas

findings

User Stories and Personas

To inquire the pain points and current solutions, I interviewed 5 participants and created two personas

Goals

  • Breakfast and dinner with family

  • Make the kids happy

  • Sometimes being quicker

Frustrations

  • Can't decide on what she wants

  • Spend a lot of time cooking

  • Have a busy schedule

  • Decide on what she wants

  • Spend time for cooking

  • Have a busy schedule

Abbey is a teacher who lives in a small city and mostly works in the daytime. She is passionate about her job but sometimes has trouble managing the stress of teaching while also raising children. She prepares breakfast and dinner for the family on most days. She appreciates products that help her stay more organized and manage her time at work and at home.

I love being with my kids, I also love my job. It's great to have time for both

"I feel very comfortable doing what I love, as well as cooking the food I love" Abbey, 44

Goals

  • Don’t spend extra time for cooking

  • Like cooking to relax

  • Choosing the food quickly

Frustrations

  • Can't decide on what he wants

  • Spend a lot of time for cooking

  • Have a busy schedule

Abbey is a teacher who lives in a small city and mostly works in the daytime. She is passionate about her job but sometimes has trouble managing the stress of teaching while also raising children. She prepares breakfast and dinner for the family on most days. She appreciates products that help her stay more organized and manage her time at work and at home.

Goals

  • Breakfast and dinner with family

  • Make the kids happy

  • Sometimes being quicker

Frustrations

  • Can't decide on what she wants

  • Spend a lot of time cooking

  • Have a busy schedule

Abbey is a teacher who lives in a small city and mostly works in the daytime. She is passionate about her job but sometimes has trouble managing the stress of teaching while also raising children. She prepares breakfast and dinner for the family on most days. She appreciates products that help her stay more organized and manage her time at work and at home.

I love being with my kids, I also love my job. It's great to have time for both

"I feel very comfortable doing what I love, as well as cooking the food I love" Abbey, 44

Goals

  • Don’t spend extra time for cooking

  • Like cooking to relax

  • Choosing the food quickly

Frustrations

  • Can't decide on what he wants

  • Spend a lot of time for cooking

  • Have a busy schedule

Abbey is a teacher who lives in a small city and mostly works in the daytime. She is passionate about her job but sometimes has trouble managing the stress of teaching while also raising children. She prepares breakfast and dinner for the family on most days. She appreciates products that help her stay more organized and manage her time at work and at home.

Pain Points

Pain Points

Pain Points

Pain Points

Accessibility

  • Need a voice control support

  • Different categories of food

  • Explaining the process

  • Need a voice control support

  • Different categories of food

  • Explaining the process

Time

  • Spend too much time picking food

  • Having busy schedule

  • Spend too much time picking food

  • Having busy schedule

Different Options

  • Finding different meal everyday

  • Can not decide on what he wants

  • Can not find healthy and quick options

  • Finding different meal everyday

  • Can not decide on what he wants

  • Can not find healthy and quick options

Value of Product

Accessible

Fun suggestionsfor kids

Voice control support

Explaining the process for beginners

Supportive visuals

Fun suggestionsfor kids

Voice control support

Explaining the process for beginners

Supportive visuals

Helpful & Inclusive

Saving time

Easy to prepare tips

Checking the ingredients at home

Free to use

Saving time

Easy to prepare tips

Checking the ingredients at home

Free to use

Experiences

Suggesting frequently used items

Saving the recipe for later

Suggest different options

Different categories of food

Suggesting frequently used items

Saving the recipe for later

Suggest different options

Different categories of food

Wireframing

Wireframing

Wireframing

User Flow

After the user research, I considered that there should be two different flows in the application.

One of them is to proceed according to the ready-made sandwich recipes inside the application. The second is to proceed with the suggested sandwich recipes based on the ingredients the user has.

Wireframing

User Flow

After the user research, I considered that there should be two different flows in the application.

One of them is to proceed according to the ready-made sandwich recipes inside the application. The second is to proceed with the suggested sandwich recipes based on the ingredients the user has.

When users want to see suggested sandwiches based on their ingredients

When users want to see suggested sandwiches based on their ingredients

When users want to see suggested sandwiches based on their ingredients

When users want to follow a ready-made sandwich recipe inside the application

When users want to follow a ready-made sandwich recipe inside the application

When users want to follow a ready-made sandwich recipe inside the application

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

 

For the home screen, I prioritized a quick and easy process to help users save time. 

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

 

For the home screen, I prioritized a quick and easy process to help users save time. 

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

 

For the home screen, I prioritized a quick and easy process to help users save time. 

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Digital Wireframes & Usability Studies

During the usability study, participants completed specific tasks on lo-fi prototype

During the usability study, participants completed specific tasks on lo-fi prototype

1
In the early design, the names of the sandwich types appeared on the homepage. As a result of the user testing, it was revealed that it would be easier for users to list these varieties on the homepage.

1
In the early design, the names of the sandwich types appeared on the homepage. As a result of the user testing, it was revealed that it would be easier for users to list these varieties on the homepage.

1
In the early design, the names of the sandwich types appeared on the homepage. As a result of the user testing, it was revealed that it would be easier for users to list these varieties on the homepage.

2
In the first design, the bottom nav buttons were "profile" and "homepage" buttons. As users wanted easy access to their favorite sandwiches, the "favorites" button was added to the nav bar.

2
In the first design, the bottom nav buttons were "profile" and "homepage" buttons. As users wanted easy access to their favorite sandwiches, the "favorites" button was added to the nav bar.

2
In the first design, the bottom nav buttons were "profile" and "homepage" buttons. As users wanted easy access to their favorite sandwiches, the "favorites" button was added to the nav bar.

3
Users needed to see the sandwich ingredients on the sandwich types screen and add some sandwiches to favorites for later viewing. The page has been reorganized accordingly.

3
Users needed to see the sandwich ingredients on the sandwich types screen and add some sandwiches to favorites for later viewing. The page has been reorganized accordingly.

3
Users needed to see the sandwich ingredients on the sandwich types screen and add some sandwiches to favorites for later viewing. The page has been reorganized accordingly.

Affinity Mapping

I defined three most common themes according to the user testings

Saving list

Saving list

List organization

List organization

Navigation

Navigation

Affinity Mapping

I defined three most common themes according to the user testings. The main user needs are:

Saving list

List organization

Navigation

DESIGN PROPOSAL

DESIGN PROPOSAL

DESIGN PROPOSAL

DESIGN PROPOSAL

Deliverables

I wanted to show my design as stories of my two personas. Based on the pain points addressed, the proposed stories are

Story One: tracking a ready-made sandwich recipe process that is quick and easy

Story Two: picking the ingredients and finding the suggested recipe process

I wanted to show my design as stories of my two personas. Based on the pain points addressed, the proposed stories are

Story One: tracking a ready-made sandwich recipe process that is quick and easy

Story Two: picking the ingredients and finding the suggested recipe process

STORY 1 - Pick a ready-made sandwich

STORY 1 - Pick a ready-made sandwich

Daniel got home from work late and can't wait for a quick bite to eat. He grabed his phone and ....

Daniel got home from work late and can't wait for a quick bite to eat. He grabed his phone and ....

01
He opens up My Sandwich app on his phone and sees the homepage.

01
He opens up My Sandwich app on his phone and sees the homepage.

01
He opens up My Sandwich app on his phone and sees the homepage.

-This is an overview of all the sandwich options where each section has different types of ingredients.

-This is an overview of all the sandwich options where each section has different types of ingredients.

02
He sees the "Categories" section, finds the "Beef Sandwiches" option there, and likes “Chicken Sandwich”.

02
He sees the "Categories" section, finds the "Beef Sandwiches" option there, and likes “Chicken Sandwich”.

02
He sees the "Categories" section, finds the "Beef Sandwiches" option there, and likes “Chicken Sandwich”.

03
Daniel clicks "start" and prepares his sandwich in minutes by following the steps

03
Daniel clicks "start" and prepares his sandwich in minutes by following the steps

03
Daniel clicks "start" and prepares his sandwich in minutes by following the steps

-Feels relaxed because he does not need to think for a while and cook a meal with all his tiredness.

-Feels relaxed because he does not need to think for a while and cook a meal with all his tiredness.

STORY 2 - Pick suggested recipe based on ingredients

STORY 2 - Pick suggested recipe based on ingredients

Daniel is chilling at home with friends and he wants to make a new snack for guests. He has tomato, avocado, onion, and lettuce at home. He wants to check if he can match these ingredients in a sandwich.

Daniel is chilling at home with friends and he wants to make a new snack for guests. He has tomato, avocado, onion, and lettuce at home. He wants to check if he can match these ingredients in a sandwich.

01
He opens up "My Sandwich app" on his phone and clicks the “Make your sandwich” button on the homepage.

01
He opens up "My Sandwich app" on his phone and clicks the “Make your sandwich” button on the homepage.

01
He opens up "My Sandwich app" on his phone and clicks the “Make your sandwich” button on the homepage.

02
He selects the ingredients he has. There are a search button, category section, and favorite ingredients on the selection page

02
He selects the ingredients he has. There are a search button, category section, and favorite ingredients on the selection page

02
He selects the ingredients he has. There are a search button, category section, and favorite ingredients on the selection page

03
When he selects all of the ingredients he wants to use, he clicks the “My Ingredients” button where he reaches the list of what he has and clicks the “Find Recipe” button to see the suggested recipes.

03
When he selects all of the ingredients he wants to use, he clicks the “My Ingredients” button where he reaches the list of what he has and clicks the “Find Recipe” button to see the suggested recipes.

03
When he selects all of the ingredients he wants to use, he clicks the “My Ingredients” button where he reaches the list of what he has and clicks the “Find Recipe” button to see the suggested recipes.

-After picking the recipe, he can move forward with the recipe steps

-After picking the recipe, he can move forward with the recipe steps

PROTOTYPE

PROTOTYPE

PROTOTYPE

PROTOTYPE

If you want to try the interactive prototype of the app, you can click the link below to reach the Figma prototype

If you want to try the interactive prototype of the app, you can click the link below to reach the Figma prototype

If you want to try the interactive prototype of the app, you can click the link below to reach the Figma prototype

click here for hi-fi prototype

EVALUATION

EVALUATION

EVALUATION

EVALUATION

For usability testing, two of the interview participants try out the prototype and they reacted positively:

    - The registration recipe tracking process is really clear and efficient.

    - The voice assistant support is interesting and the participant would love to use it while making the sandwiches.

For usability testing, two of the interview participants try out the prototype and they reacted positively:

    - The registration recipe tracking process is really clear and efficient.

    - The voice assistant support is interesting and the participant would love to use it while making the sandwiches.

DESIGN DETAILS

DESIGN DETAILS

DESIGN DETAILS

DESIGN DETAILS

Keylines and Metrics

I made sure the grid layout is consistent throughout the design system. The touch size of interactive components is big enough according to the Material guideline.

I made sure the grid layout is consistent throughout the design system. The touch size of interactive components is big enough according to the Material guideline.

Meaningful Motions

shape transformation for adding new ingredients to the list

shape transformation for adding new ingredients to the list

swipe up to motion read more on the recipe details page

swipe up to motion read more on the recipe details page

reflectios

reflectios

reflectios

reflectios

One of the most important things I learned from this study is the importance of considering different contexts and user environments. Due to many possible reasons (habits, life style, age, etc.), one user can have quite different needs than another user, and one user can have different needs at different times.

One of the most important things I learned from this study is the importance of considering different contexts and user environments. Due to many possible reasons (habits, life style, age, etc.), one user can have quite different needs than another user, and one user can have different needs at different times.