Red Rock Coffeehouse

Project Overview

Scope
Design a responsive
e-commerce website

Tools
Figma, Adobe Illustrator,
InVision App

Role
UX/UI Designer
(Research & Visual Design)

The Challenge
Red Rock Coffeehouse is a local Boulder coffee shop known for a welcoming atmosphere and affordable prices. They did not have any online presence what so ever and decided it was time to have a digital platform that could become a resource for customers to order online for pickup and keep up to date with weekly events.

The Solution
• Design a responsive e-commerce website
• Extend coherent branding that aligns with the current shop
• Design an online order process for beverages and food pickup

The Design Process

01.
Empathize
Market Research
Competitive Analysis
Provisional Personas
User Interviews
Empathy Mapping

02.
Define
User Personas
HMW Questions
Sitemap
Project Goals

03.
Ideate
Task Flows
User Flows
Wireframing
Responsive UI

04.
Prototype & Test
Mid-Fidelity Proto
Usability Testing
Affinity Mapping

Empathize

Market Research
Initial research was conducted in order to learn more about the coffee industry as a whole. This included looking at emerging trends, demographics, and global statistics. This research helped me uncover insights to better understand the coffee industry and what is currently impacting it.

Demographics

  • Coffee consumption in the U.S. by age group: 
    18-24 years old: 47%
    25-39 years old: 64%
    40-59 years old: 62%
    60+ years old: 72%
  • Millennial coffee consumers are often looking for an experience to accompany their purchases. This is making coffee tourism a big hit on social media, directly impacting cafe interior design.
  • American coffee drinkers average 3 and a half cups of coffee every day.
  • Young people are increasingly on the go, and they are looking for coffee and drinks that are easy to carry around. Ready-to-drink coffee like bottles of pre-made coffee, frappuccinos, or cold brew that you can find in gas stations and convenience stores have been a successful solution for customers on the move.
Insights
  • Scale and growth have been intrinsic to specialty coffee over the last decade, to the tune of 5.5 percent annually.
  • According to Business Insider, coffee is the second most sought-after commodity in the entire world, with an industry that is worth over $100 billion across the globe. 
  • As consumer trends lean towards more holistic practices, coffee trends are following suit. Cafes are adding coffee blends to their menu like mushroom coffee, maca lattes, and coffee with collagen creamers. These new options allow customers to address gut health, metabolism speed, immunity, and more with their morning energy boost. 
  • E-commerce is playing a significant role for coffee shops and retail packaged coffee companies alike during the pandemic. While Nestlé’s out-of-home businesses, including its Nespresso boutique stores, have suffered ‘significant declines’, the food and beverage giant’s e-commerce sales grew 48.9% in the second quarter, reaching 12.4% of total group sales and exceeding the milestone 10% proportion reached in the first quarter.

Competitive Analysis
After completing market research, I performed a competitive analysis to identify the strengths and weaknesses of direct, local competitors in Boulder, Colorado. This allowed me to take note on what I should focus on and avoid when building Kaus' website.

Strengths

  • Online ordering option
  • Strong brand recognition
  • Coffee subscriptions
  • Sustainability mission

Weaknesses

  • Sold out online menu items
  • Long lines in store

Strengths

  • Also acts as a bookstore
  • Music & live events
  • Strong company story
  • Charity donations
Weaknesses
  • No online ordering option
  • No online menu
  • Out of date website content

Strengths

  • Online ordering option
  • Virtual cafe tour
  • Music & live events
  • Downtown location

Weaknesses

  • Higher price points
  • Website not fully responsive

Primary Research

User Interviews
I interviewed local customers at the cafe to learn more about their experiences purchasing coffee at Red Rock Coffeehouse as well as other cafes around town. These user interviews gave me fresh insights and perspectives into their experiences which allowed me to understand and empathize with them on a deeper level.

Participants

  • Male & Female
  • Ages 40-73 years old
  • Live in Boulder or a neighboring town
  • Current customers at the cafe

Empathy Map
Once interviews were complete, I was able to organize all the feedback into an empathy map that helped me uncover user needs based on patterns from insights.

Insights

  • Users like cafes that don't make them feel rushed.
  • Users come to the cafe for the food and baked goods.
  • Users stated that friendly interactions with staff give them a positive experience.
  • Users often go to the cafe to get out of the house to socialize with friends.

Needs

  • Users need a peaceful place to work.
  • Users need good quality products.
  • Users need excellent customer service.
  • Users need an inviting atmosphere.

Define

HMW Questions
Point of view statements were formulated using the insights and needs from my empathy map. These POV statements then helped phrase the "how may we" questions used to address important aspects of the website design in a brainstorming session.

User Persona
A primary user persona was created based on insights and patterns discovered through my user interviews and empathy map. This persona helped me to understand main customers as a whole when it comes to their motivations, goals, needs, and frustrations.

Sitemap
Once the coffee shop's main customer base was defined, I was able to start to plan how the website content would be laid out. The sitemap helped me identify key pages, and to make sure the information architecture was intuitive to customers.

Ideate

User Flow
I created a user flow to demonstrate how a user would navigate through the website based on a probably path. This path helped me to think through a user's mindset when they would be on the site making decisions as they navigate.

Low-Fidelity Wireframe Sketches
With the sitemap complete, I sketched out layout concepts for 3 of the primary webpages that would need to be designed first.

Mid-Fidelity Wireframes
After completing low-fidelity sketch ideas, I was able to move on to designing the mid-fidelity wireframes in Figma. This helped me connect the conceptual structure to the product’s visual design. The wireframes here show 2 of the key pages based on the sketches above.

Prototype & Test

Usability Testing
In order to ensure that my prototype was both user-friendly and easy to navigate, I conducted usability testing with 5 participants. The methodology used was Think Aloud along with task elicitation. Participants were asked to complete 2 key tasks and asked to verbally communicate their thoughts and decisions as they navigated through the prototype.  A total of 13 key screens were created to allow users to complete task prompts using Invision App.

Task 1:  Locate the online menu for espresso drinks

Task 2:
Order a 12oz. latte with whole milk

A script was used to maintain consistency amongst testing participants. Participants were recruited based on their demographics and testing was conducted both in person and remote using screen sharing.

Usability Test Findings
Once testing was complete, all transcripts were included in a testing document. From there, error-free and test completion rates were recorded and a summary of feedback was created to provide a high level overview of testing feedback.​

Test Completion Rate: 100%
Error-Free Rate: 93%​

An affinity map was created to synthesize test findings. This allowed me to find patterns amongst participants and pin point slips and/or other frustrations to prioritize for revisions before the site launched.

Insight:

  • Users admitted to not always knowing how certain coffee drinks were categorized. They expressed wanting descriptions listed under all menu items rather than only on select speciality drinks.

Priority Revision:

  • Menu Page: Add detailed product descriptions listed under each menu item.

Branding
Since Red Rock Coffeehouse did not have an existing online presence, branding was needed in order to define the aesthetics for the website's UI elements. Their logo was given some minor updates so it could scale more easily yet still be recognizable to customers when they visit the website.

Style Tile
A style tile was created to visually communicate the overall mood and look of the website.

High-Fidelity Mockup
Once the style tile and UI kit were complete, it was time to create high-fidelity wireframes to give the design life. Priority revisions were applied to the high-fidelity wireframes based on insights from the affinity map.

Reflection
After working closely with a local coffee shop to help design their website, I learned a lot about customer purchasing behavior and how important it is to connect with a business' real customers in order to gain genuine insights into what motivates them to become loyal to a specific cafe. My empathy map was one of the most insightful parts of this project because it helped me uncover really interesting patterns from user interviews. I enjoyed learning about the coffee industry overall, and researching trends in order to design a website that is both modern and eye catching yet very user friendly.

Empathize