Nosh: Designing for Social Good
Mobile App and Desktop Design
nosh mobile mockups

My Contributions

Role

UI/UX Designer and researcher, designing a mobile app
and responsive website for Nosh, from conception to
final prototype

responsibilities

Discovery and requirements gathering
Competitor analysis
Wire-framing: Paper and Digital
Low-fidelity wireframes and prototypes
High-fidelity layouts
User Interface Design
Accounting for accessibility
Usability testing and validation/project info

Project type
UX Design
Project Duration
May-June 2021
Design Tools
Adobe XD, Figma, Photoshop, Illustrator

Nosh

A modern recipe app with a spoonful of personal safety

Nosh is a recipe app and responsive desktop design with a hidden helpline for domestic violence victims. This product is designed to fall in line within the parameters of designing for social good.

Initially I went into the process with the objective that my users wanted an easy way to cook a great meal.

However, during the research phase I discovered another basic need to be addressed, that of personal safety. Feeling trapped and helpless was another unfortunate consequence of the shut-down.

So with an idea brewing, I conducted more research and came up with a concept that addressed both base physiological need sets, and designed a digital solution for a recipe app with a new twist.

The Process

In order to utilize a solution-based approach to my problem, I looked to the Design Thinking methodology. This approach, formulated by the Hasso Plattner Institute of Design at Stanford (d.school), helps in addressing complex problems with unknown variables, by intrinsically understanding the human based needs.

The five stages of the Design Thinking Methodology are Empathize, Define, Ideate, Prototype, and Test.

By systematically applying each of these stages of Design Thinking, I was able to re-frame my problem in a humanistic based space.

design think diagram showing empathize, define, ideate, prototype and test phases
A Design Thinking process model based off Stanford's d.school diagram
exclamation icon

The Problem:

The pandemic wreaked havoc on many lives in 2020. People were asked to quarantine which led to problems twofold:

1) People had to adapt to cooking at home.

2) Domestic violence rose worldwide, due in large part to stay at home orders.

Many victims were unable to reach out for appropriate help due to many government offices being shut down during this time.
star icon

The Goal:

The goal of Nosh is simple:

1) To help everyone enjoy a delicious home cooked meal.

2) Feeling safe in their own home.

To this end, we are focusing on survivors of domestic abuse or those who might be in a victim situation and need help reaching out if they are in trouble.

WHY?

The pandemic transformed our lives in so many ways, not the least of which simply feeding ourselves but a basic function of life. Many of us stared into the voids of our refrigerators and pantries trying to mentally piece together a meal. It became crucial to minimize our outings and try our best to have a variety of ingredients readily on hand to make our own meals from home.

Upon listening to the lamentations of my non-cooking friends, I decided to design an easy-to-use product that could help streamline this process, and take a large chunk of the mental guesswork of meal planning away.

I also uncovered the deeper motivation of wanting a helpline. Some people had experienced a domestic violence attack and were not always able to find help. Digging deeper into the research, I found that in every case, victims and survivors would like a “safety net" to help their peace of mind.

Maslow's Hierarchy of Needs

Nosh covers the foundation of the Maslow's need pyramid. Both platforms represent the essential physiological need for food and the more psychological need to feel secure. Especially during the pandemic, these basic needs for food and security were challenged, and sometimes difficult to achieve.

maslow's pyramid redesigned by alecia mitchell

Research

book icon

For this project, I took a broad look at life during the pandemic and saw a need for a product such as Nosh. Many people were being pushed into cooking for themselves on a regular basis for the first time.

I found during my research that in every case, cooking a home cooked meal for themselves or for others provided a sense of normalcy. I also uncovered the deeper motivation of wanting a helpline.  Some people experienced a domestic violence attack and were not always able to find help.

Digging deeper into the research, I found that in every case, victims and survivors would like a “safety net," to help their peace of mind.

check icon

From the user interviews during the empathize stage of my project, I was able to build  user personas, discover pain points, and develop problem and hypothesis statements based on my two focus groups: the average home chef, and the survivors of domestic violence.

After synthesizing this data I moved onto devising problem and hypothesis statements. I delved into secondary research with a competitive audit, and used this information for the brainstorming activities of “Crazy Eights”.

I topped my research with a usability study after my lo-fi prototype phase, to get a true sense of what the user’s pain points were with the site.

User Interviews: Recipe App

In the empathize stage, I conducted initial individual user interviews to understand what my users really wanted, and why. I chose a series of 5 questions both qualitative and quantitative in nature.

Style

Guerilla Interviews

Number

8 people interviewed

Duration

15 minutes each

Interview Type

Contextual Interviews

Initial Questions

-How often do you cook at home?

-How do you shop for groceries and how often?

-How do you plan your meals?

-How do you keep track of what food items you already have?

-How do you feel about cooking at home?

User Interviews: Helpline

After a comment from one of my initial interviewees, I became curious about the deeper nature of life behind closed doors during the shut down. Based on the initial interviewee's comments, I decided to probe further with a number of other specific people to see if there was a common thread. The criteria for this set of users was whether they themselves were victims of domestic abuse, or knew someone personally who had been.

Style

Guerilla Interviews

Number

5 people interviewed

Duration

15 minutes each

Interview Type

Contextual Interviews

Initial Questions

-At anytime during the shutdown did you feel afraid?

-How did you cope with this fear?

-Did you have the means to reach out for help?

-Would have have taken advantage of access to help?

-If a common household item were available to help, would you use it?

Understanding the User

In the define stage, I conducted thorough user research, including developing personas, user stories and user journey maps.

Synthesizing the data from the interviews, I was able to form two distinct user personas and their pain points. This subsequently allowed me to write definitive problem and hypothesis statements, and formulate their user journeys. The user journey maps helped me understand the problems Charlotte and Liam faced on their paths. It also helped reduce the impact of my own designer biases, by understanding how Charlotte and Liam think and feels though every step.

This new comprehension allowed me to recognize roadblocks and pain points to correct, by identifying improvement opportunities. An example of this would be allowing them to keep their screen on while making a recipe, or being able to see their pantry items at a glance.

And last but certainly not least, I was able to hone the idea of a safety-helpline hidden within the app.

User Story: Charlotte Hart

User Story

As a busy graduate student and domestic violence volunteer, I want to help women survivors get back on their feet by cooking them delicious meals, so that I can start feeling good about myself again, and enjoy a normal life with my partner, cooking together a few times a week.

Problem Statement:

Charlotte is a busy grad student and volunteer, who needs an easy app experience to find and prepare a variety of meals, because she wants to cook not only with her partner, but also support her fellow survivors, by cooking delicious meals for them.

Hypothesis Statement:

If Charlotte downloads the Nosh app, she would have an easily organized experience of finding and cooking recipes, with the added security of a hidden-in-plain-sight safely helpline.

User Persona: Charlotte Hart

charlotte user persona

User Research: Charlotte's Pain Points

number 1 icon

Financial

Charlotte sometimes spends her own money on financing the food budget for the domestic violence shelter. She needs an organized way to plan meals so that she can budget for them.
number 2 icon

Products

Charlotte needs an app that helps her organize and save recipes for home and her volunteer work.
number 3 icon

Process

Charlotte needs an easy way to sort through recipes and find what she needs quickly. She cooks not only with her partner, but for the shelter, so is constantly sifting through recipes to find appetizing meals.
number 4 icon

Information Architecture

Charlotte needs an app that allows her to skip though the fluff and blogs to find her recipes quickly. As a person with a disability, she would find it helpful to opt to keep the screen open while she is cooking.

User Journey Map: Charlotte

charlotte user journey map

User Story: Liam Oliver

User Story

As a busy software executive, I want to have my pantry items listed in a digital format, so that I can quickly search, even from my office, for recipes that I can already make when I get home.

Problem Statement:

Liam is a busy software executive who needs an easy app experience that allows him to itemize his pantry items, because he wants to plan his family meals on the go.

Hypothesis Statement:

If Liam  downloads the Nosh app, he would have an easily organized experience of finding his pantry items and making short work of grocery shopping.

User Persona: Liam Oliver

liam oliver persona

User Journey Map: Liam

user journey map liam

User Research: Liam's Pain Points

number 1 icon

Financial

As head of household, Liam loves making home cooked meals for his family, but does like wasting money on things he already has at home.
number 2 icon

Products

Liam wants to be able to organize all his shopping in one app so that he can make light work of the grocery shopping.
number 3 icon

Process

Liam often plans meals from the office, so that he can do the shopping on the way home from work.
number 4 icon

Information Architecture

Liam is tech savvy, and wants an intuitive app that allows him to add his ingredients from his home pantry, to streamline his workload.

Understanding the Competition

As we move further further away from the define stage, into the ideate stage, we can focus on the design ideation, and begin to brainstorm solutions to our problem statements. For this section I have complied my competitive audit spreadsheets, an excerpt from my competitive audit report, and Crazy Eights.

The link to the full Competitive Audit Report is below.

Competitive Audit Spreadsheet

competitive audit spreadsheet

Competitive Audit Report (Excerpt)

My goal in this competitive audit is to identify my key competitors, and review the products my competitors offer.

I am looking at their visual layout and navigation, what custom features they offer, what standard features they offer, and how they handle the recipe flow, as well as costs.

I am also examining what the competition does well and what they could do better; searching for their strengths and weaknesses, gaps, and opportunities.

competitive audit

Crazy Eights & HMW's

Identify gaps and opportunities:

-How might we design a system that keeps track of the user's recipes and ingredients?

-How might we incorporate the user pain point of needing a helpline?

Three ideas generated with Crazy Eights:

  • The priority of this app is structure and organization for an easy flow, so focus will be on the recipe pages and helpline function. With this in mind, it could have a consistent link to the helpline on every page.
  • Have an area where the users can add ingredients from their own pantry, to make grocery shopping more streamlined.
  • Incorporate sections allowing users to chose recipes based on their own preferences and limitations.
crazy eights paper wireframe

Starting the Design

In the design stage I started with an information architecture sitemap, followed by paper wireframes, then digital wire frames for both mobile and desktop, and finally a low-fidelity prototype of both mobile and desktop.

Information Architecture: Sitemap

information architecture sitemap

Paper Wireframes

Paper wireframes are a fast and easy way to help UX designers quickly iterate and explore design ideas. I used paper wire-framing as a way to rapidly address different ideas concerning user pain points that I had found during my user research.

For example, I had originally thought it might be visually tempting to put a series of enticing food images on the homepage. But when I thought of the user needs for simplicity and fast navigation, I changed that in another iteration. In this case I decided it might be more prudent to have only a few hero cards for users to choose from, in order to get them started quickly and efficiently.

paper wireframe

Digital Mobile Wireframes

As I began the prototype stage, I thought about what I had learned from the user research. Most wanted ease of use and simplicity. These are the initial mobile-first digital wireframes, including versions of the recipe-to-directions screens, and the profile-to-helpline screens.

lofi-wireframes
lofi-wireframes

Low-fidelity Mobile Prototype

This low-fidelity prototype, built in Adobe XD, connects the 11 wireframes in the user flow for on-boarding/signing in, then then allows for choosing a recipe through the app. It also includes the flow to the hidden-in-plain-sight helpline.

This wireframe contains the interactive links that allow the user to proceed forwards and backwards within the sequence, and the embedded cues for user navigation are clearly indicated.

lofi wireframes
lofi prototype

Digital Desktop Wireframes

In addition to designing the mobile wireframes, I also made a desktop website to accompany it.

The desktop version focuses more on explaining the app's mission and offers more support for domestic violence victims.

resources desktop
security desktop
live chat desktop
guides desktop

Low-fidelity Desktop Prototype

This low-fidelity prototype, built in Adobe XD, connects the 8 wireframes in the user flow for exploring the features available on the website, including safety planning and a security feature that will quickly take the user out of the site, if they are in immediate danger.

This wireframe contains the interactive links that allow the user to proceed forwards and backwards within the sequence, and the embedded cues for user navigation are clearly indicated.

lofi mockup desktop
lofi prototype desktop

Usability Study

In the testing stage I focused on the Usability Study parameters, and followed with an in-depth research study plan. This comprehensive stage also included synthesizing the found data with a note taking spreadsheet, an insight identification template, an affinity map, and finally my usability study findings.

In this section I am including an excerpt of my research study plan, the link to the full plan can be found below.

Usability Study: Parameters

clock icon

Length:

15-20 minutes
people icon

Participants:

5 Participants
location icon

Location:

United States, remote
clipboard icon

Study type:

Unmoderated usability study

Research Study Plan (Excerpt)

My goal for this research study was to examine my group of users and their needs, in order to add realistic context to my design process.

For the study, I started by outlining the background for my project. Then I set goals for my research and made a note of the questions I wanted to answer. Finally I established the steps I would take to conduct the study, and selected the participants.

This study includes 7 key sections including: the introduction, my research questions, the KPI's, the participants, the script, and finally the System Usability Scale questionnaire.

The link to the full report can be found below.

user research study plan

Usability Study: Note Taking Spreadsheet

not taking spreadsheet

Usability Study: Insight Identification

insight identification template

Usability Study: Affinity Mapping

affinity map

Usability Study: Findings

These were the main findings that the usability study revealed:
number 1 icon

Finding

Participants were confused by the lack of accessible profile settings screen.
number 2 icon

Finding

Participants had a hard time navigating to the helpline page through the profile page.
number 3 icon

Finding

Many participants had a hard time navigating to the helpline page through the recipe page.

The Outcome: Refining the Design

After the testing stage, I went back to the proverbial drawing board to refine my designs. I made specific changes to several screens based on the user feedback from the usability study.

At this point I was able to focus on the delightful part: choosing colors and images, and prototyping my final interactions while focusing on accessibility considerations.

This section shows examples of changes in screen designs based on user findings, and a few mobile and desktop mockups and their prototypes.

Redesigning the Screens: Low Fidelity to High Fidelity

After the usability study I realized it would be valuable to have constant access to the helpline. One way I chose to fix this, was to add a "help" button to the directions page. To the average onlooker, this might seem like a standard help button, What this actually does is take the user to the emergency helpline screen, where they can discretely signal for help.

lofi screens after usability study

Redesigning the Screens: Low Fidelity to High Fidelity

To take this a step further, in the high-fidelity iteration, I played with the colors and buttons to make it more delightful. The constant access to the helpline is more pronounced, with the helpline button in orange. Having anything relating to the helpline portion of the app, is a theme throughout the whole design. Any element with the color orange, will take the user to the emergency helpline screen, where they can discretely signal for help.

lofi and hifi-screens

Redesigning the Mobile Screens: High Fidelity Mockups

Each final mockup screen was designed with two-fold motivations.

First, they fulfill the user need of an easy to use recipe app with delightful features such as a button that keeps the screen on while cooking, to a pantry feature that allows the user to keep track of items they already have.

Secondly, in addition to the recipe aspect, the helpline feature is in constant view. This design follows the UX usability heuristic of recognition rather than recall. Each screen houses a life-buoy icon, which will take the user directly to the Contact Helpline screen. Theoretically, this screen can be used to contact authorities or an emergency contact. Also the bottom navigation bar has a question icon in the bottom right that will take the user immediately to the Contact Helpline screen.

Finally, in each screen that isn't specific to recipes or cooking, there is a quick "sign out" button, which will rapidly take the user back to the innocuous welcome screen of the Nosh recipe app.

hifi mockups

High Fidelity Mobile Prototype

This high-fidelity prototype, built in Adobe XD, connects the 17 screens in the user flow for on-boarding/signing in, then allows choosing a recipe through the app. It also includes the flow to the hidden-in-plain-sight helpline.

This prototype contains the interactive links that allow the user to proceed forwards and backwards within the sequence, and the embedded cues for user navigation are clearly indicated.

The link to the prototype can be found below.

screenshot of hifi mockups
screenshot of hifi prototype

Prototype in motion

prototype gif

Redesigning the Desktop Screens: High Fidelity Mockups

The desktop/web version serves a more comprehensive dual purpose.

Not only is it a jumping off point for downloading the app, it also serves as a portal for those who might be in need of resources for domestic violence information.

Interested users can come here to learn more about the app, and even search for recipes and meal planning guides while scanning the innocuous recipe interface.

Users can also find information and supplementary information throughout several screens featuring a chat option for help , and text and call options for reaching out. One of the more important built-in safety features of the desktop version, is the ability to quickly exit from any screen pertaining to the domestic violence material.

Each screen in this section houses multiple ways of exiting quickly. There is the option of a large, easy to access "X" that will take the user out of the website immediately, and orange "EXIT" bar running the length of the screen, and a sign out button. These rapid exit cues will take the user to an innocent dummy web browsing page.

hifi desktop screens

Landing page

desktop landing page

High Fidelity Desktop Prototype

This high-fidelity prototype, built in Adobe XD, connects the 8 wireframes in the user flow for exploring the features available on the website, including safety planning and a security feature that will quickly take the user out of the site, if they are in immediate danger.

This wireframe contains the interactive links that allow the user to proceed forward and backward within the sequence, and the embedded cues for user navigation are clearly indicated.

The link to the prototype can be found below.

hifi desktop screens
hifi prototype screens

Accessibility Considerations

number 1 icon
I ran my colors the the color interface tool in Google's Material Resources, and made sure that all my colors were AA to AAA accessible.
number 2 icon
I made sure that my text, buttons and icons were of an appropriate size to be easily legible, no matter upon what screen size a user was viewing and using the site.

Going Forward

In the final stage of my case study, I explored the takeaways and next steps of my project, determining what I have learned and what I could do better going forward.

Takeaways:

check icon

Impact:

The feedback I received from my usability study and my high-fidelity prototype has been positive. They show that the design of this app and website is usable and meets the user's needs.

A quote from peer feedback:

"Awesome work! This was so elaborate and well documented."
book icon

What I Learned:

In designing Nosh to be a mobile app, then desktop website (utilizing a mobile-first approach), I learned that not only extensive user research - but also strict attention to design guidelines for different sized screens, play a crucial role in the UX design process.

Figuring out how to practically incorporate a socially responsible helpline/lifeline into an everyday application was an intimidating, intricate puzzle, but has been a very rewarding journey.

Next Steps:

number 1 icon

This design could be a huge undertaking to develop all the screens I would like to include for mobile, so my next step would be to include an updated and heavily detailed user flow for another list item, such as incorporating a cart option so users could order their groceries online.

number 2 icon
I would likely need to conduct more user research into the complexities of security. For example: gathering the insights I need to make the users feel comfortable giving out personal information. Also I would make the desktop version mobile friendly.

Thank You!

Thank you for reviewing my work. You can review extra details in the comprehensive case study slide deck linked below.