Case Study

The Java Joint App

A full UX lifecycle process from research to prototype was completed over the span of several weeks with the goal of developing a mobile application ordering platform for a fictitious coffee company, The Java Joint.

Overview

Summary & Stats

Background

Project Background

This project followed a research-driven design process grounded in user-centered design principles. I focused first on understanding friction points within an existing specialty coffee ordering workflow. By evaluating a comparable premium brand's product and observing real users complete ordering tasks, I was able to identify user pain points and design for a real-world context. My goal was to create a design that reduced cognitive load and made the user task flow as efficient as possible, which is needed for busy, on-the-go users.

Goals

Project Goals

Mobile ordering is used in quickly moving, real-world contexts, and even small usability issues can cause friction, abandonment, or loss of trust.

Objective:  Identify high-impact usability barriers and design a simplified, intuitive ordering flow that maximizes task success and user confidence to create a frictionless mobile ordering experience.

Research

User Research

Competitive Analysis

The Java Joint operates in the premium “third-wave” coffee space alongside brands such as:

Blue Bottle – Minimalist, premium, sustainability-focused
Stumptown – Direct-trade pioneer that touts a bold and unique brand identity
Intelligentsia – High-prestige, appealing to coffee-experts
La Colombe – Broader user appeal with modern RTD innovation

These brands serve educated, high-income, urban customers who value specialty coffee, sustainability, and quality.
‍
The Java Joint needed a digital experience that matched the high standards of larger comparable coffee companies, without adding complexity.

Target Users

Demographics

Urban professionals
High income, highly educated
Frequent coffee buyers

Psychographics

Value sustainability and traceability
Willing to pay for premium quality
Expect efficiency in daily routines

Non-coffee drinkers were screened out.

Usability Testing

Objectives

Identify features that make mobile ordering:

Efficient vs. inefficient
Easy vs. confusing
Emotionally attractive

Methods

6 participants (4 male, 3 female) were recruited through my social network to complete moderated remote usability testing consisting of real time moderator observation, participant think-aloud, and moderator follow-up probing for more context on user decisionmaking.

I chose to utilize moderated remote usability testing over a Zoom meeting with the participant's face and device screen recorded as reflected a more realistic usage condition. Moderating the study allowed me to observe user facial expressions and thought processes in real time, with participant think aloud clarifying decisions. A smaller sample size was also appropriate for limited resources and the formative research stage for initial product design, where I wanted to focus on identifying user issues rather than producing statistics.

Tasks

Participants were asked to:

Create an account
Find the closest cafe
Add, remove, and modify specified items in an order
Proceed to checkout

Metrics

Primary

Task completion rate - this has major implications for business goals, as higher completion rates correlate with increased conversion (successful transactions) and lower cart abandonment
Error rate - high error rates could suggest user frustration and reduces trust in the brand, so reducing this number supports customer retention and brand credibility

Secondary

Time on task: since the app context is for people who want a quick and easy method for having their coffee ready when they need it, it was important to understand the time it took to complete the task flow
Self-reported satisfaction: user satisfaction was gleaned to understand how using the app made users feel

Research Synthesis

Summarization of research findings consisted of combining behavioral data with qualitative insight. I completed the following steps to ensure that my design decisions were evidence based:

Reviewed recordings + moderator notes
Identified recurring breakdowns and patterns
Grouped issues experienced and comments across participants using affinity mapping
Prioritized issues using a severity framework, with those with the highest frequency and severity taking priority

Affinity map with color-coded sticky notes categorizing user feedback on menu navigation, cafe location, readability, product customization, usability, and checkout process for a cafe app.

Key Findings

Account requirement was unclear — Users added items before realizing login was required
Store selection was unintuitive — Users struggled to confidently identify the closest location
Navigation friction was present— Users had difficulty moving backward between pages increased cognitive load and time on task

Design Process

Design

Based on findings, the app was redesigned to:

Introduce a clear welcome screen (Login / Sign Up / Guest Checkout options)
Implement a more intuitive store finder experience
Add persistent back navigation for clearer return paths

Lo-Fi Wireframe

Wireframe layouts of a coffee ordering app showing screens for login, account creation, cafe search, menu, cart, payment methods, order confirmation, and order status.

Hi-Fi Prototype

Mobile app screen titled 'Find Your Cafe' displaying a search bar and a list of cafes with images and addresses in San Francisco and San Diego.

Mobile app screen showing coffee shop menu with sections Bestsellers, Beverages, and Food featuring vanilla latte, cold brew, banana bread, americano, espresso, pour over coffee, avocado toast with eggs, bagels with cream cheese, and a croissant.

Vanilla latte in a clear glass cup on a matching saucer with latte art on top, priced at $5.00.

Outcome

Final Product

The final app layout was designed to reflect usability principles. It established clear entry points on the welcome screen, persistent back navigation, and an easy to navigate menu that applied the aspects of the competitor's product that users enjoyed.

View Prototype in Figma

Takeaways

Conclusions

At first glance, the Blue Bottle mobile app seemed intentionally designed, with a minimal aesthetic that fits the company’s brand, and features that align with user tasks for mobile ordering.

However, conducting user research led to the understanding that even well-designed apps can be improved. It also highlighted the aspects of the mobile ordering experience that draw users ein, like clear organization, simple font and imagery, and easy navigation across pages.

The final prototypes for The Java Joint app reflect the needs and wants of users ordering coffee online, allowing them to utilize guest checkout, and navigate the task flow without frustration.

Due to the nature of this as an individual academic project, I did not have all resources at my disposal. If I had more time available, I would have added more features such as a map feature on the cafe locator screen, and built out the prototype further. I would have also conducted a usability evaluation with a new sample on The Java Joint’s app design itself and made design adjustments based on that data, with further iterations as needed.