MIA LIU
Pavement Coffeehouse
A Mobile ordering app for a cafe

Project Vision
Pavement Coffeehouse was born in 2009 with the goal of creating a unique, personal, and inspired coffee scene in Boston. My vision is to create a mobile ordering app that provides Pavement Coffeehouse customers with a seamless and intuitive experience, allowing them to quickly and easily place orders for pickup or delivery, customize their drinks and food, and pay securely and conveniently.
Problem
Goal
Pavement Coffeehouse does not currently have a mobile ordering app, which may be causing frustration and inconvenience for customers who want to order and pay for their coffee and food items ahead of time.
The goal is to create a mobile ordering app for Pavement Coffeehouse that enhances the customer experience and increases revenue by providing a seamless and convenient way for customers to order and pay for coffee and food items ahead of time.
My Role
UX Research
UX Design
Wireframing
UI Design
Prototyping
Design Thinking
EMPATHIZE
-
User Survey
-
User interviews
-
User research
-
Market research
DEFINE
-
Personas
-
User journeys
-
Empathy maps
IDEATE
-
Storyboards
-
User flows
-
Information Architecture
PROTOTYPE
-
Wireframes
-
Mockups
-
Prototypes
-
UI Design
TEST
-
Usability testing
-
A/B testing
UNDERSTAND THE USER
Initial Survey
To better understand the existing customer of Pavement Coffee House, I took the initiative to get in touch with the store manager to send out an online survey to a sample size of 150 customers. The purpose of the survey was to gain insights into customer preferences, behaviors, and pain points when it comes to the coffee ordering and payment process.
OBJECTIVE
To understand the needs, preferences, and behaviors of Pavement Coffeehouse customers regarding mobile ordering apps.
METHODOLOGY
Online survey distributed via email and social media to a sample of Pavement Coffeehouse customers who have visited the coffee shop at least once in the past month.
KEY QUESTIONS
How often do you visit Pavement Coffeehouse?

What are the main reasons you visit Pavement Coffeehouse?

What are the main challenges you face when ordering from Pavement Coffeehouse?
How important is it for you to have a mobile ordering option for Pavement Coffeehouse?


What features and capabilities would you like to see in a mobile ordering app for Pavement Coffeehouse?
How likely are you to use a mobile ordering app for Pavement Coffeehouse if it were available?
Easy customization of orders
Ability to save favorite orders
Real-time updates on order status
Likely / Very likely
91%
Interviews
OBJECTIVE
To understand the coffee ordering and payment process from the perspective of Pavement Coffeehouse customers, and identify pain points and opportunities for improvement.
METHODOLOGY
In-person interviews conducted with 5 Pavement Coffeehouse customers who had ordered coffee
in the past week
KEY INSIGHT
Several customers expressed frustration with long wait times and crowded lines during peak hours, and indicated that they would be more likely to order from Pavement Coffeehouse if there was a mobile ordering option that allowed them to skip the line and save time.

"I love the coffee here, but the lines can be a real pain during my morning commute. If there was a way to order ahead and pick up my coffee without waiting in line, I would definitely use it."
Competitor Analysis
The objective of this competitor analysis is to identify the strengths and weaknesses of existing mobile ordering apps in the coffee industry, including Peet's Coffee App, Joe Coffee App, Caribou Coffee App, and Starbucks App. The analysis will focus on identifying features that are working well, features that need improvement, and potential new features that can be incorporated into the Pavement Coffeehouse mobile ordering app.

User Persona
Based on the insights gathered from the target audience and market research, I created a user persona to represent the typical user of the coffeehouse app.

Empathy Map
SAYS
-
"My mornings are always rushed, so I often order my
food and coffee on the go."
-
"It would be great if the baristas could remember my
usual order so I don't have to repeat it every day."
-
"Long lines stress me out, I don't want to be late for work."
THINKS
-
"If I could pre-order my coffee and food, I could save precious minutes in the morning."
-
"Customizing my order can be confusing, I don't want to end up with the wrong thing."
-
"I would love to be notified of new deals to save money."
Emily Kale
DOES
-
Checks phone while waiting for order.
-
Scans the menu for seasonal drinks and new offers.
-
Collects reward points to earn special deals.
FEELS
-
Anxious about being late for work.
-
Frustrated when the lines are long and slow-moving.
-
Disappointed when they forget her reward card
User Journey Map
A user journey map for the Pavement Coffee House app is a visual representation of the steps that a typical user takes to interact with the app, from initial discovery to placing an order and receiving their coffee. The user journey map helps to identify the key touchpoints and pain points in the user experience and can provide insights into areas for improvement.

Information Architecture

DESIGNING AND PROTOTYPING
Wireframes
I used Figma to create a set of wireframes that provide a detailed blueprint of the overall visual structure and layout of the coffee ordering app. These wireframes enable stakeholders to visualize the product's basic design and functionality before moving into more advanced stages of the development process. They provide a preliminary foundation for the app's interface, allowing for further refinement and optimization in subsequent phases of the design and development process.








Wireframe Testing
I conducted a wireframe testing session to gather feedback on the initial design of the coffee ordering app. I recruited 5 participants who represented the target user demographic and asked them to perform a series of tasks using the wireframes. I also conducted a follow-up survey to gather additional feedback.
RESULT
Overall, the participants found the wireframes to be easy to navigate and intuitive. However, some suggested improvements were identified, including:
Clarity in menu items
Some participants found the menu items to be unclear and suggested adding more details such as the ingredients and nutrition facts.
One tap reorder
Allow users to view their order history within the app, making it easier for them to reorder their favorite items and track their past purchases.
Loyaty program tiers
Implement multiple levels of loyalty programs with benefits based on how much a user spends, encouraging repeat business and larger purchases.
High-Fidelity Mockup
After conducting wireframe testing to gather feedback on the initial design, I moved on to creating high-fidelity mockups of the coffee ordering app. Based on the feedback received, I decided to incorporate an elegant and modern look for the app while also keeping in mind the theme color of Pavement Coffeehouse. The high-fidelity mockups include all the key features and functionalities of the app, such as menu selection, customization, digital payment options, and order tracking. The mockups were tested and refined several times to ensure a seamless user experience and to address any potential issues.


Style Guide

HOME PAGE
The homepage is the initial screen that users see when they launch the coffee ordering app. It serves as the main hub for accessing various features such as search, location change, and menu.
SELECT LOCATION
Easily change the location to find the nearest coffeehouse.
OFFERS
A section highlighting the latest offers and promotions.

SEARCH
Easily find the coffee or menu item they are looking for.
MENU
Browse through various coffee drinks, pastries, and other items available at the coffeehouse.
PRODUCT PAGE
The product page allows customers to select their desired cup size and quantity of their drink, view ratings and reviews from other customers, and save their favorite items by clicking the "like" button.
RATING
Make informed decisions before placing order


FAVOURITE
Click "favourite" for a faster ordering experience in
the future
SIZE & QUANTITY
Allows for customization and ensures that users can get the exact coffee they want
ORDER DETAILS
The Order Details page displays the items that the user has added to their cart, along with their respective prices, quantities, and any customizations they have made. Users can also review their order subtotal, taxes, and total cost.
ORDER DETAIL
Review the summary of the selected items
ADD ITEMS
Add additional items to the order before finalizing it


DELIVERY OPTIONS
Choose the option that best suits your needs
APPLY REWARDS
Automatically applies any available rewards or discounts
REWARDS & PROFILE
The Rewards & Profile page allows users to track their progress toward rewards and view their purchase history. Users can collect points and level up to unlock new offers and rewards tasks. They can also view and redeem gift cards. The page includes a section for users to view their recent orders and quickly reorder their favorites.
LEVEL
Level up to unlock new rewards
NEW OFFERS
Stay updated on the latest deals
REWARD TASK
Earn additional rewards points or progress towards free coffee


GIFT CARD
Easily keep track of the gift card balance
RECENT ORDER
Reorder with just a few taps
HIGH-FIDELITY PROTOTYPE




