Bake shop collaboration app

My project roles

UX Designer

Project audience

Bake shop owners and bakers working as a team in a bake shop or similar setting

Project year

2022

Project client

Concept piece created as part of Google's UX Design Certificate Program

Project tools used

Figma, Google Suite

Overview

I began working on this app as a project for the Google UX Design certification program. I used a random prompt generator to come up with an initial concept for the app. Based on the prompt, I set out to design an app that would serve as a digital recipe organizer for a bakery. Having no background in the baking industry, I did some research with the intention of discovering more about how bakers collected and used recipes for their bakeries. I quickly discovered that there was a need for an app that went beyond the initial concept of recipe organization. The results of this research were what guided my creation of The Bakers Helper app. 

Bakers Helper search screen showing search bar, popular recipes, and recommended recipes
Bakers Helper search screen

The Bakers Helper app is a quick-reference mobile application that bakers can use to curate and create recipes for use in their bakeries. It also serves as a collaborative app that allows members of a baking team to plan and customize menus together, see schedules and job tasks in advance, and streamline their workflow.

Discovery

Research Goals

  • Identify the challenges associated with daily operations for retail bakers. 
  • Determine if recipe organization is a contributing factor to daily challenges. If so, how?
  • Understand how recipe organization can reduce or eliminate daily challenges.

Interviews

I started my research by holding user interviews to get qualitative data to help me identify how users may benefit from a recipe organizer app. I created a list of questions that aligned with my research goals and held semi-structured 1-1 interviews with four randomly assigned participants who met the characteristics of my target audience.

After the interviews, I transcribed the interviews and created empathy maps to help synthesize my findings and determine common themes in the data.

Participant Characteristics

  • Works as or for a retail baker
  • Employed or previously employed in some area of retail baking
  • Ages 20-75
  • Includes participants of different genders
  • Includes participants with different abilities

Summary of Findings

  • Head chefs are too busy to spend time training staff on new recipes
  • Baking staff turnover is high, creating a need for frequent training and a threat to food product consistency
  • Recipe errors occur when yields are adjusted; Errors affect time, cost, and taste which threatens brand credibility
  • Text-heavy recipes are difficult to follow, especially for non-English speaking staff; Recipes with step-by-step instructions either with photos or video are most helpful

Define

Personas & Journey Maps

I used the findings from the user research to formulate 11 user stories to represent potential use cases. These helped influence my development of two personas that best represented the user types for the app: Jerome and Eleanor.

Personas

Full Persona workup for Persona 2- Jerome


Mapping the user journeys of my personas revealed several opportunities for features that I could include in the app to help relieve user pain points. Multiple user journeys revealed shared pain points that helped me to prioritize potential features for the app.

Full user journey for Persona 1 - Eleanor

Task & User Flows

After determining the high-level functions that the app needed to serve, I started outlining the task and user flows for the app. This task flow takes the user through the process of adding a customized recipe to the app.

Task and user flow for adding a new recipe with customized features in the app

Competitive Audit

After identifying potential features for the app based on my user journeys, I performed a competitive analysis to see what similar applications exist with the features I prioritized. I observed their user flows and assessed their strengths and weaknesses to see how my app could distinguish itself and add value for users. 

View the full report.

Design and Ideation

Sketches and Wireframes

With a feature set and user flow in mind, I was ready to design the visuals for my app. I started by creating paper wireframes, then took my favorite elements from those to create the first of many low-fidelity digital wireframes. 

Low-Fidelity Prototyping

Using my digital wireframes, I created a low-fidelity prototype and conducted my first of two rounds of usability testing. I asked for participant volunteers on social media and gathered five participants for this usability study. View the prototype here.

Participants

  • Any gender
  • Ages 25-65 
  • Familiar with interacting within mobile applications on a mobile device
  • Various levels of experience cooking and/or baking
  • Various levels of experience reading and following directions from a recipe

Test Objectives

This was a moderated study. Each participant was given a series of tasks to complete in the prototype and asked to reflect on their experience. The research goal of the study was to determine if users could easily customize and create recipes, create daily schedules or meal plans, and determine ingredient needs for chosen recipes.

Feedback

Participant feedback was largely positive, but testing revealed a few user pain points. Testing with actual bakers as some of my participants also highlighted a couple of gaps that are essential to a fluid workflow at a bakery.

Affinity Map

I used affinity mapping to help uncover themes and develop insights from the study.

Affinity map after 1st round of usability testing

Study Findings

  • Having two user modes felt overwhelming to many users
  • Users wanted a way to add multiple team members to the same task
  • Using the logo as a back button was not intuitive for all users
  • Users wanted more customization options for video
  • Users felt having a visual cue would help them understand which tasks have been completed by team members

Visit the case study to see specific examples of how I addressed these findings.

Branding

Findings from the study helped guide my designs from wireframes to mockups. I used Figma to design high-fidelity mockups for the app. As I developed and iterated on my designs, I expanded my style guide into a design system that could be used by UX engineers as the project entered development. I created reusable components that took into account how I wanted the app to be branded and would be ready to easily hand off to a product engineer after design. I used a light color scheme with a few bold colors to add interest and emphasis to the designs. The light background provides a neutral backdrop for bold food images. I integrated playful iconography to reflect the bakery theme throughout the design, such as a donut inside a magnifying glass and a chef hat next to a stopwatch.

Hi-Fidelity Mockups and Prototype


Hi-fidelity mockups of a few key screens

The final high-fidelity prototype presented cleaner user flows for creating, customizing, and scheduling a recipe. It also provided search options for users to find and save recipes from across the web. View the high-fidelity prototype here.

The second round of usability testing was set up as a moderated usability study like the first one. Participants found the user flow less complicated and overall comments were that the app was straightforward and easy to navigate. 

The suggested changes were to make tasks clickable to eliminate users having to navigate to the recipe to view details and to add a button on the home screen to view tasks for all recipes on the schedule that day in addition to tasks for individual recipes. I was able to accommodate both of these changes after the study and believe they did enhance the user experience.

Next Steps

I designed this as a conceptual piece so that I could do a deep dive into user research and be fully immersed in the UX design process. I loved getting that connection with users and seeing how the design for the app changed and adapted throughout the process to reflect user needs. Were I to continue to develop this project, my next steps would be to iterate on the last round of feedback from my usability study. I would continue to iterate until I was satisfied with the user flow and and then package my files to send to a UX Engineer for development.


Screenshots

Let's Work Together!

Contact Me