Coffeehouse | Portfolio

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.

Easily find the coffee or menu item they are looking for.

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