App Design Challenge

Green, gray, black, and blue elements create four high-fidelity prototype screens.

App Design Challenge

Challenge: Design an app for a bakery to take inventory of ingredients. Challenge was prompted by the Google User Experience (UX) Certification course.

Problem: Employees of bakeries need an accessible and efficient system for taking inventory of ingredients.

Solution: Stocked, an inventory app that provides a visually accessible and efficient system for bakery employees.

Research

Individual interviews were conducted with a user group who took inventory regularly.

I asked open-ended questions to encourage users to share their insights and personal experiences with the inventory process.

I produced an audio recording of each interview.

On left, picture of woman icing cupcakes with tube of white icing. To right of photo, black text details persona.

User stories were created for 2 main problems we saw Audre and users like her facing to address in the design.

I put together a user journey map to further understand the current experiences of users and their pain points.

Various color containers contain black text stating tasks, emotions, and improvement opportunities.

Define

After thoroughly researching the user group, I noted their pain points and needs in a problem statement.

Following, I wrote a hypothesis statement to refer to, grounding the designs in the original user feedback.

Black text states problem statement and hypothesis statement.

Ideate

I researched competitors to understand the value propositions, pricing, features, and more of similar companies and products.

All information is displayed in the competitive audit.

Various color containers contain black text stating results from competitive audit.

Let the brainstorming begin!

I dreamed of many design options for the app’s various screens in paper wireframes.

The top design choices were selected and included in the digital wireframes.

Asking questions is key to designing wireframes with users in mind:

What tasks will bakers need to complete in the app (signing in, updating ingredient quantities, etc.)?
What elements need to be on each page?
Where can elements be best placed in the hierarchy for the function of bakers?
Is the design navigation clear for users?
Are any necessary pages missing from the design (sign in, contact, etc.)?

Gray shapes and black text are used to lay out the elements on 13 wireframe app screens.

Low-Fidelity Prototype

In the low-fidelity prototype, I focused on connecting screens into flows for crucial tasks in the app such as the following:

• Signing in

• Creating an account

• Updating inventory for ingredients

• Sending list of low-in-stock ingredients to managers

Gray shapes and black text are used to lay out the elements on 13 wireframe app screens with prototype connections in blue.

Testing

Users tested the low-fidelity prototype in a usability study.

Research Questions

How long does it take bakery employees to update the inventory?
How long does it take to create and send an order of needed ingredients?
What can we learn from both processes?

Participants

5 participants
2 men and 3 females, all aged 14-50 years

Methodology

15 minutes per participant
Vernon Hill, VA
Moderated usability study
KPIs (key performance indicators):

Time on task
User error rate

The usability study revealed key insights for improving the design:

Instead of updating the quantity with a text field, a participant suggested including a method to update with one touch.
Participant wondered what defines quantity. It says "15" for all-purpose flour. Is that a quantity measured in pounds, ounces, etc.?
Including the option to sort ingredients by bakery location led to confusion. Is the butter in the pantry or the fridge?

High-Fidelity Prototype

With feedback from users, I began to design the mockups.

Users tested the initial mockups and presented feedback that was crucial to address in the final design.

Affinity mapping helped sort through the various themes of feedback leading to educated design choices.

Various colored text and sticky notes share themes from usability study to address in next design iteration.

Accessibility

Visual accessibility was a key focus when iterating on the mockups.

Buttons, text, icons, screen background color, and other elements had to have a color contrast accepted by W3C Accessibility Standards.

On left, green and yellow containers with text show levels of contrast between colors in high-fidelity prototype screen (right).

Text was added to most icons in the app to avoid ambiguity as universally understood icons are uncommon.

Low-in-Stock Feature

Features that encourage efficiency, reducing repetitive tasks from users, were included.

Every ingredient can be set to a quantity that indicates when the item is low in stock. This quantity is prerecorded when an ingredient is added to or updated in the app.

In the inventory process, low-in-stock ingredients are immediately added to a list.

After taking inventory, the completed list of low-in-stock ingredients can be easily sent to managers for ordering.

Design System

I developed a design system and sticker sheet for this project to help provide a consistent interface, reusable components, and clear documentation.

Text input fields in design system and sticker sheet.

Colors, icons, and buttons in design system and sticker sheet.

Final Designs

Thoughts for Future

Being this was my first app design, I'm beyond pleased with the systematic yet adaptive design process followed (empathizing with users through interviews, sorting feedback, brainstorming design solutions, wireframing, etc.) and the final functioning, easy-to-navigate app design.

Designing the text input fields to use more than color to distinguish between states is crucial for accessibility yet missing in this design. I hadn't yet learned that technique for improving accessibility when designing this app. That will be one of my first improvements in the next iteration, along with overall improved UI design.