top of page

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.



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


UI Design


Design Thinking


  • User Survey

  • User interviews

  • User research

  • Market research


  • Personas

  • User journeys

  • Empathy maps


  • Storyboards

  • User flows

  • Information Architecture


  • Wireframes

  • Mockups

  • Prototypes

  • UI Design


  • Usability testing

  • A/B testing


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. 


To understand the needs, preferences, and behaviors of Pavement Coffeehouse customers regarding mobile ordering apps.


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.


​How often do you visit Pavement Coffeehouse?

Screen Shot 2023-03-03 at 17.48.28.png

What are the main reasons you visit Pavement Coffeehouse?

Screen Shot 2023-03-03 at 17.48.33.png

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




To understand the coffee ordering and payment process from the perspective of Pavement Coffeehouse customers, and identify pain points and opportunities for improvement.


In-person interviews conducted with 5 Pavement Coffeehouse customers who had ordered coffee 

in the past week


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.

Asset 1 copy.png

"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.

Competitor Analysis Chart.png

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.

User Persona - Emily.png

Empathy Map


  • "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."


  • "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


  • Checks phone while waiting for order.

  • Scans the menu for seasonal drinks and new offers.

  • Collects reward points to earn special deals.


  • 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.

Journey Map 4.png

Information Architecture

Information Ar.png



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.

03 Customization 1.png
04 My order.png
06 Confirmation.png
05 Checkout.png
02 Saved Items.png

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.


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

Group 3158.png


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.


Easily change the location to find the nearest coffeehouse.


A section highlighting the latest offers and promotions.

Menu copy.png


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


Browse through various coffee drinks, pastries, and other items available at the coffeehouse.


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.


Make informed decisions before placing order

Customization 3.png
Customization 4.png


Click "favourite" for a faster ordering experience in

the future


Allows for customization and ensures that users can get the exact coffee they want


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. 


Review the summary of the selected items


Add additional items to the order before finalizing it

My order.png


Choose the option that best suits your needs


Automatically applies any available rewards or discounts


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 up to unlock new rewards


Stay updated on the latest deals


Earn additional rewards points or progress towards free coffee



Easily keep track of the gift card balance


Reorder with just a few taps


bottom of page