THE PROBLEM

The current layout of online recipes is not user friendly

Do you ever find yourself constantly scrolling on an online recipe page to get to the important bit? Do you ever feel frustrated trying to follow a recipe’s instructions while you’re cooking? What about abandoning unused ingredients that eventually end up in the trash?

Choosing a recipe amongst many can take quite a while, and following recipe instructions with an unfriendly user experience can get frustrating. On top of that, we usually aren’t sure about what we can do with the random ingredients we have lying around at home. Throwing them away means we’re contributing to avoidable food waste that hurts our planet.

THE SOLUTION

Reduce cognitive load & target the decision making process

Nom targets the need for excessive scrolling and the time it takes to make a decision by controlling the amount of information presented on each screen. It also helps reduce household food waste by allowing users to search for recipes that require ingredients already available at home.

RESEARCH

EMPATHIZE

DEFINE

IDEATE

UI DESIGN

PROTOTYPE

USABILITY TEST-1

ITERATE

USABILITY TEST-2

LESSONS LEARNED

MY ROLE: EMPATHIZE, DEFINE, IDEATE, PROTOTYPE, & TEST

What did I do?

• Conducted primary & secondary research and synthesized research findings

• Created affinity maps, empathy maps, personas, user stories, and user flows

• Performed ideation, sketching, wireframing (low-fidelity & high-fidelity), and prototyping

• Conducted usability testing on high fidelity mockups and iterated my designs based on those results

What does existing research say?

I gathered data on user attitudes towards online recipes, the UX design of existing online recipes, and on the contributions to household food waste.

• 31% of individuals who use online recipes mentioned that choosing what to cook was the least enjoyable part of the cooking process. Cooking Trends Among Millennials: Welcome to the Digital Kitchen

• “Over 50 per cent of food wasted in Toronto single-family households is avoidable, including leftovers and untouched food that could have been eaten at one point….Canada’s 2.2 million tonnes of avoidable household food waste is equivalent to 9.8 million tonnes of CO2 and 2.1 million cars on the road. Why Food Waste is a Problem

• Online recipes are lengthy in nature. Specifically, the most frustrating aspect of online recipes is the “chef’s” tendency to write irrelevant and insanely long personal stories before presenting the list of recipe instructions and ingredients. Why does every online recipe begin with the preface to a personal memoir?

• “I’m constantly scrolling up and down because I can’t remember how much of each ingredient to use” - A senior UX designer shares his frustrations with the disconnection between online recipe links and user memory loads. The User Experience on Recipe Sites is Broken

COMPETITIVE ANALYSIS

Evaluating potential competitors

Unraveling people’s thoughts about online recipes

I interviewed 5 individuals for the purposes of identifying any issues or setbacks that they face when searching for, choosing, and following recipes. The participants are regular visitors of online recipe sites and cook recipes they find online about 2 times/week.

THE FINDINGS

• Online recipe sites are too wordy, leaving users scrolling excessively to get to the information that they want.

• It takes a long time choosing recipes because users find themselves back and forth on multiple links. This can be described as cognitive overload which affects decision making.

• Users didn’t know how to find recipes for ingredients that they already have at home, which resulted in food waste almost every time across the 5 participants.

What do users want?

HOW MIGHT WE QUESTIONS

Now what?

User goals and desires were then reworded into HMW questions for the purposes of introducing specific design solutions.

• How might we help individuals search and find recipes faster? 

• How might we decrease the need for scrolling on lengthy recipe instructions?

• How might we reduce feelings of frustration when it comes to following recipe instructions?

• How might we improve the readability of recipes by organizing large amounts of information?

• How might we make it easier for users to find recipes for ingredients they already have available?

Coming up with a solution

For brainstorming I used a method called SCAMPER to come up with possible design solutions drawn from existing app ideas. It stands for: Substitute, Combine, Adapt, Modify, Put to another use, Eliminate, Reverse.

My main inspiration was Tinder, the infamous dating app. Specifically, how quick, easy, and resourceful it is to match with available individuals in your area based on the preferences that you input.

Putting SCAMPER into effect:

• Combining features of Tinder with features of a recipe app

• Adapting and modifying the design idea to function as a recipe app

• Putting features of a dating app into another use

• Eliminating functions/features that are unsuitable contextually

• Reversing the search for recipes. What if recipes found users too?

INFORMATION ARCHITECTURE

Planning & designing the information structure

User flow diagram

There are three main red routes for using the mobile app.

1. Signing up/logging in/continuing as a guest (top left)

2. Choosing and following recipes (bottom left)

3. Managing the pantry section (right)

Have a closer look

GUERRILLA TESTING

Testing the sketches

I conducted guerrilla usability testing with 5 participants before moving forward with low-fidelity wireframes. Testing at this stage was focused on the usability and information structure of the app rather than the “look and feel” of the design.

WIREFRAMES AND WIREFLOWS

Going digital

I used Sketch to design low-fidelity wireframes for the red routes. Solutions to the problems discovered during guerrilla testing are included in the wireframes seen below.

Brand identity and brand attributes

The goal for Nom is to be a fun-to-use application that offers users a quick and efficient way of finding suitable recipes. The app’s brand attributes are personal, fun, accessible, friendly, and efficient.

The images below are inspirations for a color palette that represent fun, personal, and friendly. I also chose images that are aligned with the accessible and efficient attributes, which reflect a more minimalist design.

High fidelity mockups

Have a closer look

What did users think?

Test Plan:

I conducted my first round of moderated usability tests with 5-participants in person. These participants regularly search for and follow recipes online (on average 2/week). I provided them with tasks to complete, during which I observed them navigate through the app and experience the three red routes.

My goal was to:

• Assess the usability of the app as well as its visual design,

• Evaluate whether icons and buttons were intuitively understood,

• Discover any redundant pages/sections in the app, and

• Figure out whether the overall look and feel of the app is aligned with the brand identity.

Iterating the initial design

Solutions

1. Relabeling the “all recipes” page and its corresponding icon to be an “explore” page instead, emphasizing its purpose as a page for searching.

2. Decluttering the page from unnecessary icons and reorganizing some elements, ensuring the design is consistent throughout.

3. Removing the background image from the home page, pantry section, and the “all recipes” page to simplify the design.

Results - before & after

The screens that underwent the most changes are shown below.

What did users think about the iterated version?

I conducted a second round of moderated usability tests with 5 new participants. My goal for this round was to evaluate whether my new designs solved the confusions that existed in the first round of testing. I also wanted to make sure that this design was better aligned with the brand identity than the first one. In addition, I tested to discover if any other confusions or frustrations existed.

The results:

• Users appreciated the simple and fresh feel of the app. Compared to the first round of testing, this was a major improvement. 4/5 participants gave positive feedback about the UI design.

• There was relatively less confusion around the existence of the second view of the recipe page (now “explore”). Participants however didn’t understand the icon I had chosen for representing that page.

• Users felt that the pantry section was simple and easy to use, which resolved the initial confusions that existed on that page.

What challenges did I experience?

The prototyping and design stage presented me with one main challenge. I had wanted an interactive experience similar to Tinder, including its swiping feature and feedback system, but that proved to be quite difficult to implement. I was limited by the software I used and couldn’t afford spending time learning a new one. However, Nom’s design does function the way it was intended to, and users had no recommendations for changing or “improving” that interaction.

What I learned

• Participants will inevitably voice their subjective opinions about the visual design of an app. Those opinions are beneficial in informing the designer whether the look and feel is aligned with the brand identity.

• Individuals can get confused about some icons and sections that I had initially believed to be intuitively easy to understand => designer bias will always exist.

• There will always be an urge to redesign as more insight comes through from rounds of testing.

• Iterative design is a necessity for refining a product, and usability testing is a process that should not be overlooked.