Before Hours

Responsive website design for a specialty coffee roaster.

case study desktop mockup

Introduction

Project Type

Responsive website design

Tools

Adobe XD, Photoshop, Illustrator, Google Docs and Sheets

My Role

UX Research, Product Strategy, Information Architecture, Wireframes, Prototype, Brand Identity

Before Hours is a fictional specialty coffee roaster based in Santa Cruz, CA. They offer thoughtfully sourced coffee and customizable subscriptions. Their goal is to provide an intentional approach to coffee that honors the hard work of its growers.

Before Hours needed a responsive website and a subscription service that is easy to sign up for and manage.

Overview

  • Drive subscriptions with an increase in sign ups and retain active subscribers

  • Convert site visitors into customers by establishing Before Hours as a coffee expert

  • Create a responsive website experience that allows users to find key information easily

Goals

Research + Findings

Research Process

Competitor Audit: Audited five competitors (both direct and indirect) to understand how Before Hours’ experience needed to align with current best practices.

User Interviews: Spoke with three specialty coffee enthusiasts to gain insight into their expectations, motivations, and pain points around shopping for coffee online.

Contextual Inquiry: Observed users as they thought out loud while navigating two competitor websites to assess product strengths and weaknesses.

Key Findings

Users want to establish trust before committing to recurring purchases– if the cancelation policy isn’t clear, users will hesitate to sign up.

Users expect to be educated on coffee offerings, they want to quickly understand roast details and subscription benefits.

Coffee is personal– users want to adjust their subscription as their needs change.

Users are more motivated to purchase from smaller vendors, giving Before Hours a competitive advantage in an oversaturated subscription space.

1

2

3

4

Strategic Approach

Wireframes

Navigation + Footer

The sitemap needed to be structured in a way that would drive subscriptions and help users find key information easily with intuitive, mobile-friendly navigation patterns. Navigation is easy to use and understand across devices, while prioritizing the paths that matter most to users.


Homepage

As the first impression of Before Hours, the homepage needed to establish the roaster’s credibility and values. Required elements included an eye catching hero image with a call to action guiding users to subscriptions and location information that was easy to find.


Subscriptions

Users have three paths through the subscription funnel: Roaster’s Choice, Choose Your Own, and Gift Subscriptions. Personal subscriptions offer standard customizations: grind, frequency, and quantity. Gift subscriptions limit options between Roaster’s Choice and the signature roast at set frequencies (delivered once a month for three or six months).

A subscription builder module within the subscription page and intuitive flows for each subscription type would provide users with quicker, easier ways to subscribe.


Product Description Page

The product description page was an opportunity to prove Before Hours’ coffee expertise with a helpful brew guide for the specific roast. Including this element builds trust with users by offering value and support, which could drive conversion.


Subscription Management

During the research phase, users made it clear they did not want to reach out to customer service to make any subscription changes– especially for canceling. They expect to be able to control all aspects of their subscription when they commit to recurring purchases.


The cancellation flow was an opportunity to reduce subscription churn. By leveraging user research to understand why subscribers leave, Before Hours could offer support for common cancellation reasons.

Final Designs


Conclusion

Due to time constraints, I prioritized mobile for offboarding since a lot of D2C products have a low frequency of logins and users will interact with subscription management features through CRM— like an email shipping reminder.

This project went through several iterations and the brand identity improved as I educated myself in visual design. I’ll keep pushing myself to learn more and would like to continue refining the branding.

Next Steps

By taking a mobile-first approach to responsive design, my workflow was efficient and I prioritized the business goal of each page to create visual elements that helped users achieve it. From there, it was much easier to scale up for larger screens.

Takeaways