Daily Projects Coffee Bar

Project Overview

Daily Projects is a local coffee shop for sandwiches, coffee, or other beverage in Algonquin, IL. The current website’s design is outdated, unorganized and users cannot easily find online order features. How might we redesign the site so users place orders in advance, pay for them through the site, and then pick them up at any convenient time?

Phase 1: Research

We wanted to understand the website’s business goal, customer demographics, what type of users daily projects have, and what motivates people to visit the café website. Considering these goals, we conducted stakeholder interviews, two surveys, and competitor analysis.

Stakeholder Interview

We sat down with Heidi, the owner of daily projects, and understood her frustrations with the current website. Our key findings were broken up into different sections Business Goals Driving online orders, Customer Demographics understanding what type of users daily projects have, and Heidi’s personal needs, which were a compelling design and online order functionality.

Key findings

Online Survey

We created two surveys, one for general café users and the other for Daily Project customers; we were able to connect to daily project customers via their Instagram.

 

 

Some key insights were that both users are concerned about the menu, online orders, and hours of operations; however daily project customers are more interested in dietary accommodations and the cafe’s philosophy.

General café user

Daily Projects customers

Survey Insight

Have you ever given up on an online order halfway through checkout? If yes, why?

"I am confused by the terrible website design or when they forced me to create an account before ordering."
Daily Projects Customer

Competitor Analysis

  • Competitor analysis inspired us to design a website with design consistency, and a user-friendly flow. 
  • We analysed several different direct and indirect competitors.
  • Some key finding from direct café competitors was seeing how responsive some sites were by having design consistency across all pages. 
  • What we learned from our Indirect competitor like Einstein bros bagels was how they utilized imagery in their menu and really pushed towards online ordering.

Tailored towards rewards program

Ordering ahead model

Menu layout with different sections

Sawada explain where their coffee is from

Compelling Photography

Uses Doordash for online orders 

Comprehensive landing page with valuable information 

Simple Navigation

Design Consistency

Phase 2: Definition & Ideation

After we conducted an interview and surveys, we could better understand the café customer demographic such as age, occupation, and eating habits, so we decided to have two distinct user personas. Each user had different pains, gains, and journey to meet their goals.

User Persona 1

Joseph is a college student and is active on social media. He likes coffee and pastry and sitting in a café for his schoolwork, but he has dietary restrictions. He needs to know the ingredient used and alternatives available on the menu with his phone before making a trip to the café. How can we redesign the website to welcome and accommodate people like Joseph who have food allergies and dietary concerns?

User Persona 2

The second user persona is Jill Kim, a finance manager and she is rushed in the morning, so she prefers to order her coffee and food online with her phone to cut out the wait time. An easy and fast online order process will allow her to call on the go and save time.  How might we redesign the checkout process to make it easier on the user so that they don’t give up halfway through?

Brainstorming

After that, we made two empathy maps of what users think, do, say, and feel. Joseph checks the Websites for Menus and diet accommodations, and avoids diary and likes gluten free options. Also, he follows his local café on social media. Jill orders her usual drink and breakfast sandwich before work in the morning.

And then we did the I like, I wish, and what if methods and prioritized these ideas. These gave us an idea of what we could do to solve users’ problems. We decided to focus on “Do now” first and “Do Next” After that, we went back to our research data, the stakeholder interview, and two surveys to continue thinking along with our research data to solve users’ problems. The Menu, Hours of operation, and online orders are what the stakeholder, general users, and daily projects users want for a café’s website. Additionally, stakeholder needs better UI design, dietary accommodation is essential to daily project users, and general users like to see ingredient sourcing and quality.  

Key Components:

Integrating all our ideas, we were able to determine the three key components Menu, Hours of operation, online order. Menu should be easy to read on the phone, and include ingredient sourcing and quality, Vegan, Gluten-free options. Hours of operation should be easy to find for users, Online order process must be Fast and convenient to use, including Customizing options, Multiple payment options, Easy UI interface, Login with Google/Apple account.

Phase 3: Prototyping

We started with a User Flow to create a better version of the checkout process. This would allow us to nail down these steps without UI design getting in our way.
Key Components: Online Order

Streamline online order

  • Make Sign-In optional
  • Allow for substitutions
  • Add the easiest payment methods

Full User Flow

User Goal: The user wants to order a latte with oat milk through the cafe’s website and pick up his latte as soon as possible.

Substitutions

Mid-Fidelity Mockup

We decided to go with a mobile first approach. Whether it’s scanning the menu barcode, completing on online order, or getting navigation on maps app, most Daily Projects consumers will access the website on their phones. We wanted to focus on responsive, informative, efficient, and joyful concepts.

Style Tile

Earth tones and warm neutrals emphasize the coffee. Blue and Green accents underline the quality of ingredients used in both their drinks and food.

High-fidelity Prototype Navigation

Putting all the pieces together. The home page touches on Menu and Online Orders, the Online Orders has icons and color and the Customization page has fun micro-interactions.
image-18
image-19

Phase 4: Testing & Iterating

We conducted user testing with six users that represented each potential user type to reveal possible usability problems. We observed them using the high-fidelity prototype and how they performed three tasks.  First, we would like to see how long users take the time and the process of ordering peppermint mocha. Second, we like to know the user’s experience with the ingredients used and the alternatives available on the menu. Third, we like to observe how easily users locate the store’s phone number.

High-fidelity Prototype Usability Test Analysis

Here is a summary of our finding that we asked users to perform.

image-20

Usability Test Iterations

Because we went through the testing process, it improved our product by understanding that users need imagery in the menu to know where to look for specific items, ultimately leading to fewer clicks. We prioritized this problem first because it was our most prominent issue.

image-21

Final High-Fidelity

Similar to our first original high fidelity, this is our final version, where we went back and focused on feedback from our testing.

Click to see the prototype

High-fidelity
final-prototype
Final Thought

The three key components of creativity adopted to the Daily Projects’ site so that users’ most paint points are solved, but we need to continue to develop more features such as a royalty program, membership, FAQ section, and customer review sections. Also, the stakeholder is considering changing the current POS to a different one to provide customers with a better order and payment system. Our user research for Daily Projects customers will help how the stakeholder review POS software and affect users’ experience.