Design Challenge
App for a local bagel shop
I created this project as a means to practice and test my abilities within UI/UX design and showcase simple branding compared
to the other work in my portfolio.
I was inspired by prompts I selected randomly using Briefz.Biz and Designercize and then modified. Often times if I have an early day, I will pre-order a bagel and pick it up on my way to run errands. This inspired me to create an easier way to pre-order through an app as well as potentially earn rewards.
​
Design: An app / user flow [order ahead]
For: A local bagel shop
To Help: Customers
Situation: When I was still in college, I worked early morning shifts, and being able to pre-order my breakfast made it much easier to get a little extra sleep and save time before work. This app would offer an easy way to pre-order your favorite bagel for breakfast or lunch, and earn rewards. Plus, select specialty coffees, take-home homemade cream cheese, and more!
Potential Next Steps...
-
Expand into order options other than bagels/coffee
-
Expand into reward "games" (think Starbucks for Life)
Task
Target Audience
Design a simple, user-friendly app for people looking to order the perfect bagel ahead of time. Customers will be able to pre-order their favorite bagel options and earn rewards!
-
Students looking to get a bagel before class (HS or College).
-
Adults running errands looking to get a quick, tasty meal.
-
Employees looking to place large orders ahead of time.
Design Process (Action)
Below I expand on my design process while designing the app, whiteboard process, benchmarking, user researching, creating wireframes, low and high fidelity mock-ups, and an overall brand.
User Flow
Before getting into the design, I created a simple user flow to visualize and determine a simple way for the user to place their order. I find this process helps to get a better idea of how the app will work, before trying to design thumbnail sketches.
Whiteboard Session
Before getting into the design, I created a simple user flow to visualize and determine a simple way for the user to place their order. I find this process helps to get a better idea of how the app will work, before trying to design thumbnail sketches.
Wireframes
Before getting into the design, I created a simple user flow to visualize and determine a simple way for the user to place their order. I find this process helps to get a better idea of how the app will work, before trying to design thumbnail sketches.
Branding
After creating the wireframes, I decided to focus on branding aspects
for this mock bagel shop before working on high-fidelity mock-ups.
I chose a color palette, typography, created user-friendly icons, and came up with a simple logo and brand name. When designing these, I did experiment with mock-ups as well before finalizing the designs to make sure everything flowed nicely and fit accessible design standards.
High-Fidelity Mock ups
Before getting into the design, I created a simple user flow to visualize and determine a simple way for the user to place their order. I find this process helps to get a better idea of how the app will work, before trying to design thumbnail sketches.
Result
After creating sketches and wireframes, I designed high-fidelity mock-ups to showcase what the app may look like in reality. During this process, I designed simple icons and picked out a color palette and typeface.