translating a personalized, in-person coffee shopping experience to the digital space





the goal

Rebranding and designing a responsive site for a family-owned coffee business in Hawai'i.

Due to the rise of COVID-19 temporarily halting tourism and the wave of specialty coffee roasters/shops that sell their beans online (Intelligentsia, Blue Bottle and Verve to name a few), Kona Haven Coffee is looking into paving a new channel for sales aside from tourism and freshly building a digital presence and rebranding that reflects their in-store experience for specialty coffee drinkers -- where the enjoyable, in-person interactions could be translated onto screens for a modern, trendy audience.

the background

Kona Haven Coffee is a family-owned and run coffee farm - located on the Big Island of Hawai’i with its oceanfront flagship coffee shop only 12 miles away, the farm specializes in kona coffee.

This was all conceived from my own research and personal experiences with coffee, where I realized purchasing specialty coffee online sometimes felt like a solo, albeit confusing experience compared to purchasing at a brick-and-mortar establishment - when buying at a store, the baristas are (hopefully) able to assist me with finding the “right” choices by asking questions about my preferences to guide me through my purchasing decision, as well as having the chance of a light, enjoyable social interaction. Despite Kona Haven’s farm offering only 7 coffee bean options,  it’s a well-oiled, family-run and loved farm that’s active in their local community and puts effort into staying as sustainable as possible by keeping all their processes in-house to provide their coffee beans directly from farm to cup.


first, let's identify kona haven's online customers

Typically, Kona Haven Coffee’s bread-and butter consumer for their farm and shop is tourists (U.S. + international), as well as locals on the Big Island. But from a digital and eCommerce perspective, their user base would naturally look different:

1.6% of total gross domestic product is represented by the coffee industry within the U.S., with over $225 billion in revenue (National Coffee Association) and millennials are one of the biggest drivers and embracers of coffee culture by consuming 44% of all coffee in the U.S. (Bloomberg) as well as being the first “digital generation” where their purchasing decisions are placed in the experience and brand mission above the product itself (Fromm & Garton).

To get even more specific into specialty coffee consumption, 35% of people aged 18-24 and 42% of peopled aged 25-39 drink specialty coffee daily (National Coffee Association). This was adamantly reflected in my user interview participants (who were screened in user surveys) as they all fell under the millennial, 25-29 age group (I do too!).

After interviewing 6 individuals, I catered my designs to three main user cases:

"Good, descriptive labels and packaging is super important to me and I do tend to lean more towards the ones that are aesthetically pleasing/trendy."
"My biggest frustration is not getting the flavor profile described on the packaging so I like to ask about flavor notes in person. Asking at the store also feels more personal."
"I don’t know much of the harvesting, roasting, and business practices behind the coffee business so I like to ask knowledgeable baristas in-store so I can make ethical decisions."

Kelsey is a graphic designer at an agency and freelancer on the side who’s a coffee enthusiast for the strong culture and enjoys testing new brands to explore different flavor profiles and notes. As an artist, she also appreciates beautiful branding and packaging.

Jim is a cybersecurity professional who drinks coffee throughout his day for energy and focus. As someone who knows what he likes, he tends to purchase from specialty brands that he’s familiar with but is always open to trying new coffee - especially local or small businesses.

Claire is a product designer at a startup who’s a 24/7, avid coffee drinker. Due to her high coffee consumption, she consciously purchases only from brands who are sustainability-minded and are transparent about their business practices.

second, let's discover the problems

After discussing with a SME (Subject Matter Expert), conducting competitor analyses, and interviewing the particpants, I identified 4 major pain points in the user journey when purchasing specialty coffee online:

"I'm not sure if I'll like the taste..."
"If I don't see reviews, I'm probably not buying it."
Many participants agree that buying coffee online is convenient but can be difficult to gauge if the coffee would match their tastes and preferences. Due to that difficulty, they also feel that deciding which coffee to select when shopping is daunting without any assistance or detailed descriptions for context.

All participants unanimously feel that reviews and ratings help them to feel more confident before purchasing specialty coffee, especially due to the higher pricepoint. Some specialty coffee sites don’t provide a feature for customer reviews, which make users feel less assured and less likely to purchase.

"Really weird when product images or caffeine levels are missing."
"I wish more companies were honest about their business practices."

All participants feel that they are more likely to purchase from a specialty coffee brand when a website is holistically cohesive in high-quality visuals, consistent branding and features. Things like product images excluding the coffee bag or caffeine levels were commonly-echoed pain points.

All participants appreciate brands who are local or independently owned, especially those who are sustainability-conscious. They also tend to trust those who provide their users more transparency about their processes.

People who drink specialty coffee need clarity in coffee types and its origin in order to feel confident in purchasing specialty coffee.
This proves to be difficult to achieve purely online.
How might we bridge the gap to help build confidence in customers, so that they may become returning purchasers?


third, let's ideate on solutions

I wanted to make sure that the site's flow was simple, straightforward, and familiar to users so I looked to competitor's websites and ones that the interviewees mentioned that they've personally explored. After creating a user flow to visualize the interactions, I started developing the concept for a "match quiz"-- this is a short but detailed quiz that users can interact with that would provide recommended items based on the users' selections and preferences.

This naturally led me to look at coffee shops with similar quizzes, as well as other digital spaces that did quizzes well-- Starbucks, Blue Bottle, Verve, Buzzfeed, Popsugar... (the list goes on). Below, you can see my initial freestyle sketching using a whiteboard of my concepts and layouts. Scrolling further, you'll see some of my low-fi wireframes of the core, necessary pages along with the building blocks for the quiz.

fourth, let's strategize the brand identity

Tackling the next layer of the solution-- redesigning the branding to evolve with their digital presence. Kona Haven’s stakeholders were excited to see where this could go and were very open and trusting. After interviews with the stakeholders and users, I crafted the brand's style, logo, and packaging!

☀️ know your roots
🏝 colors of paradise
🙏🏼  it's all in the name
I wanted to evoke the light, warm and peaceful feel of Hawai’i’s culture while marrying a simple and modern look to resonate with their new audience.
Muted, natural colors of the islands along with gradients provided a delicate and peaceful feel to elevate the tropical branding without reproducing an overly bold style, often seen in Hawaiian tourism.
The brand's name contains the word "haven", meaning refuge or sanctuary.

The logo was initially a bit challenging- I tried to integrate graphic elements of a Hawaiian Monstera leaf and coffee beans that I illustrated using Procreate into the logo with an elegant, minimalistic font. But I kept finding that the iterations felt outdated for the style I was envisioning. After playing around with the word “Haven” in the brand name, I created a simple element that resembles a refuge or door with rounded corners. Additionally integrating a bolder, decorative font while leaving the outline of the leaf element resulted in a clean, modern logo that evoked the brand’s Hawaiian identity.

packaging redesign

This was my first time taking a stab at designing for a physical product. Keeping the same branding principles in mind, I integrated similar flavor-indicator colors from the old packaging but translated them in the new softer, tropical style.


finally, let's take a look at the solution

I conducted usability tests using a mid-fi prototype with 3 participants- to note, all 3 have tried Kona Haven's coffee and 1 of whom has visited the brick-and-mortar cafe and farm in Hawai'i. The interview results guided my final solution:

Cohesive branding +
immediate transparency on business values
The homepage is naturally the attention-grabber and due to Kona Haven being new to the digital landscape. I’ve focused on creating strong, identifiable branding, messaging and visuals. Keeping the page simple and easy to follow, the page is essentially split into three sections: providing users into a browsable all products page for the ones who are ready to jump in, digestible bits of Kona Haven’s UVPs (unique value propositions) that allows the user to learn further into their processes and mission statement, and an attention-grabbing banner that leads to a low-effort, friendly quiz to help the user decide what coffee would best suit them based on their responses.

I was able to conduct an A/B split-test for the location of the quiz on the homepage, which resulted in participants liking it best towards the bottom of the page (opposed to being on the homepage) due to wanting content to first get to know the brand a bit before being introduced to the quiz.
Integration of shopping assistance and personalization
Due to UX Academy’s curriculum and set time constraints, I decided to focus on the quiz flow since this was the piece that bridges the gap between in-person vs. virtual shopping experiences. We knew that we wanted the quiz length to be as tight as it can possibly while still being thorough and enjoyable - through usability testing, I discovered that users leaned towards more straightforward questions rather than personality-based questions due to wanting results that best matched their taste preferences.

Users can automatically see using the progress tracker that the quiz is broken down first by their name, then their ritual, preferences and ending with their recommended coffee.
Detailed information and a tailored experience
The results page gives users two coffee matches based on their quiz responses, which their name and a brief summary explaining why the results were selected can be found at the top for a personal touch. Each coffee’s descriptions and options for selecting the coffee’s grind type and bag size are directly on this page to allow users to customize their option and immediately add to cart for convenience -- if they’d like to see more information on the coffee, users simply can click the “view details” button to lead to the product details page.
High-quality visuals and reviews
The product details page is straightforward in design -- in addition to all the necessary customization options and customer reviews section, I’ve made sure that the product photos are aesthetically clean and gives a visualization to the coffee’s flavor profiles as well as quickly-digestible details when users scan the page.
Quick and smooth purchasing flow
The checkout flow is fairly simple and follows traditional design patterns in eCommerce. I decided on a multiple-confirmation approach with the ability to edit any details from anywhere in the flow before confirming the order.


key learnings

Not sure how to do something? Just try it anyway.
This project is the first time I've ever designed for a physical element of any product; redesigning the coffee packaging was so rewarding and fun! I didn't anticipate that I was going to be working on this going into the project, but I loved that I had to challenge myself to think differently and work with different constraints when comparing physical vs digital experiences. Who knows, maybe I'll really get into this. ;)
Getting comfortable with ambiguity.
Although Kona Haven Coffee technically has a website, it was/has been managed across several individuals who didn't have many chances to collaborate or invest time when creating it-- ultimately, resulting in no guidelines or references for me to work with. My solution was to start helping the stakeholders with documenting crucial pieces and helping them centralize important info for their internal team.