RoosRoast

Laptop on wooden table displaying a coffee shop website with people working and a promotional banner, with a large leafy green plant in the background.

Overview

RoosRoast Coffee, a beloved Ann Arbor staple with two locations and a growing presence in local grocery stores, has seen a steady rise in e-commerce through their website, roosroast.com. While their current site performs well, they are eager to enhance the user experience. My team and I are redesigning their website for both mobile and desktop, leveraging their existing resources to craft a unique and engaging storytelling experience.

Duration

Team

Skills

Wenxi Wang & Joy Huang

01 - 03/2024

User Research, Competitive Analysis, Card Sorting, Wireframing, Prototyping,

Exterior of a coffee shop with a bright sign that says 'take out cafe' and a chalkboard menu listing coffee, tea, and other drinks. There are colorful flowers and potted plants in the foreground.
A man in sunglasses and a cap is standing on the door frame of a van, holding a surfboard and looking around. The van has a sign that says 'Boo R Roast' and a sticker that says 'Lobster Butt Lovers' on the front.

From an avid coffee lover’s dream

to a vibrant reality.

RoosRoast Coffee began as the creative vision of John Roos, a lifelong Ann Arbor local with a talent for blending art, food, and community. From his days as a skateboarder and chef to his adventures in bohemian subcultures, John developed a unique perspective and a refined palate that now defines RoosRoast’s exceptional coffee, where every cup tells a story.

Competitive Review

When users can't see the full order cost in their shopping cart, it can cause frustration and mistrust. Unexpected charges like taxes, shipping, or handling fees appearing only at checkout may surprise customers, leading them to reconsider their purchase.

An infographic comparing how four e-commerce websites display total order costs during checkout. The websites are Verve Coffee Roasters, Starbucks, Vertex Coffee, and Kohl's. Each section shows screenshots of the checkout pages, highlighting features like individual item prices, product thumbnails, add more items buttons, and highlighted savings.

Competitive review on e-commerce website shopping carts.

In- Store Experience

Various bags of coffee beans on a wooden table, with bowls of coffee beans in front and a color palette chart nearby, in a workspace setting.
Snow-covered van with graphic of a hand holding a coffee cup, parked outside in winter, near a white fence and sidewalk with snow.

Our class took a field trip to the RoosRoast store, where we met the team and gained insight into their brand, culture, and operations.

Identifying Problems

Screenshot of a coffee shop website featuring coffee beans, coffee mugs, and other coffee-related products, with the phrase 'don't trust the weather' on the main banner.
Screenshot of an online store page featuring various coffee products and accessories. The items include coffee bags, a subscription box, a honey jar, and coffee filters, with prices listed below each product.
Online checkout page with shopping cart summary and payment form, including delivery and billing address fields, credit card details, and support options.
A webpage showing various coffee products. The main image features a paper bag labeled "Lobster Butter Love" with a red lobster illustration. Below, there's a shopping section with options for grind size, weight, and quantity, along with pricing. Further down, smaller images display alternative coffee pods and bags, with one section showing a collection of coffee bags in a truck bed and a call-to-action box offering help with choosing coffee.
Online shopping cart checkout page with one item: Lobster Butter. Total price $14.40, with shipping calculated at checkout. Shipping FAQs listed below.

Website Analysis

Current Website Issues:

  1. Poor hierarchy and organization of navigation tabs.

  2. Lack of emphasis on the subscription service, a key profit source.

  3. Missed opportunity to convey personality, community value, and quality.

  4. Difficulty replicating the in-person RoosRoast experience online.

Questions Considered:

  • Which UX laws are violated (e.g., via Baymard Research)?

  • How to enhance scrolling engagement (aesthetic usability)?

  • What interface improvements boost e-commerce performance?

Key Focus Areas:

  • Home page

  • Product page

  • Shopping cart

Flowchart diagram illustrating website structure with nodes labeled as homepage, open website, large image showcasing vibe of roast roast, products gallery, menu bar/navigation, and subpages like menu, about us, location, subscription, and shop.

User experience flow chart

A digital sitemap or flowchart with color-coded sections representing different pages and categories for a website, including main menu, shop, and gift options.

Navigation bar card sorting

Sketch

Wireframe sketches of a mobile e-commerce app, including features like the home page, product listing, search results, shopping cart, checkout, and contact page, with annotations and interface elements.

We began with a general low-fidelity wireframe sketch of the website to focus on structure, user flow, and information hierarchy without being distracted by visual details.

This approach allowed us to quickly identify potential usability issues, encourage collaboration, and refine the layout before investing time in detailed design.

Key Design Decisions

  • 1. First Impression

    We wanted to create a unique RoosRoast style and prioritized flow for the Home Page, as it is the most important page that catches user’s attention.

    Through adding John Roos’s sketches and prioritizing sections (“about us”, “subscription”, “best sellers”) it helped emphasize RoosRoast’s character in terms of their customer relations and e-commerce needs.

  • 2. Subscription

    We decided to create a separate subscription page on the navigation menu bar based off our competitive reviews research.

    Along with an option on the product page to choose subscription, we added it to the shopping cart to provide easy access and control for subscriptions.

    With only one subscription button option, the default option is a quick process for user.

  • 3. Smooth Checkout

    To ensure customers do not spend too much time on the checkout process, we minimized and divided the checkout forms into sections for better organization purposes.

    By asking for the zip code in the shopping bag delivery method, it allows the customers to view the estimated shipping cost immediately. The total order summary will be displayed throughout entire checkout process.

Design

Wireframes