Spotify App Overview Banner

Where's the website?

Although Jaunt Coffee Roasters has a 5-star rating across Yelp and Facebook, the shop does not have something that is typical of most businesses: A website. While they are a local favorite, they do not have a large online presence. Thus, they are now looking to setting up a dedicated responsive website in order to retain their customers and reach out to prospective ones who are looking them up online.

The Challenge

How can we make a responsive website that is user friendly for Jaunt's current and potential customers, while also highlighting their business model, story, and purpose?

The Needs

From user research, I defined the following needs that users had when it came to coffee shops.

It's More than Just the Drink

While the general public see fancy and beautiful coffee drinks across Instagram stories, Yelp pages, and Google reviews, ultimately they are just pictures that don't say more than "hey look, a pretty drink!". Consumers that buy these drinks (and the non-pretty ones) are interested in knowing more about said drink beyond just the final product, from the ingredients used to the brewing process. This is because they value well-brewed coffee.

Location, Location

Consumers no longer go to coffee shops just to drink coffee: The shop space is used for reading, studying, meeting with friends, interviews, and so on. Thus, users that are looking into a specific coffee shop need to have information that define the physical space, so that they can decide on if the space is suitable for varying situations.

Baristas are People too!

A positive interaction between the baristas and consumers can make one's experience drastically improved, as founded by my interviews. By being able to transfer this into the digital space, Jaunt's website can fulfill the users' need to have, continue, and/or start that positive interaction.

The Features

Using my research to empathize with users, Jaunt's website features could kill two birds with one stone by both catering to user's needs and showcasing what makes Jaunt so special as a business.

Beauty in the Details

Picture of the Pages for Jaunt's Feature of Showing Drinks

Hey MTV, This is My Crib

Picture of the Pages for Jaunt's Cafe Room and Amenities

Your Favs All In One Spot

Picture of the Pages for Jaunt's Owner and Baristas


The Problem

Jaunt Coffee Roasters is a local and independently-owned café in the "Beeramar" neighborhood in San Diego.  They pride themselves on sourcing their coffee to ensure their customers are getting quality and ethical drinks. 

While they do have a social media presence, they are otherwise not accessible online, meaning they are losing out on reaching a larger audience.

Disclaimer: This is a speculative project. I am not affiliated with Jaunt.

The Challenge

I explored how to best design Jaunt's responsive website in order to make it user friendly, while also highlighting their business model, story, and purpose.






Self-directed, with feedback given from mentor and peers

UI/UX Designer

4 weeks
July - August 2019


The End Product

View Final Prototype

Design Process

01. Research & Analysis

02. Ideate & Define

03. Interaction Design

04. Usability Testing

05. UI Design

Researched the current market and potential users

Created problem spaces and determined how to resolve them

Mapped user's journey and began designing

Evaluated viability of product's features through testing and feedback

Created and implemented brand identity

01. Research & Analysis

Purpose: Scoping out the current market and potential users

Process: Market Research, Competitive Analysis, Provisional Personas, User Interviews, Empathy Map Insights & Needs, Persona

Market Research

As a non-coffee drinker, I knew little about coffee consumption and shops. Researching more about coffee consumption, shop attendance, and demographics gave me a better understanding of Jaunt's target audience and coffee trends.

Gourmet Coffee: Espresso-based beverages, blended drinks, or cold brew
Traditional Coffee: Coffee not brewed from premium whole bean or ground varieties
Past-day/week:  Consumed coffee within the last day/week prior to time of survey

Coffee Consumption

When and where (luckily not how, as I am familiar enough with how coffee is consumed)? These were the questions I asked when it came to understanding coffee consumption.

82% of past-day coffee drinkers

Reported to consume coffee during breakfast

80% of coffee consumers

Are more likely to prefer locally/independently-owned shops

On-the-go Coffee

Is more likely amongst consumers under the age of 35

Coffee Shops

Given that coffee shops are preferred in consumers (and is the subject matter of my end product), I looked into what made these shops such a coveted place.

“ 'Coffee has everything millennials love: status, experience and personalization.' ”

Gabrielle Bosche in The Washington Post's "Look how much coffee millennials are drinking" Article

Why Revisit a Shop

Coffee Quality is the biggest reason, according to 25% of surveyed consumers

A Social Activity

Imagine this: A hip, Instagrammable coffee shop where high school and college students go to work. Sounds familiar?

That's because younger consumers are driving the gourmet coffee (which is typically sold in shops) consumption growth due to exposure at a younger age and coffee being more socially acceptable.


61% to 39%

The percentage of gourmet to traditional coffee drinkers

Young Audience Drives Consumption

The highest age groups that drank coffee past-day are 18-24 (39%) and 25-39 (50%)

"Getting the Job Done"

Which is the reason behind why 50.8% of surveyed men drink coffee

This is compared to 32.8% of women who drink coffee to relax

Competitive Analysis

Since Jaunt doesn't have a website set up, analyzing competitors to uncover standard industry practices would help guide design decisions and what Jaunt could offer on their website.

Direct competitors were local & chain coffee shops, while indirect competitors were companies that weren't primarily coffee shops but offered drinks in some form.

Provisional Personas

To hypothesize a target audience and determine what potential user goals and pain points, I created provisional personas based on the market research findings.

User Interviews

In order to get direct feedback from Jaunt's clientele, I interviewed five participants in person during a visit to Jaunt.

To get a full understanding of in-person and online experiences with Jaunt, as well as their experiences with coffee shops in general, I asked the interviewees open-ended questions.

It’s all shiny!  Like, they really do a fantastic job, they always take good care of me.

Participant #2, Micha, when asked about a positive experience at Jaunt

Definitely the pictures, since that is what made me want to try this place.

Participant #3, Rachel, when asked about a positive online experience with Jaunt

Empathy Map

To organize my interview findings, I created an empathy map to list out all the talking points.

Insights & Needs

By finding recurring patterns from my empathy map, I could identify user insights. I then considered what needs would have to be met in order to get to that insight.


To make user-centric decisions, I created a persona named "Claire". Taking data from my empathy map and interview observations, I continued to give more context to a potential user.

02. Ideate & Define

Purpose: Create actionable problem spaces, ideate solutions, and map out new features

Process: POV + HMW Statements, Brainstorming, Feature Prioritization, Site Map

POV + HMW Statements

Now that a target user was defined, I crafted POV and HMW statements. Framing the POV statements helped me understand the reason behind user needs from the mindset of Claire, while HMW statements could encourage solutions to meet her needs.


Brainstorming on how to resolve the HMW statements provided a pool of potential solutions.

Feature Prioritization

Utilizing the brainstormed ideas, I picked out the most feasible and impactful solutions to each HMW statements, now framed into goals for Jaunt's website to accomplish.

Site Map

I created a site map to ensure the proper pages were being built to meet user needs. The features and pages were determined by referring back to my product map and competitive analysis sites.

03. Interaction Design

Purpose: Understand user's journey through website

Process: User Flow, Task Flow, Mid-Fidelity Wireframes

User Flow

I mapped out three user flows (derived from Claire's needs, which were specified to clarify the flow) to help me understand what effective UI would look like when going through the site.

Task Flow

Next, I laid out the steps that it would take for a user to complete three tasks, each derived from the scenarios in the user flow. This helped me understand a user's process more in depth by assuming each page would be built in a manner to prompt completion of each task.

Mid-Fidelity Wireframes

Now that I had the tools to start designing, I drew out sketches using pen and paper, using previous deliverables and existing design patterns from coffee shop websites to guide me.

After sketching, I gathered feedback on what to improve upon from peers. Using Figma, I built out the wireframes for all the pages, then built out responsive versions for three of the pages.

When choosing which pages to design responsively, I wanted to ensure that complex UI elements (such as the pictorial representation) could translate across different devices.

04. Usability Testing

Purpose: Test the viability of implemented features through usability and feedback

Process: Usability Tasks, Affinity Map, Priority Revisions

In order to gain feedback on the functionality of Jaunt's features, I created an InVision prototype to test with participants. Testing a mid-fidelity version would keep participants focused on the usability of the site, rather than the visual design.

I conducted moderated, think-out-loud usability testing at another local coffee shop. I recruited a total of six participants, as by that number, recurring patterns were emerging.

Usability Tasks

Using the task flows, persona, and product roadmap, six tasks were created in order to uncover any user pain points or successes with site navigation.

  • User Tasks
  1. Locate the cold brew item  
  2. Read more about the coffee bean ingredient
  3. Find information about Jaunt's physical space
  4. Check if the space is suitable for a friend gathering
  5. Learn more Rachel Green, one of Jaunt's baristas
  6. Discover Rachel’s recommendation

Affinity Map

To organize my test findings, I synthesized my data into an affinity map to visualize successes and patterns and comments from users.

Based on the difficulties that participants had with my design and their comments, I found insights. I could then determine how to improve my design, then prioritized these decisions based on the amount of impact they would have.

Priority Revisions

Using my recommendations, I updated my mid-fidelity wireframes to ensure they could alleviate any user pain points from testing.

05. User
Interface Design

Purpose: Create a brand identity and apply it create a high fidelity prototype

Process: Mood Board, Style Guide, UI Kit, High Fidelity Prototype, High Fidelity Responsive Wireframes

Style Guide

After gathering inspiration from a mood board, I built Jaunt's new brand identity, aligning it to stay true to its brand attributes. Jaunt's new logo called back to its original logo that had a plant with berries, while being updated to be unassuming and simplistic.

UI Kit

Prior to building the high fidelity wireframes, I created a UI kit to determine what elements I needed to create. Doing this prior to creating the wireframes helped me adapt the elements to Jaunt's brand identity so I could rapidly build the website.

High Fidelity Prototype

I applied the branding and styles created from the style tile and UI kit into the mid-fidelity wireframes to create a finalized high fidelity prototype for Jaunt. Using this prototype, I could convey what Jaunt's website redesign would look like.

High Fidelity Responsive Wireframes

To ensure the branding style worked well responsively, I designed tablet and mobile wireframes.


The biggest takeaway from this project was ensuring to utilize research to guide product decisions, all the way through final iteration of the website. Many of my decisions were built from findings determined in the early stages of the project, which supports the outcome that Jaunt's website is a research-focused and user-centric product.

Next Steps

Build Out the High-Fidelity Responsive Pages
Since the intention is to make a fully responsive website, I would build out all the pages in high-fidelity and different viewports to maintain the visual design.

Assist in the Website Launch
As the website's final iteration is ready to be launched, I would ensure that the UI elements are translated as the engineers build the website to be fully operational.

Back to the top
Culture CookSpotifyJaunt Coffee RoastersZeit