1 of 38

The Bakers Helper

App Design

Nicole Stephens

Completed as a part of the Google UX Design Certificate Program

2 of 38

The product:

The Bakers Helper app is a quick-reference mobile application that bakers can use to curate recipes and collaborate with team members to plan and customize menus and streamline their workflow.

Project overview

Project duration:

August 2021 to February 2022

3 of 38

The problem:

Busy pastry chefs need a way to find and communicate new recipes to their baking teams amid strict time constraints and frequent employee turnover

Project overview

The goal:

Design an app that allows users to curate and create personalized recipes and quickly communicates daily baking needs to all team members

4 of 38

My role:

UX designer designing an app from conception to delivery

Project overview

Responsibilities:

Conducting interviews and competitive analysis, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs

5 of 38

Understanding

the user

User research
Personas
Problem statements
User journey maps

6 of 38

User research: foundational

I conducted interviews and created empathy maps to understand the users and their needs. I used the User Interviews platform to randomly assign participants to my study. I created a screener survey to identify interview participants that aligned with my target audience – namely people who currently were or had previously worked in the baking industry.

The pain points identified by this user group vastly shifted my design goals as common challenges unique to this industry began to emerge.

7 of 38

User research: pain points

Time

Head chefs are too busy to spend time training staff on new recipes

Turnover

Baking staff turnover is high creating a need for frequent training and a threat to food product consistency

Scalability

Recipe errors occur when yields are adjusted; Errors affect time, cost, and taste which threatens brand credibility

Instructions

Text-heavy recipes are difficult to follow, especially for non-English speaking staff

8 of 38

User personas and journey maps

After identifying themes in the user research, I formulated 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.

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 the potential features.

9 of 38

Persona: Eleanor

Problem statement:

Eleanor is a pastry chef for a bakery who needs to create specialty desserts within a 4-hour window because they will be served on the bakery’s daily specials menu.

10 of 38

Persona: Jerome

Problem statement:

Jerome is a bake shop owner/chef who needs to quickly but precisely communicate new recipes to his staff because they need to recreate them consistently and within strict time constraints.

11 of 38

User journey maps

12 of 38

User journey maps

13 of 38

Competitive analysis
Wireframes
Low-fidelity prototype
Usability study

Starting

the design

14 of 38

Competitive audit

I performed a competitive analysis to see what similar applications exist with the features I prioritized. I observed 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.

Offer easy-to-follow step-by-step instruction guides

Offer recipe scaling feature to adjust ingredient needs

Allow users to search for and customize new recipes

Key opportunities

15 of 38

Paper wireframes

Drafting iterations of the main screens of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

16 of 38

Digital wireframes

As the initial design phase continued, I made sure to base screen designs on features I prioritized from user research.

Users can quickly see their currently assigned menus directly from the home screen

A tab layout visually organizes information and a Notes tab provides a place for recipe customization

17 of 38

Digital wireframes

Once a recipe is on the schedule, users can further customize it or assign team members to specific steps

Adjustable serving size feature allows for recipe scaling

Easy navigation with icons provide visual cues that help provide context

18 of 38

Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype that could be used in a usability study. There are two primary users flows based on the user’s login as an individual or a member of a team. The app served as a recipe organization/meal planning app for individuals and collaborative app for team members.

View the Bakers Helper �low-fidelity prototype

19 of 38

Usability study: Round 1

I conducted two rounds of usability studies. Each study had a sample size of five users ranging in age and experience levels with technology and using recipes. Findings from the first study helped guide the designs from wireframes to mockups. I used affinity mapping to help develop insights from the study.

20 of 38

Usability study: Round 1 insights

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

Having two user modes felt overwhelming to many users

Users wanted a way to add multiple team members to the same task

Round 1 insights

Users wanted more customization options for video

Using the logo as a back button was not intuitive for all users

Users felt having a visual cue would help them understand which tasks have been completed by team members

21 of 38

Mockups
High-fidelity prototype
Usability study
Accessibility

Refining

the design

22 of 38

Mockups

I reduced the app to one user flow, eliminating the personal login and adding emphasis to the team user.

I made a few significant design changes after reviewing the usability insights. I reflected these changes when creating high-fidelity mockups.

Before usability study

After usability study

23 of 38

Mockups

Users wanted a way to add multiple team members to the same task

Before usability study

After usability study

Insight:

“If I want to select two members or more for the same task, can I do this?”

Usability 1 Participant

24 of 38

Mockups

Using the logo as a back button was not intuitive for all users

Before usability study

After usability study

Insight:

“There is some confusion as to where do I go to go back because there is no ‘Go Back’ button.”

Usability 1 Participant

A back button and arrow were added to a banner at the top of every screen

A Home icon was added to the bottom navigation bar

25 of 38

Mockups

Users wanted more customization options for video

Before usability study

After usability study

Insight:

“You could have another button that says, ‘Record Video’ that lets users record themselves doing a particular step of the recipe.”

Usability 1 Participant

Users can both upload and record videos and attach to a recipe

Users can view uploaded videos �by clicking a thumbnail preview

26 of 38

Mockups

Users felt having a visual cue would help them understand which tasks have been completed by team members

Before usability study

After usability study

Insight:

“If there's a way to have a done button that could turn the step green when it is done, that would visually tell me that step 1 has been done and it is ready for me on step 2.”

Usability 1 Participant

I added a recipe status on the home screen.

A ‘View Tasks’ button shows a status of each step of a recipe and can be filtered by user tasks or team member tasks.

27 of 38

High-fidelity prototype

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 Bakers Helper high-fidelity prototyp e.

28 of 38

Usability study: Round 2 findings

I completed a second round of usability testing to test my users’ experience using the high-fidelity mockups in my prototype.

Make tasks clickable so that users do not have to navigate to recipe to view more detailed directions

Add a button on the home screen to view tasks for all recipes on the schedule for that day

Round 2 findings

Swap order of ‘Logout’ and ‘Switch User’ links on the main menu

View favorites from the main search screen or from main �menu icon

29 of 38

Design iterations

I added a feature to the home page that displays whether the recipe is a custom order or not

Users have the choice to view tasks for all menus on their schedule or only the tasks for a specific recipe.

To eliminate clutter on the home screen, I removed the ‘View Recipe’ button, but users can still access the full recipe by clicking on the thumbnail or title. Usability participants inherently accepted this UI function.

I moved the color-coded status directly under the recipe name for higher visibility

Expanded view of home screen

30 of 38

Design iterations

A message box appears with more information about each step of the recipe as the user hovers over each main task.

A message shows on the task screen to notify the user that customized notes have been added to the recipe. This could be in the form of special decorating instructions; photos or step-by-step videos.

A legend displays at the top of tasks screens to explain the color coding system. To help with accessibility I combined text, icons, and colors to indicate task status.

31 of 38

Design iterations

View and update the status of your tasks for all scheduled recipes

Team view shows users who is assigned to every major step of a recipe

“Mark as done” feature allows users to update recipe status quickly

Single recipe: task view

Single recipe: team view

Task view of daily schedule

32 of 38

Accessibility considerations

Provided multiple options through text, imagery, and video for users to communicate recipe needs to team members

Paired icons with text to make �navigation easier

Chose colors with high contrast to meet accessibility considerations and help improve the visual flow of the designs

33 of 38

Key mockups

34 of 38

Takeaways
Peer feedback
Next steps

Going forward

35 of 38

Takeaways

Impact:

A mobile app is the perfect delivery to meet the needs of this audience. Working in a fast-paced environment with limited space, users need a handheld device that moves with them and works to enhance workflow. This app specifically addresses the two largest user pain points by providing recipe scalability and status updates for quick and timely collaboration.

�

What I learned:

I saw firsthand how my app changed shape and function as I “followed the research” and applied data-driven feedback. To arrive at a product that truly addresses user needs, these research opportunities can not be overlooked. This project showed me the positive impact of using a human- centered design approach.

36 of 38

Peer feedback

“I love the flow of the navigation. I understand what I am supposed to do because the design is so clean.”

“I believe an app like this would be very useful in a bakery. I could see us using it.”

“I love the flow. This really makes sense.”

“The scalability feature is the best selling point.”

37 of 38

Next steps

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

Conduct more user research to determine any new areas of need.

38 of 38

Let’s connect!

Thank you for your time reviewing my work on the Bakers Helper app! If you’d like to�see more or get in touch, my contact information is provided below.

Email: nicole@nicolestephens.com

Website: www.nicolestephens.com/portfolio