MIA LIU
My Role
UX/UI Design,
User Research
Duration
12 weeks
(February - April 2022)
Tool
Figma, FigJam,
Adobe Creative Suite
Background
The Pavement Coffeehouse Mobile Ordering App project aims to create a convenient and seamless mobile app for ordering coffee and food items.
Founded in 2009, Pavement Coffeehouse aims to redefine Boston's coffee culture. The app will enhance customer experience by allowing easy customization, secure payments, and efficient pickup or delivery options. Through intuitive design and integration, the app aims to align with Pavement Coffeehouse's identity while embracing digital transformation.
A mobile app? That's going to be a game-changer. I can already imagine customizing my order and avoiding long lines.
Consumer
Will the app resonate with our consumers and meet their preferences?
Stakeholder
Current Challenges
A critical concern arises from customer complaints about the inability to pre-order, underlining a need for a streamlined process and modern solutions.
Concurrently, the issue of long lines underscores the necessity to enhance operational efficiency.
Our Goal
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.
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
User Research
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 50 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.
Key Questions
How often do you visit Pavement Coffeehouse?
What are the main reasons you visit Pavement Coffeehouse?
How important is it for you to have a mobile ordering option for Pavement Coffeehouse?
What are the main challenges you face when ordering from Pavement Coffeehouse?
What features and capabilities would you like to see in a mobile ordering app for Pavement Coffeehouse?
TOP 3
Easy customization of orders
Ability to save favorite orders
Real-time updates on order status
How likely are you to use a mobile ordering app for Pavement Coffeehouse if it were available?
Likely / Very likely
82%
Competitor Analysis
The goal of this competitor analysis is to assess strengths and weaknesses in coffee industry mobile apps like Peet's Coffee, Joe Coffee, Caribou Coffee, and Starbucks. The focus is on identifying effective and deficient features, as well as potential innovations to include in the Pavement Coffeehouse 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
The user journey map visually depicts a user's path from discovery to placing an order and receiving coffee. This map highlights touchpoints and pain points, offering insights for enhancement.
Information Architecture
Utilizing insights into user needs and preferences, along with market analysis of similar products, I created a customized app information architecture.
DESIGNING AND PROTOTYPING
Wireframes
I created detailed wireframes mapping the coffee ordering app's visual structure. These wireframes offer stakeholders an initial view of design and functionality, forming a basis for refining and enhancing the interface in later development stages.
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
FAVORITE
Add to "favorite" 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
REWARDS
Automatically applies any available rewards or discounts
REWARDS & PROFILE
The Rewards & Profile page tracks progress, unlocks rewards, and displays purchase history. Users level up for offers, redeem gift cards, and reorder favorites easily. Recent orders are also viewable for quick reference.
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
