Before Hours
Responsive website design for a specialty coffee roaster.
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.
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