Case Study: BayGals

Bagel ordering made easy

BayGals home mock-ups tablet, desktop, and mobileTry it Out



Concept design
Course project
Feb - May 2022


UX Designer
UI Designer
Brand Designer


Figma icon


Miro Iicon



Inspired by weekly frustrating experiences ordering bagels online from my local bagel shop, this UI-focused redesign concept project aims to improve the design for bagel ordering.

For the purpose of sharpening my branding/UI skills, the original bagel business has been replaced with a hypothetical business, BayGals, that serves similar customers in the same region.

View Project Brief


Watch Original Demo


Create a more direct access point for online ordering, restructure the menu, and baker’s dozen ordering so customers will have a lower mental load and place their orders faster.


Personas were inspired through direct observation at the original bagel location.
The scope of this project did not include user research.

Persona: Meet Sue


User Flow #1: Baker's Dozen

As a mom of 2 teens, I want to order a baker’s dozen of different flavors, so I can give my family the flavors they prefer.

Original Flow - View larger

Updated User Flow

Updated Flow - View larger

Original User Flow

Flow Changes

In the updated flow, the two “choose your location” screens from the original design are consolidated into a pop-up where users can select the location and pick-up time. This allows for users to get to the menu for online ordering faster.

Another difference in the updated flow is adding a screen where users will see menu categories before seeing what items are within those categories. This will only be relevant for mobile users as an effort to cut back on endless scrolling.


Sketches were created using the boxes from the updated user flow, and inspiration from the original and comparable online ordering apps.

Sketched wireframes showing bagel ordering

Baker's Dozen Soution

To place an order of 13 bagels, the original app has users select one of 19 bagel flavors with a radio button 13 times in a row. That's a lot of scrolling and holding which flavors one previously selected in their mind!

Instead, the wireframes above depicts the 19 bagel flavors being sorting into a few different groupings: sweet, savory, and plain (gluten-free was removed in later designs). The reason for the categories is to reduce the cognitive load for users. Instead of viewing all 19 flavors at once, they only see a max of 5 flavors.

Radio buttons have been replaced with steppers so users can quickly input and adjust how many they want of each flavor without scrolling.

Mid-Fidelity Solution

Baker's Dozen Mid-Fi mock-up

Iterative Design

Mid and high fidelity prototypes were created and modified with feedback from a mentor and a colleague. Below are a few examples of these changes.

Radio Dropdowns

Removed the "confirm" button and instead dropdown closes once item is selected to cut down on the number of taps.

Meat dropdown #1
Meat Dropdown #2


Mid fidelity cart screen
High Fidelity cart (now says "order") screen

See the Prototype Improvements

UI Design

Mood Boards

To develop the aesthetic of the design, I created two mood boards based on the mission and location of the business. BayGals is a women-owned business by the bay in Maryland. With this I wanted to convey the feminine energy and an aura of being by the water, while still catering to an upscale audience.

While mood board #2 is more bold and beachy, using higher saturation colors could evoke a sense of being donut shop instead of a bagel shop. Mood board #1’s more pastel color palette helps distinguish itself as something distinct while still being light and fun.

Moodboard #1
Moodboard #2


The font family Open Sans was chosen for the BayGals app for the following reasons‍

Typography Examples

Color Palette Iterations

After choosing the mood board, I experimented with how to incorporate the colors into the mid-fidelity frames. Along the way I ran into multiple design challenges:

Four versions of the home screen with different colors combinations on each.

Color Palette

Orange, light yellow, yellow and blue color palette

The blue, yellow, and orange echo the bay cheery vibe of BayGals. The orange call to action buttons draws the eye around the page. The yellow background is a focal point for the main business goal, ordering food! The blue ties into the water at the bay while adding a darker anchoring presence.

Style Guide

With the established color palette, typography, etc. a style guide was created to document and communicate the choices to others.

View Style Guide


To communicate animations to hypothetical team members and developers, I incorporated animations in the prototype and noted them in the Figma file.

Series of screens with descriptions of animation instructions on the sides


Mock-up showing menu screen across three different screen sizes

View Final Demo: Baker's Dozen



Inspired by a real problem with another bagel ordering app, the design for BayGals has aimed to make ordering bagels smoother by removing unnecessary clicks, grouping bagels by flavor to minimize cognitive load, and adding steppers for each flavor to cut down on scrolling.

After a few failed sample attempts of trying to incorporate too many colors, the branding for BayGals was developed and implemented successfully. To assess the effectiveness of the designs, usability testing should be conducted.

Status Update

It appears that the original online ordering web app also identified the problem with ordering a baker's dozen of bagels and have since updated their design! Their new solution uses steppers, similar to my design, but does not use the categorized drop downs or counter.

Original Check Express bagel ordering, updated.
My bagel ordering solution

Next Steps

To measure the success of the BayGals design, two steps could taken:

Three mobile screens showing sequence of orderingTry it Out

Thank you for your time!