Time Crunch Mobile App

For my student capstone project, I made Time Crunch, a recipe app that allows users to find and plan recipes that are both healthy and hassle-free. As the sole member, I led UX research, design, and usability testing for this project.

My Role

Sole Member, User Research, UX Design, UI Design
Tools

Figma, FigJam, Miro, Zoom
Timeline

8 weeks (Jun. - Aug. 2022)

My DESIGN METHOD

Design Thinking Process

Throughout this project, I applied the fundamental principles of research/empathize, define, ideate, prototype, and test within the framework of the Design Thinking Process. Following the usability testing, I integrated the feedback collected from test participants to enhance my app further.

INTRO

Searching for recipes that are both healthy and convenient to make can be overwhelming

Health experts agree that we should be eating less processed and fast foods. However, according to the American Institute for Cancer Research, it is estimated that more than half the calories in the average American diet comes from these unhealthy foods. Through secondary research, I found that common factors that contribute to poor diets include:

  • Time constraints due to work, childcare, and commuting
  • Lack of energy and motivation to cook and plan meals
  • Satisfy a craving

GOAL

How might we encourage users to plan and prepare quick and healthy meals?

My objective was to develop an application that is user-friendly and intuitive, while also providing an extensive database of healthy and quick recipes.

USER SURVEYS

Understanding user pain points

I wanted to understand the main issues with why people have difficulty cooking meals. After receiving over 20 pieces of valuable feedback from surveys, I was able to summarize my main findings:

86%
Ate fast food at least a couple times a week
82%
Felt too tired or unmotivated to cook
87%
Were interested in improving their current diets

AFFINITY MAPS

Identifying common themes

I grouped the survey responses using an affinity map and found common themes, such as pain points of cooking, health goals, struggles with healthy eating, and food motivators.

USER STORIES

What are some features that will be useful for my users?

I created user stories to help me prioritize user needs. User stories allowed me to better define the necessary features and elements that needed to be implemented for a smoother experience.

  • As a user, I want to search for recipes that fit my needs so I can discover meal options that align with my dietary preferences and available ingredients.
  • As a user, I want to check the nutrition information for each recipe so I can make informed and healthy meal choices based on calorie count, macronutrients, and dietary considerations.
  • As a user, I want to like, save, or favorite certain recipes so I can easily revisit and access the recipes I enjoy the most, creating a personalized collection of my preferred dishes.
  • As a user, I want to plan my meals ahead of time so I can schedule and organize my meals, customize serving sizes, and generate shopping lists based on my chosen recipes, simplifying my meal preparation process.
  • As a user, I want to keep track of my eating habits so I can monitor my meals, snacks, and dietary choices over time, gaining insights into my overall nutrition and making healthier choices to meet my dietary goals.

IDEATION

Beginning to brainstorm

After identifying user needs and pain points, I began to generate ideas and establish concepts using pen and paper to explore possible solutions toward our user's problems. Some ideas I explored include a planner, calorie tracker, healthy alternatives finder, and a product review system.

SITE MAP

Giving structure to my app

To establish key features that my app needed to include, I created a site map. I made note of important navigation elements based on my user stories, such as finding recipes, saving recipes, and adding a calendar for meal planning.

USER FLOWS

Search for recipes, view and remove favorite recipes, and plan meals using a calendar

I then created user flows in order to visualize tasks that users would take to accomplish specific goals. Users had three user flows:

  1. Search for a recipe (tofu salad)
  2. View and remove favorite recipes
  3. Plan dinner using the calendar feature

SKETCHING

Creating the foundation of my app

Sketching allowed me to see the different possibilities of my app. I wanted to focus on how to make the app simple, straightforward, and easy to read for users, while also encouraging users to explore recipe options by including plenty of pictures.

Low fidelity wireframes

Establishing structure and layout

I began creating low fidelity wireframes based off of my sketches and user flows using Figma. Doing so helped clarify how I wanted functions spaced out on screen and identify key features. In this stage, I kept user needs, information architecture, and content hierarchy in mind.

mood board

Creating the brand attributes and identity

I created a mood board to explore visual directions, develop a more robust brand platform, and establish an identity. In my selection of images, I sought to convey Time Crunch’s core attributes of confidence, health, and reassurance. The color palette and UI inspiration was curated to elicit a sense of cleanliness, simplicity, and ease of use. I especially wanted to use the color orange to evoke a sense of hunger in users.

style guide

Keeping it clean, fresh, and consistent

To make sure that everything ties in together, I created a style guide. Using the mood board as inspiration, I wanted to focus on colors, iconography, and fonts that highlighted Time Crunch’s attributes while also creating a standardized format for consistency. It was also crucial to keep accessibility in mind, so I picked font sizes that were readable and checked for contrast ratio.

high fidelity wireframes

Improvements from my low fidelity wireframes

I decided to remove some background graphics on the recipe screen to improve readability. I also realized that users might want to remove multiple favorite items at a time, so I added a button for users to edit their recipe list.

user testing

Testing our prototype and discovering new insights

I recruited five participants to test a prototype of Time Crunch through moderated usability tests. Based on the results, I found 3 main issues.

Issue #1

Participants preferred to click the heart to remove a favorited item because they did not understand the "edit" function
Issue #2

Most participants did not know that “recent recipes” and “recommended” in the home page were side scrollable
Issue #3

Participants wanted to see additional features added in Time Crunch, such as the ability to see reviews and track calories

improvements

Fixing buttons, spacing, and adding additional information

I made improvements in a redesign of Time Crunch based on the feedback gathered from usability testing. Some changes I made include:

  • Making the "Edit" button visually clearer by using a brighter color and adding an underline
  • Adjusted the spacing of recipe cards to indicate the ability to side scroll
  • Including author and rating information on recipe pages

Prototype

Interactive prototype

Although I was at the end of my project deadline, I would have liked to conduct another usability test to see if the design changes led to any improvements. Check out my prototype below!

Learnings

Putting the U in UX Design

Through research and gathering user feedback, I realized that features that are clear to designers may not be obvious for users, thus it is important to always be flexible because design is an iterative process. I’ve learned that keeping a user centric mindset is absolutely vital in design—it is important for users to feel confident in their decision making. With this in mind, it was essential for me to make data-driven design decisions.

In the future, I would like to improve on my visual design skills, as well as learning more best practices. Looking back, there are some things that could be designed a little better, such as adding input field labels for additional clarity and adding more padding between elements to reduce clutter. I'm excited to continue growing as a designer and putting my learnings into practice!