RoosRoast

RoosRoast

RoosRoast Logo, hairy hand holding a coffee

An e-commerce redesign to capture the highly caffeinated user.

ABOUT

SI 311 - Laws of UX

March 5, 2024 - April 16, 2024

Laws of UX is a class that teaches all about the process of designing a digital project, with keen focus on psychology in design as well as storytelling. We worked with RoosRoast, a local coffee shop for the first half of the semester. I completed this project with the wonderful Hannah Kim.

STEPS

1 The Brief & The Client

2 Competitive Analysis

3 E-commerce Research

4 Lo-Fi Iterations

5 The Style Guide

6 Final Creation

The Brief & The Client

Menu board for 3 different coffee beans, Lobster Butter, Cowboy, and Rich French Neighbor

Caffeinated Culture

RoosRoast is Ann Arbor’s greatest coffee shop (in my correct opinion). Their website worked fine, but was missing the character found in their stores. Known for it’s eccentricity and high energy, the e-commerce flow felt rather tame. 

Our brief was to make their checkout flow more intuitive, accessible, and easy to use, while also bringing the unique energy found in their stores and coffee products.

Competitive Analysis

Coffee online

I took a look at 4 competitors in the e-commerce space. Some that deal with coffee, some that do monthly subscriptions, and other small community orientated businesses. These were Book of the Month, Zingerman’s, Grocer’s Daughter Chocolate, and Sephora. I looked into their interfaces and analyzed which key decisions were benefiting users, and which were not. I took key takeaway’s from the research to bring into my designing.

Sample competitive analysis

E-commerce Research

A whole research site

For this project, we were given access to the Baymard Institute’s research for e-commerce. During the design process, I would research each specific decision I would make before implementing the choice, so I could create the best user flow that I could. Some of this research is attached to the Competitive Analysis, and some was done during the first iterations of the design.

Lo-Fi Iterations

Good try, kid

Before consolidating our designs, Hannah and I took a stab at lo-fi designs on our own.

Personal low-fi iteration of the home page
Personal low-fi iteration of the home page
Personal low-fi iteration of the product page
Personal low-fi iteration of the search page
Personal low-fi iteration of the checkout page
Personal low-fi iteration of the cart page

The Style Guide

Let’s make it fun

Roos roast gave us loads of assets and their business style guide. We took these elements and ran with it. We wanted to implement a greater amount of color, sketches, and graphics to entice the user.

Color palate containing blues and oranges

Final Creations

The Roos experience

Home page mobile with sketch assets
Home page mobile with angular details and sketch assets
Hi-fi search page
Hi-fi product page
Home page web with angular details
Home page web with sketch assets
Web product page
web product page with light to dark roast meter