Project: Three Pines Coffee

UX/UI Design

Project Overview

Three Pines Coffee is a local coffee shop in Salt Lake City. This project was focused on re-designing and expanding their website. The final result of this project was a new website developed with html, CSS and JavaScript.

Responsibilities:

User research
User persona
Ideation
Wireframing
User testing
Html and CSS development

Tools: FigJam, Figma, GitHub

Research:

Competitor Analysis

Before we started our research, we took a look at some of the features of our competitors. We picked two direct competitors (Daily Rise Coffee and Cupla Coffee); both are small businesses that would have a similar clientele and background. We also looked at two indirect competitors (Starbucks and Dunkin'); both are big chain stores that are highly successful across the country.

Anonymous survey

We sent out an anonymous that received 102 responses to get an idea for peoples basic coffee habits.

73% of people prioritize taste/aroma/appearance when buying coffee

73% of people do not pre-purchase coffee for pickup

40% of people consider supporting local business when buying coffee

Interviews

Based on the information from the survey, we conducted four 1-1 interviews to gain deeper insight of our user.

“I like to see a background on the coffee shop itself…give me a little background and I am sold.”-Brindi

Routine based coffee drinkers: location, drink and time of day are usually consistent

More willing to support a local coffee shop that involves the community

Convenience is important: looking for drive throughs and delivery options

User Persona

Based on our research, we crafted our user persona to guide us throughout the rest of our project.

Ideation:

The Problem

We’ve observed that users value a quick and easy coffee-buying experience. How might we streamline this experience for a local coffee shop so the user can get what they want and support a local business?

SWOT Analysis

We created a SWPT analysis to help identify the strengths and weaknesses of the Three Pines Coffee current services and their site.

Feature Focus

Using our Persona and research, we brainstormed some ideas that would meet our users needs and address their pain points. Below are the three areas we decided to focus on.

Community Engagement

Feature a new recipe monthly that was submitted by a customer

Rewards System

Link reward system to phone app and wearable

Delivery options

Partner with Uber Eats and Door Dash

User Flow

Before starting our wireframes, we mapped out some simple user flows for viewing the menu and submitting a recipe for the monthly "community special"

View Menu Item

Submit Recipe

Testing:

Key Findings from Testing

Testing focused on functionality of the site and content.

Indicate/link to the submit your own recipe on homepage

Combine menu onto one continuous page, menu links scroll to appropriate section

Move submit recipe button to above the fold or at least have an indication that it’s below

Conclusion:

We built a website to expand the online presence of Three Pines Coffee. We have offered opportunities for community engagement and streamlined the coffee buying experience by expanding their menu.

Original Site

Redesigned Site

Next Steps

Build out online order feature, integrate with phone app and watch

Add current wait time to homepage

Continue to test the website and increase responsiveness