Define
Scope
Concept design
Course project
Feb - May 2022
Roles
UX Designer
UI Designer
Brand Designer
Tools
Figma
Miro
Background
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.
Problems
- Ordering a baker’s dozen requires lots of scrolling, too much repetition, and creates a high cognitive load for users to remember what they have already selected.
- Main menu landing page shows too many menu options.
- Accessing online ordering from the homepage requires unnecessary pages & clicks.
Watch Original Demo
Objective
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.
Proto-Persona
Personas were inspired through direct observation at the original bagel location.
The scope of this project did not include user research.
Design
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.
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.
Wireframes
Sketches were created using the boxes from the updated user flow, and inspiration from the original and comparable online ordering apps.
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
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.
Pre-Checkout
- Removed top navigation menu from all but home and menu screens to prevent users from navigating away from important ordering screens.
- Moved "Quantity" to be next to the menu item in a colored bar to better indicate that the quantity of the menu item is increased, not individual bagel flavors.
- Changed "Cart" to "Order," as that is more common with online food ordering.
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.
Typography
The font family Open Sans was chosen for the BayGals app for the following reasons
- Legible: This sans serif font was designed to be legible on mobile, web, and even print
- Familiar: As this is a poplar font that people will not distract users
- Modern: Especially when used in extra bold, Open Sans has an appealing modern look
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:
- Many of my early tests used too many colors, making the design appear messy. By the end, I narrowed it down from six to three colors using the 60-30-90 rule.
- Attempts to use a soft pink color to convey feminine energy always found a way to look like an error state. I decided to lean into blue and yellow to focus on the sun/bay energy instead.
- After iteration three, I began testing text/background colors to ensure they passed WCAG AA legibility standards. This is a step I plan to do right off the bat from now on.
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 GuideAnimation
To communicate animations to hypothetical team members and developers, I incorporated animations in the prototype and noted them in the Figma file.
Conclusion
View Final Demo: Baker's Dozen
Conclusion
Summary
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.
Next Steps
To measure the success of the BayGals design, two steps could taken:
- Perform a usability test where participants order a baker's dozen using the prototype I created. Ease, errors, and verbal feedback would be used to improve the design and determine the next steps.
- With the new design on the original site, a preference test could be conducted between their design solution and mine to see which users like better.
