UX Design

Delish Bites

Introducing an app that simplifies baking and pantry management.
Duration
4 weeks
Role
Lead UX Designer

Overview

Context

In my university course, CMPT 481: Human-Computer Interaction, we teamed up in groups of five to design an app or website of our choice for our course project. We had four weeks until the project deadline, along with weekly deliverables.

Scope

Since the project had a tight deadline, we designed certain user flows instead of a full app that showcases the main features and addresses the pain points of users.

Challenge

The challenge we set out to take on was to make baking more accessible and enjoyable for a wide range of people, from beginners to experienced bakers. We wanted to break down the barriers that might discourage newcomers from trying their hand at baking and, at the same time, provide the right features to keep the experts engaged.

Solution

Our solution was to design a user-friendly baking app, which we named "Delish Bites." This app was created to provide a comprehensive baking experience for users of all levels. For beginners, the app offered step-by-step guidance and easy-to-follow recipes. For more experienced bakers, it provided advanced features, a diverse collection of recipes, and tools to expand their baking skills such as pantry management.

Prototype

Design process

Understanding the user

Research goals

Investigate specific challenges that bakers face, with a focus on identifying potential obstacles that might deter them.

Methods

Our research approach was comprised of two primary methods:

  • Informal Interviews: We conducted informal interviews with friends and family members who have a passion for baking. These open-ended discussions allowed us to gain insights into their personal experiences, preferences, and pain points in baking. This method provided valuable qualitative data.
  • Competitive Analysis and Online Research: In addition to personal interviews, we carried out an online search to explore potential barriers, gather reviews of competitors' baking apps, and uncover user needs and challenges expressed by the baking community on the internet. This method helped us gain a broader perspective on user expectations and industry trends.
Key Findings
How might we

Bakers often feel discouraged when looking at a recipe that they do not have all the ingredients for.

Show the users recipes they have all the ingredients for. Additionally, facilitate ordering missing ingredients.

Browsing recipes can be overwhelming especially when provided with multiple versions of the same recipe on the internet.

Recommend to users recipes they may like, while still having a variety of options.

Bakers may lose track of the many items they have in their pantry.

Enable the process of tracking the pantry more streamlined.

Conceptualize

User Personas

To foster a deeper understanding of our target users, we developed several user personas. These personas helped us empathize with the user’s needs and aspirations. However, we remained cautious not to over rely on these personas to avoid making unwarranted assumptions and over generalizations. Instead, we used them to guide us to take informed design decisions while staying open to the diverse experiences of our actual users.

Wireframes

We organized a 3-hour design sprint dedicated to sketching user-flows and testing them within the team. Our focus was on creating wireframes that visualized the user experience. We utilized the 10+10 method to sketch out rough ideas and heuristic evaluations to reveal potential design issues. Full Report.

Design

High fidelity prototype

After several rounds of tweaks and feedback, we settled on a design and put together a high-fidelity prototype using Figma, leveraging the Material Design System.

User onboarding

User onboarding is a seamless process, involving basic info collection, allergy awareness, and helpful pop-up guidance for new users.

Pantry management

❌ Pain point

Users often loose track of items in their pantry.

💡Recommendation

A pantry management system to add ingredients swiftly either by scanning barcode of an item or register it manually.

Recipes in your kitchen

❌ Pain point

Users get discouraged and overwhelmed when introduced to many recipes, especially if they do not have all the ingredients for.

💡Recommendation

Recipes in your kitchen feature where the user is shown only recipes, they have all the ingredients for.

Interactive recipe walkthrough

❌ Pain point

Users find it challenging to follow and understand complex recipes, especially when they lack experience in baking.

💡Recommendation

Develop an interactive step by step walkthrough of the recipe.

Ordering missing ingredients

❌ Pain point

Bakers may lose interest if they do not have all the ingredients for a particular recipe.

💡Recommendation

Facilitate ordering the missing ingredients using an affiliate link.

Testing with users

Evaluation goals

Our aim for the evaluation was to pinpoint any possible design flaws or challenges that could have been overlooked. To make sure our design is intuitive, we decided it was appropriate to create an evaluation strategy that tests the following key features: User Sign-up/log-in, Adding ingredients to the pantry, Recipe Recommendations, Recipe Walkthrough.

Methods

We used a combination of observational analysis, think-aloud, and interviews to gather qualitative data that can be used as feedback for our design. We devised a list of tasks based on the goals of evaluation to test our scenario-based prototype. After the completion of tasks and during the interview, participants were given freedom to explore the app further to get as much insightful feedback as possible.

Participant test pool (3):

  • Older Adult: Age 57, Gender: Female, Experienced baker, limited experience using technology.
  • University Student: Age 20, Gender: Female, Baking as a hobby, Tech savvy
  • Working Adult: Age 24, Gender: Male, New to baking, Tech savvy.

Results

The evaluation findings highlight several key recommendations for enhancing the application's usability and overall user experience.

  • There is a need for improvement in the onboarding process, particularly in the tutorial. Users faced challenges in comprehending certain pages within the application, resulting in confusion and potential errors during evaluation. Addressing this issue by revising the descriptions on these pages can significantly enhance user understanding.
  • Another vital recommendation involves distinguishing the "Add Ingredients" page from the "Pantry" page, as users frequently perceived them as the same due to their visual similarity. Minor adjustments in design can facilitate more intuitive navigation.
  • The evaluation indicates the necessity for a clearer indicator to identify when an ingredient is running low or depleted on the recipe page. The current exclamation mark with light red color was deemed insufficient.
  • Users encountered difficulties in understanding ingredient quantities, leading to confusion when following recipes.

Conclusion

The team was overall satisfied with the design of the app, particularly the visual component, which was agreed upon by the participants in the evaluation process. Based on the evaluation, the team believes that the system would work well for the identified users and tasks, especially after reiterating based on the feedback they received. A detailed report can be found here, containing more information about testing, execution, interview transcripts, and full evaluation results.

Reflection

Key takeaways

As a team, this journey has been incredibly valuable for us, providing hands-on experience with the design process. We're happy with our current results, but we know that design is an ongoing process, and there's still room for improvement.

Let's connect!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.