Case Study:

Oyatsupan Bakers

App Design for Google UX Design Course

Oyatsupan app home page

Overview

My Role

UX / UI Designer

Responsibilities

User research, wireframes, mockups, prototyping, user testing

Timeline

May 2021 - July 2022

Tools

Figma, Adobe XD, Concepts

Brief

  • Learn UX Design by creating a native app for a local bakery from start to finish.
  • Then, build a responsive website version of the app.

Background

For this part of the Google UX Design Certificate course, I was given a prompt ("Design a loyalty app for a local bakery") and used it to practice each stage of a typical design process - Empathize, Ideate, Design, Prototype, and Test.

Initial user research showed that a lot of people with dietary restrictions struggle to figure out which items they can safely order from restaurants. I chose to focus my work on solving that problem.

CONsiderations

  • I chose a real bakery nearby, so the images and most of the branding are theirs.
  • Zero budget; this project was done on my own time and resources.

Results

I created the design for an app and website to address users' dietary restrictions effectively.

Discover + Define

Core Problem

Create an app for ordering items at a bakery that makes it easier for people with food allergies, intolerances, or preferences to find food that fits their needs.

The Users

Smartphone users who want to be mindful of dietary restrictions when ordering food.

User research

I conducted user interviews and created empathy maps to understand potential users and their needs. Research confirmed that speed and convenience were important reasons for using loyalty apps, but they are also helpful in ensuring that customers are confident that they have accommodated dietary requirements if ingredient and allergy information is available.

I also did a competitive audit, and created personas and user journey maps.

Samples of discovery paperwork
(click to enlarge)
Part of the competitive audit spreadsheet.
Thumbnail of Persona document.
Thumbnail image of User Journey map.

Develop

Ideation and early design

I used the Crazy Eights and How Might We exercises to work out possibilities for key screens, then moved to wireframing and prototyping in Figma for the main user flow. You can view that prototype here.

These initial drafts focused on how to organize the information about each item with space for icons to distinguish allergen-free foods. I also worked out a checkout flow that would have all the information to help users feel confident in the payment process.
Early sketches and wireframes
(click to enlarge)
Thumbnail of paper wireframes
Thumbnail of select digital wireframes
Next, I conducted a moderated usability study with the prototype. This was a big help in refining my designs. The most important insights were:
  • The allergen labels were unclear for most users.
  • Users need clearer navigation options after completing the checkout process.
  • Many users prefer to be able to see the items in their cart while completing the payment information.
Samples of usability study paperwork
(click to enlarge)
Thumbnail of usability study notes
Thumbnail of affinity diagram

refining the design

After the usability study, I addressed the insight about unclear allergen labels by developing an icon set for identifying allergens and food preferences. I chose colors to coordinate with the existing brand that would make these icons easy to find and understand. Users would be able to filter bakery items by any combination of dietary requirements.
Wireframes to Mockups
Thumbnail of an example of a wireframe to mockup.Thumbnail of an example of a wireframe to mockup.
I then created mockups for other key pages, and built a high-fidelity prototype that responded to user concerns about the checkout flow. Check it out.
More mockups
Thumbnail of Menu screen
Thumbnail of Dietary Preferences overlay
Thumbnail of Item Detail screen
Thumbnail of checkout screen
Thumbnail of confirmation screen

Responsive wEbsite

The next part of the UX Design course focused on responsive website design. I translated the app designs to a website version for the same user flow.
Website version
Thumbnail of home screen.
Thumbnail of Menu screen.
Thumbnail of Item Detail screen.
Thumbnail of Review Order screen.
Thumbnail of confirmation screen.

Learning

What did I learn?

  • So much! This was my first time going through a complete UX process.
  • Quick sketches on paper as in the Crazy Eights exercise are useful for generating ideas, but the way elements fit together at scale will be clarified in the digital wireframes.
  • I need to regularly check back with my user personas and research insights during wireframing to make sure I'm focusing my energy on real user needs.
  • I saw how invaluable user feedback could be in pushing the designs to be better and more accessible. That said, as a personal project, I had limited access to feedback from historically underrepresented groups. There are a lot more accessibility considerations than I could work into this design.

How does this design make people's lives better?

  • This could really help people who have to be careful with which foods they eat.
  • It made mine better, too, by helping me improve my UX knowledge and skills!

Send me a message

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

Marni Keenan

UX/UI and Visual Designer
Selected Projects
Oyatsupan Bakers
RAFI-USA
Plover Patrol