UI/UX Designer and researcher, designing a mobile app
and responsive website for Nosh, from conception to
final prototype
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
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.
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.
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.
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.
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.
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.
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.
-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?
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.
-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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
-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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Thank you for reviewing my work. You can review extra details in the comprehensive case study slide deck linked below.
