The Coffee Hub

The Challenge

During the COVID-19 quarantine, people became isolated at home and had to change their routines, causing loss of motivation and anxiety. Based on survey findings, many people miss supporting small businesses, enjoying coffee drinks from local cafes, and having something to look forward to. How might we bring the cafe ambiance to people at home, bring some joy back to people’s lives, and promote coffee culture to those feeling isolated from their favorite cafes in a way that is accessible to all and safe during the COVID-19 pandemic?

The Solution

The Coffee Hub is a subscription-based service and app that works with independently owned cafes across the U.S. to curate personalized boxes filled with coffee items, merchandise, and extras to help you recreate your go-to drinks, and discover new favorites– all from the safety of your home.

Role & Duration

Role

UX/UI, Art Direction, Branding, Packaging, Layout, Web Design

Duration

10 Weeks | Sep 2021 - Dec 2021

Team

Solo Project

Methods

Brainstorming, User Research, Market Research, Paper Prototyping, User Testing, Concept Board

Tools

Miro, Figma, Illustrator, Photoshop

Skip to Final Product

Research

User Needs

_____

Research Approach

To best gain an understanding of how people's lives changed during the COVID-19 quarantine, I started by creating a survey and completing user interviews. The questions asked gave both a general look into people's mindsets, while also helped to illustrate their coffee and cafe habits pre-COVID, and during. Speaking to users and looking at survey results helped me to identify some key pain points that I distilled into goals that The Coffee Hub will address.

Problem 1

"I like coffee, but I used to go to my favorite cafe for studying and social energy so the pandemic has pretty much completely killed my routine."

-Survey Respondent

Problem 2

"I miss supporting local cafes, but don't want to spend time in businesses for non-essential reasons."

-Survey Respondent

Problem 3

"Since quarantine started, I haven't gone out at all. I miss having things to look forward to and am struggling to manage my anxiety."

-Survey Respondent

Goal 1

People are missing the community and connection that comes with spending time at their favorite cafes. How might we help people feel connected to the coffee community again, and support a new routine?

Goal 2

People miss building relationships with and supporting local businesses. How might we connect people with local businesses in a safe way during the COVID-19 pandemic?

Goal 3

It's important to most people to stay safe and be socially responsible, but the quarantine has brought about a lot of anxiety. How might we give people a bit of joy and something to look forward to?

Analysis

User Persona

_____

User Persona Approach

With key goals in mind and a stronger understanding of my target user's pain points, I was able to create a persona that represents our average user and their needs and complete an empathy mapping exercise. Some key pain points include: feeling isolated without much to look forward to and missing trying out new cafes and drinks. Some core beliefs revolve around being socially responsible & supporting local businesses.

Information Architecture

Low Fi Wireframe

_____

Wireframe Approach

Using user research and the goals I established as a foundation I created a list of features that the app must have to guide the wireframing process. With features in place, I created a low fidelity wireframe that covers some potential flows.

Summary of Features

Manage Subscription

An essential function of The Coffee Hub app is to allow users to easily manage their subscriptions. This includes viewing upcoming boxes, adjusting their delivery schedule, and editing the content of their boxes.

Browse Cafes

What makes The Coffee Hub unique is that they feature independent cafes and roasters from all over the country. Through the app, users can browse featured cafes, view their unique coffee offerings, save their favorites for upcoming boxes, and leave comments and reviews.

Access Recipes & Tutorials

The Coffee Hub aims to bring a cafe experience into people's homes, so another key function of the app is allowing users access to exclusive tutorials and recipes to help them best recreate their favorite drinks (and discover new ones!) without leaving their kitchens.

Validation

Usability Testing

_____

Usability Testing Approach

As the app developed from low to high fidelity, I completed several rounds of user testing to gain insights on edits that could strengthen the experience and ensure usability. Before moving to digital prototyping, I used the sketched wireframe to complete paper prototyping with several test users to ensure the flows and UI structure were working, and to incorporate initial edits before moving to a digital prototype.

Summary of Edits

Ensure icons are easy to see and understand
Fix alignment issues with recipe cards
Clear back button on screens
Ensure colors have enough contrast
Adjust smallest text to be more accessible in size
"See more" on elements where scrolling is possible

Design

Branding

_____

Brand Development

The Coffee Hub is all about delivering joy to people in their homes during the COVID-19 quarantine, so it was crucial to develop a brand direction that first and foremost feels uplifting and fun. I also wanted to utilize brand colors that are approachable and neutral, as our users cover a wide demographic and we want to be as inclusive as possible. We're also a coffee brand, so coming across as comforting, cozy, modern, and clean are key in building trust with users through our brand look and feel.

Design

Application

_____

Key Touchpoints

With a design direction and system in place, I created a logo suite and graphics that are reflective of our intended look and feel, and applied the branding across the key elements involved in The Coffee Hub experience: the high fidelity app, a landing page, and of course, the packaging and out of box experience.

User Story 1

Browsing Cafes

Leah logs into The Coffee Hub app, and navigates to browse our current featured cafes and roasters. She notices Verve Coffee Roasters, and takes a closer look at their coffee blends and extras. She finds a particular coffee blend that she's interested in trying, so she saves it to be shipped with an upcoming box.

User Story 2

Browsing Recipes & Tutorials

Leah also wants to take a look at this month's featured recipes, so navigates to the recipes & tutorials tab. She's been interested in learning more about brewing pourover coffee, so she views the "Perfect Pourer" tutorial and saves it to her favorites to quickly revisit later on.

Unboxing Experience

Design

The overall design of The Coffee Hub mailer box is meant to be an intersection of the brand's characteristics: uplifting, cozy, fun, and approachable. Because the goal is to deliver joy to our users, it's important that the unboxing experience is fun and rewarding.

Box Breakdown

With each curated box, there will be a personalized message that breaks down the contents of the box, including details on the coffee beans and any extras, with information about the cafe or roaster that they came from.

Personalized Recipe Card

With each curated box a collectible, personalized recipe card will be included that provides some inspiration on how to enjoy the ingredients sent in that specific box. It also encourages users to share their results on Instagram both to promote The Coffee Hub, and connect with The Coffee Hub community.

The Result

_____

The inspiration behind The Coffee Hub was to come to a solution for how to provide those who are missing their routines and neighborhood coffee spots during the COVID-19 quarantine a way to bring the cafe experience back into their homes. Across all of its key touchpoints, The Coffee Hub provides joy to its users, supported by it's uplifting, approachable, and modern brand identity.