Background
Nick’s Bagel and Espresso is a local bagel and coffee chain in Orange County started and owned by my dad, Nick Choe.
The flagship store is located in Fullerton, and due to popular demand, Nick has recently expanded to a second location in Anaheim.
With two locations under his belt, I offered to design a website for his business to drive revenue and help facilitate a positive customer experience.
The Problem
No Existing Website: Despite expanding to a second location, there is no existing website where users can view centralized information, resulting in customers having to cross reference multiple resources such as Yelp, Uber Eats, and Doordash to get basic information
Customer Pain Points: Yelp reviews indicate that customers expressed some frustrations such as long lines and wait times
Marketing & Branding: With no established website, there is little to no brand identity and no resources that the stakeholders can use to market their business
Project Goals
Benefit the Stakeholder and Customers: Collaborate with the stakeholders to design a clean and simple website that helps address customer’s pain points (being able to order online, view availability of menu items, centralized information regarding general shop information), leading to a positive customer experience
Tell a Story: Market the store by leaning into the appeal of a family-owned small business so users feel a sense of community and connection with the owner
Project Type: Responsive Web
Role: UX/UI Designer
Tools: Figma, FigJam, Zoom
Duration: 65 Hours
The Design Process
Empathize
→
Define
→
Ideate
→
Prototype
→
Test
01 Empathize - Uncovering Stakeholders and Users Needs & Pain Points
Competitive Analysis
I completed a competitive analysis of locally owned and franchise bagel shops such as: Bageloo, Einstein Bros, and Pop’s Bagels. Given the fact that I wanted to lean into the appeal of a small business for Nick’s Bagel and Espresso, I wanted to compare and contrast the differences in styles, features, and functions that are included in the varying types of business websites.
Strengths:
Showcases their strengths while maintaining the appeal of small businesses by advertising local accolades and tells a story of how the business started from the owner’s passion for bagels and coffee
Displays a gallery of their store, food, and drinks
Weaknesses:
No nutrition facts are not displayed for bagels or drinks
Customers are unable to order online on the website
Overwhelming and cluttered home page given the amount of photos, menu items, and accolades listed
Strengths:
High production value in their displayed photos and a playful tone throughout the website
Effectively categorizes the different products they offer (sandwiches, bagels, smear, etc) and displays a CTA under every product
Offers rewards and incentives for customers based on loyalty and purchases
Weaknesses:
Despite selling drinks, the marketing focus is primarily on the bagels and sandwiches
Can only access home page by clicking on logo - unable to access home page from top navigation
Strengths:
Home page displays media outlets that store was advertised on and positive customer reviews
Has high production value behind the displayed media while maintaining small business appeal with “About Us” page
Offers online ordering and local delivery directly on the website
Displays relevant health information (Gluten Free)
Weaknesses:
None of the drinks are advertised on the website - had to confirm drinks were sold by checking Yelp
Although the “About Us” page is displayed on the home page, “About Us” page is not listed on top navigation
User Interviews
Insights:
Both of the small business websites had an “About Us” page while the major franchise website didn’t - this validates the fact that there is an appeal to understanding the back story of a small business as customers are more inclined to support a small business if they know their story.
The most effective website seems to incorporate aspects of small business and major franchise websites which is what Pop’s Bagels has successfully done:
High production value behind their photos with a clean and simple UI
Nutrition facts listed
Marketing their positive reviews and accolades
Ability to order online
I conducted one-on-one interviews with two stakeholders and three participants that frequent bagel shops.
With the stakeholders, the primary objective was to understand the brand identity and what they are looking to achieve with a website.
With the other participants, the primary objective was to identify pain points of bagel shops they currently dine at, what participants look for in a bagel shop’s website, and confirm if there is an appeal to understanding the backstory of a small business.
Key Questions
Stakeholders:
In a few words, how would you describe your brand
What are the biggest problems you think your customers currently face, why?
What are you primarily looking to achieve with a website for your business?
Are there specific non-negotiable features that you would like included in the website? If so, what are they?
Consumer:
What are some problems you currently experience when visiting local bagel shops?
What are some features included in a website for small businesses that lead to a positive experience?
Do you think small businesses have a certain appeal compared to major franchises? If so, what are they?
Insights
Stakeholders:
Brand Identity: homemade, community, quality food & service, inviting, quick, comfortable, smile, courtesy
Stakeholders pride themselves on having a local clientele and serving the community - knows customers on a first name basis
Current problems customers face: long lines & wait times, items selling out too quickly, customers unable to differentiate deals and offers between the two locations
Stakeholders want to use the website for: marketing & advertising purposes, help alleviate long lines by allowing customers to order online, establish a relationship between themselves and consumers by telling their story and offering a method of feedback
Consumer:
Current pain points of local bagel shops include: lack of customer service, unclear menus, long lines, and items selling out too quickly
More inclined to think negatively of a small business if they have a poorly designed website
Consumers look for general information regarding the shop (hours & address), detailed menu, contact information, and pictures when visiting bagel websites
All consumers agree it is important to understand the backstory behind a business because there is an underdog appeal and would make customers want to share the business with others - feels personable
02 Define - Aligned with Stakeholders and Framed the Core Problems
User Persona
Problem Statements
One of the primary pain points that the stakeholders identified for their customers are long wait times and items selling out too quickly. This may result in a negative experience for customers in a rush or expecting to purchase their favorite item that has already been sold out.
The consumer participants pointed out that some menus for local bagel shops are not detailed enough. Customers that are health conscious or have allergies may rely or even expect a detailed menu with ingredients and allergy warnings listed.
Two user personas were created that aligns with the pain points identified during user interviews.
James is a financial analyst with busy mornings that wants to get their breakfast in an efficient manner.
Sarah is a health conscious mother of two who wants the best and freshest ingredients for her children.
I’d like to know which items are in stock whenever I plan to visit the store because there are instances where my favorite item is sold out upon arriving at the store.
How might we help inform the customers which items are selling fast or out of stock so they can properly time their visit and purchase the items they want?
I’d like to be able to understand the backstory behind the local business because I think it is important to support small businesses and understand what sets them apart from major franchises.
How might we tell a story that showcases the origins of how the store was started so customers can feel more connected with the owners and business?
I’d like to see the ingredients and allergy information listed on the menu because I want to understand what I am consuming and make sure I am not allergic to any of the ingredients.
How might we design a menu that properly lists out the ingredients and relevant nutrition information so its easy to read for the customer?
03 Ideate - Explored Design Directions to Address the Defined Problem
Feature Roadmap
I had to identify the essential features to begin designing the key pages that address the stakeholders concerns and customers pain points.
One of the primary features needed was the backstory of the company that shares a story of how the store began and gives more information about the owner. By providing a backstory, customers feel emotionally connected to the store which results in customers wanting to support the small business rather than simply choosing to. By making the business feel more personable, there is a stronger brand loyalty, trust, and connection.
Another primary feature is the ability to order online. Given the fact that bagels and coffee is primarily a breakfast food, a majority of customers stop by to grab a quick bite before heading into work, so being able to efficiently order to avoid long waits would lead to a positive customer experience. At this point, I had to speak with the stakeholders to determine if it would be more feasible to have customers order online directly through the website or link a third party ordering website.
A detailed menu would be necessary for customers curious about the ingredients and availability of products.
User Flow
The detailed menu listed on the website would not only have the ingredients listed but also indicate if the item is out of stock. Nick has to bake the bagels fresh every morning, and as a result, only a limited amount of each type of bagel is made as Nick would have to throw away the leftover bagels at the end of the day which would affect profits. Some bagels tend to sell out faster than others so some customers may come in expecting a certain type of bagel only to find out they are sold out.
I created a user flow that would help address this problem: check menu item availability and order as needed.
04 Prototype - Translated Key Concepts into Interactive Prototypes
Low/Mid Fidelity Wireframes
Home (Desktop)
Menu
Feedback from Stakeholders
Branding
High Fidelity Wireframes
I designed low/mid fidelity wireframes that would be shown to the stakeholders for feedback. With no existing website, I wanted to show the stakeholders the general idea for some designs to see which would align with their needs and how feasible it would be with the business constraints before converting them into high fidelity wireframes.
The home page would feature the general information regarding the stores that the potential customers may need while including a feature section that would spotlight ongoing deals. An additional “Our Story” page was designed to showcase the backstory behind the store and showcase photos of the owners for a personal feel.
Customers would also be able to send a message directly to the owners with any questions or concerns and view the menu for detailed information regarding ingredients and nutrition facts. Once customers have decided on what they would like to purchase, customers would be able to order directly on the website for pick up to avoid potential long lines.
Home
Order Online
Menu Expanded (Bagels)
Home (Mobile) / About us / Contact Us
Online Order
With my low fidelity wireframes designed, I met with the stakeholders to explain the rationale behind each design based on the information I gathered from user interviews. The stakeholders generally had positive feedback regarding the overall design, but provided some feedback that I would need to take into consideration when designing the first iteration of high fidelity wireframes.
Insights
Use Third Party Websites to Handle Online Ordering (Uber Eats & Doordash)
Given the fact that the stores are already listed with third party online ordering websites, the stakeholders thought it may be too confusing if we offered an option to order directly on the store website as well. They thought it would be best to simply link the Uber Eats and Doordash on the store website. The stakeholders also believed that it would not be feasible to manage orders directly on the store website given the price, manpower, and time constraints.
Omit the “Contact Us” Page
The overall tone and mood of the website should be warm and inviting. The stakeholders believed that the “Contact Us” page seems too formal and more suited major franchises that sell a variety of products (ex: electronics). Instead, the contact information for each shop would be clearly listed on the page for customers to call in for any questions or concerns rather than sending a message which may take time to review given time constraints while working.
Highlighting Popular Items
The stakeholders agreed that it would be easy for them to list out the sold out items on the menu in real time; however, it would be difficult to indicate which items are in low inventory in real time. Rather than listing menu items as “Low Inventory”, we decided that it would be best to highlight the most popular menu items and have a small excerpt on the page that advises most popular items tend to sell out quicker than the other items. It was emphasized that the tone of this excerpt would need to be friendly and welcoming.
Color Palette
Although the stakeholders did not have an established website, they did have an established logo. The stakeholders expressed that they would want the color palette of the website to match the primary color of the logo for consistency.
UI Library
Logo:
The stakeholders already had an established logo that they were displaying in front of the store. For the sake of consistency, I decided to use the logo throughout the website and make sure the color palette complemented the logo.
Color Palette:
The inspiration behind the color palette was coffee and bagels - obviously! I wanted to make sure we keep a warm and inviting tone with the color palette. With the primary color being a rich brown, I decided to make the secondary color a light brown that is reminiscent of iced coffee or freshly baked bagels. I believe the primary and secondary color worked well together to create a cozy Autumn/Fall mood while representing the products sold at the store. The neutral color is a creamy white that can represent the cream cheese one would smear on a bagel or creamer in a coffee.
Typeface:
Raleway was used for the header to give a sense of sophistication one would expect from a nice up of coffee while Lato was used for the body text due to its friendly and welcoming tone.
With the stakeholders feedback on the low fidelity wireframes and UI library established, I designed the high fidelity wireframes to bring everything to life.
One of the biggest challenges I faced was finding pictures of each individual menu item. Given the time constraints, I was not able to take a picture of every single menu item that would be listed on the website; instead, I looked online to find which website had photos of menu items that would best align with the overall tone of the store. I decided to copy photos from Einstein Bros for the menu items to add them on the prototype as the photos had a rustic mood with settings that matches our established color palette.
I was able to take some photos of the stores, certain menu items, and stakeholder to include into the home and about us page. I thought it was important to have photos of the owner included in the about us page to give it a human touch and put a face to the name.
As I speaking with the owner to figure out what to write about the backstory of the store, the primary theme that came to mind was: a family man that took a chance to pursue his dreams. I wanted to emphasize the fact that Nick had to take a leap of faith to start a business in something he was passionate about for the sake of his family. I felt like this is a story that a lot of people can relate too and inspires others to pursue their dreams, no matter what their age or circumstances are.
Our Story
Menu
Menu Item (Everything Bagel)
05 Test - Ran Usability Testing to Refine Design
Usability Testing
Iterations
Before
Methodology
One-on-one moderated usability testing with two of the stake holders and three participants that frequent bagel shops using an interactive Figma prototype.
Goals
Understand the overall usability of the high fidelity prototypes
Get feedback from users regarding overall visual design of the menu and identify areas for improvement
Identify the major pain points that users may experience when attempting to check if a menu item is sold out
Confirm the design, tone, and mood matches the company’s brand identity
Tasks
Place an order online for pick up/delivery from the store’s website
Check if a menu item’s availability by accessing the full menu on the website
Key Insights
Information Architecture
Participants advised that the description of favorite menu items (warning that favorite items tend to sell out faster) should be on the top of the menu page rather than the bottom
The first few photos shown on the “Our Story” page should be of the owner for a personal touch and the photos of the store should be towards the bottom
Add a “Popular Items” section at the top of the menu for stakeholders to market certain items
Add/Remove Information
Omit prices from the menu page since the prices will be listed once the customer clicks on the menu item
Participants pointed out the fact that nutrition facts were not properly listed on menu items
Given the fact that nutrition facts change based on whats added to the bagel, there should be an option for customers to select the different add-ons and see the different prices and nutrition facts with the add-ons
The current layout doesn’t allow customers to see ingredients and nutrition facts for customized bagels, only the prices
Design
Participants pointed out that the “Order Online” page looks bland and can be improved
Opportunities
Change the overall design of the “Order Online” page
Allow participants to select the different customization to bagels to compare prices and nutrition facts
Display warning that favorite items tend to sell out quicker to the top of the page
Omit prices from the menu page as it will be displayed when customers click on the specific menu item
Change the order of the photos displayed on the “Our Story” page
Add a “Popular Items” section on the menu for marketing purposes
Change the overall design of the “Order Online” page
Allow participants to select the different customization to bagels to compare prices and nutrition facts
Before
After
After
Next Steps
Takeaways
Final Results
Marketing
Showcase the stores positive customer reviews and awards/accolades from local government to validate credibility for marketing purposes
Reward System
Implement a rewards system (points) for any orders made online to incentivize customers to use the website. This may potentially entail customers being able to sign up for an account or register their phone number
Custom Animation/Graphics and Gallery
Given the constraints, I was not able to design any custom animation or graphics that I saw on some competitor’s websites during the competitive analysis. Custom graphics and a gallery of photos throughout the website could further reinforce the brand identity and connection with the customers
General Insights
This was the first project I had where I designed for desktop as all of my previous experience was with mobile devices. I realized that I made a lot of mistakes with sizing, scale, and spacing when converting my mobile designs to desktop. One of the key insights I gathered from this capstone was the importance of whitespace throughout my desktop designs.
Challenges
With the “Our Story” page being so text heavy, I had to learn how to properly space and format the text so it would be easy for readers to digest without feeling too overwhelming. My very first design for the “Our Story” page felt like reading an essay so I initially had some difficulty trying to design the text so it flows better but I was able to understand how to utilize photos, quotes, whitespace, and sizing to optimize the design for the user.
What Did I Learn?
I learned that I need design with the user in mind but understand business constraints that limit what could be possible.
This was the first capstone where I worked with a real business and although I had some ideas, they were quickly shut down when I presented them to the stakeholders due to business constraints. For example, I originally wanted to design the website so users can order directly on the website (without the use of a third party website), but the stakeholders advised that they do not have the manpower to operate and monitor the website, and it would be easier to stick with the third party websites since the business is already listed with them.
Another example is when I wanted to indicate directly on the menu when a certain item is running low on inventory. Although this sounds ideal for the users, the stakeholders advised that they would not have the ability to update the information in real time. As a result, I had to think of an alternative design that still met the users needs (marking favorite items and indicating that favorite items tend to sell out quickly)
Overall, I learned that I need to consider both the users and stakeholders needs when designing which may result in pivoting and compromising as needed. Communication with the stakeholders is key.
What Would I Have Done Differently?
I would have liked to include more nutrition facts for each menu item. Given the constraints, I was not able to obtain and add specific nutrition facts such as carbs, fats, protein, etc. I think it would have been beneficial for both the users and stakeholders to list all of the nutrition facts that one would see on the back of the grocery items, but unfortunately the stakeholders did not have that information for me to include.