top of page

RoosRoast Redesign

Client: RoosRoast Coffee
Project Duration: 8 Weeks (Winter '24)
Figma File: Click Here
Scope: Homepage and E-commerce flow redesign (high fidelity)
Designed by: Kabir Advani and Opeyemi Ojubanire

RoosRoast Coffee is a life, art, and food project born from John Roos' mind — featuring quirky cafes and friendly staff, it is an Ann Arbor staple. 

Executive Summary

RoosRoast Coffee Shop is widely recognized as one of Ann Arbor's premier coffee destinations. Renowned for its exceptional quality and quirkiness, RoosRoast offers an extensive range of coffee blends along with comprehensive services such as coffee catering, wholesale and retail sales, and expert roasting. Additionally, the cafe enhances its offerings with a diverse selection of food options and merchandise. The goal of this redesign was to capture the unique atmosphere of RoosRoast and narrate their journey while showcasing the vibrant community surrounding RoosRoast. Our revamped design delivers an immersive and improved e-commerce experience for customers, ensuring they return time and time again.

Problem Statement

The current RoosRoast website, while mostly being visually aesthetic, encounters several challenges with its information architecture, resulting in an online experience that is hard to navigate. Additionally, their current website is not the best reflection of the in-store brand identity they have worked so hard to establish within the Ann Arbor community. As a result, RoosRoast is not fully capitalizing on their online market and missing out on sales that could be made with a better e-commerce experience.

Scroll to see the process ↓

Client Interviews

At the beginning of this project, my class had the opportunity of going to RoosRoast's roasting facility to meet John Roos and the staff, as well as understand what they were looking to get out of a redesigned website. Here were the highlights from interviewing the RoosRoast staff:

  • Website needs to do a better job emphasizing their subscription service

  • Website should have a branded checkout experience rather than the current stock Shopify UI

  • Being in the store is a core experience of RoosRoast and they wanted us to translate the quirkiness of the RoosRoast Cafes to their online experience

  • Feature the food and tea products in addition to the coffee

After the client interview, my next step was to conduct a competitive review of other e-commerce websites...

Client Interviews

roosroastcompetitive review.png

First iteration of redesign (low fidelity)

For the first iteration of the redesign, we stuck to the mobile breakpoint since it would be easier to scale up to desktop after we finalized the design as opposed to scaling down. Additionally, we kept our first draft black and white so that we could focus more on the structure of the wireframes rather than color schemes.

Final iteration of redesign (high fidelity)

For our final iteration of redesigns, we focused on unifying our icons, making better use of images on our homepage, and refining the checkout experience. 

Hover over a frame to see the full page

Key Design Decision #1: Homepage Design

  • Added images of RoosRoast staff and other visual images to show RoosRoast community

  • Emphasized visual elements and brand logos on homepage

  • Created banner to make customers aware of RoosRoast subscription service

  • Employed chunking to present products and locations in a manner that enhances the design's digestibility, aiding customers in processing, comprehending, and recalling of the content more effectively

Key Design Decision #2: Cross Selling Section at the Bottom of Product Pages

  • On the product page, we included a cross-selling section where customers can explore additional blends that may catch their interest

  • Suggesting products that complement the customer's current selection adds value and convenience to the shopping journey

  • Fosters a positive experience potentially leading to higher customer satisfaction and retention

Key Design Decision #3: Streamlined Checkout Flow

  • We divided checkout process into steps and included a progress bar to provide customers with feedback and keep them informed about their progress

  • Broke up the flow into multiple pages instead of having one long page with a lot of scrolling for the checkout

  • Reduced the number of input forms to streamline the process for customers

bottom of page