audi-web1.png

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)

audi-web1.png

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. 

Artboard 1.png

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.