Yori

Role:  UX Designer, UX Researcher, Branding, Usability Test Moderator

‍Tools:  Figma, Adobe Illustrator, Whimsical

OVERVIEW

"What should I make for dinner?"

We've all faced this dilemma—staring into the fridge, unsure of what to cook. The ingredients are there, but what combination will make the best meal? Or the quickest one?

Yori is a mobile app designed to recommend meals and generate plans for users. It also creates shopping lists based on the planned meals. Users can edit the plans and lists, and even organize their digital pantry.

Problems

  • Easier Grocery Shopping: Users need a way to track and organize their grocery shopping to avoid unnecessary trips and prevent buying duplicate items.
  • Meal Planning: With busy lives, people struggle to plan meals for the week. Users want to save time by having meals organized in advance.

Project goals

  • Develop an MVP for Yori that highlights the key features desired by users.
  • Create the branding and design style for the app from scratch.

User Research

Less teaching, more organization

When developing Yori, I knew I wanted to focus on food and cooking. But what direction should I take? To find out what users wanted, I sent out a survey about cooking habits and potential app features. The results pointed to a need for streamlined meal planning and grocery shopping. With that, the concept for Yori was born.

Survey results

In addition to gathering data on desired features, I asked open-ended questions about cooking and meal prep. Key findings included:
  • Participants cook an average of three times a week.
  • Most get meal ideas from online sources like Pinterest and YouTube.
  • Many try to plan meals in advance and shop specifically for those ingredients.
  • Few participants currently use an app to track meal plans or grocery lists.

Feature list

I presented survey participants with a list of possible app features, asking them to rate each on a scale of 1-10 (least to most desired). This feedback helped prioritize the features for Yori.
Users ranked their desired features on a 1-10 scale

Market Research

What's cooking in the app store?

The market for recipe and cooking apps is growing, especially with users seeking tools that simplify meal planning. However, while existing apps offer various features, none fully meet users' needs. Some apps have broken features, partially implemented functionalities, or lock desirable features behind paywalls. Yori aims to include the most sought-after features in a seamless, user-friendly way.

The competition

I reviewed four popular cooking apps from the Google Play store, chosen based on survey mentions. None of them offered all the features users wanted, reinforcing the need for Yori to fill this gap.

The top apps referenced by users

Findings

  • The COVID-19 pandemic spiked interest in recipe apps as people cooked more at home.
  • Users are drawn to apps that help them plan meals efficiently to minimize waste and manage rising food costs.
  • There's a desire for apps to organize saved recipes by cuisine, diet, etc., and to allow users to scan or import recipes.

User Persona

Meet Maria

Persona

Based on initial research, I developed Maria, a persona representing the target user for Yori. Maria works a 40-hour week and has limited time to plan meals. She seeks an organized solution for meal planning, ingredient management, and grocery shopping, aiming to save time and reduce waste.

Flow and Wireframing

Yori flow

There are multiple routes users can take to complete tasks, but here are some possible options.
App Navigation Flow
Early Sketches

Yori flow

I went through a few iterations when designing the wireframes. In the end, I wanted to focus on a few key flows.
  1. Onboarding
  2. Search
  3. Meal planning
  4. Grocery list
I invited a few potential users to review the wireframes, and their feedback led to several adjustments in the high-fidelity versions.
‍
OverviewUser ResearchMarket Research
User Persona
Flow and Wireframing
Style and Branding
High-fidelity
User Testing
The End Result

Style and Branding

Designing a 'fresh' app

From the start, I envisioned Yori with a clean, green, and minimal aesthetic. The main color palette was inspired by fresh herbs and the look of a modern, all-white kitchen.

Name origin

I wanted a name that was short, easy to spell, and memorable. "Yori" comes from a play on the Korean word for cooking (요리하다/yolihada).

Logo

The logo was a challenging part of the process. Whenever I thought I came up with an original idea, a quick Google search proved me wrong. There is every iteration of a bowl, pot, chef’s hat, etc. on the app stores. I almost settled on an image of a planner with a pot at the center. I quickly realized the details would get lost in smaller sizes so I ditched the planner and just used an altered version of the book cover as the main logo.
Final Logo Designs

High-fidelity

Everyday I'm shufflin'

Moving from wireframes to high-fidelity designs presented some challenges. Feedback indicated that the early designs felt crowded, and some fonts were too small. I made several adjustments:
  • Increased spacing across screens.
  • Replaced drop-down menus with pop-up boxes for the meal planner and shopping list.
  • Redesigned the recipe screen by removing unnecessary icons and badges.
  • Broke up the long, scrollable recipe page into separate tabs.

Shuffle Feature

One of the big challenges was figuring out how to include the shuffle feature. The idea was if a user isn’t a fan of the meals generated by the app, they can shuffle out the whole day (or week’s) meal and get a new selection. The problem was how to implement it in a way that was seamless and intuitive. After playing around with a few icons and button ideas I entered user testing with a simple refresh icon by the days. I would later learn this was neither seamless nor intuitive…

One key challenge was the shuffle feature, which lets users reshuffle meal plans. Initial tests showed that the feature was neither seamless nor intuitive, prompting further iterations.
OverviewUser ResearchMarket Research
User Persona
Flow and Wireframing
Style and Branding
High-fidelity
User Testing
The End Result

User Testing

“How do I shuffle?!?”

I conducted user testing with six participants from the initial survey. They were tasked with navigating the prototype, searching for recipes, reshuffling meal plans, and adding items to the pantry.
Two revisions were made based on user feedback. A more prominent meal planner button and the final shuffle button

Findings

  1. Users struggled to find and use the shuffle feature.
  2. The flavor profile section during onboarding wasn't obviously scrollable.
  3. The heavy use of green made it hard to distinguish clickable elements from text.
  1. Changed the shuffle icon to something more recognizable and added the word "shuffle" to a dedicated button.
  2. Added a gradient to the flavor profile section and resized images to allow cards to peek out at the bottom.
  3. Introduced different shades of green and a gold/yellow accent to break up sections.

Pain Points

Solutions

The End Result

Final iterations

Based on user feedback and consultations with other designers, I made slight alterations to the final screens. These included changing header colors and refining the shuffle button for easier identification.

Final thoughts

I'm happy with how Yori turned out. If I had more time, I would expand the app and add some of the "nice-to-haves" I initially planned. Users wanted a simple solution to a basic need—organizing and planning meals. In future iterations, I might explore adding educational and social features.
‍
View Prototype
OverviewUser ResearchMarket Research
User Persona
Flow and Wireframing
Style and Branding
High-fidelity
User Testing
The End Result