Embedded Files
The project was completed as a part of SI 311 - Laws of UX, taught by James Rampton at the University of Michigan
TL;DR
A website redesign for a coffee shop and bean seller, Roos Roast, for both mobile and desktop to tell unique stories and increase sales through:
Improving the Check Out Flow
A New Feature: Leave a Note
Creating More Clear Language Around Subscription Information
My Role
UX Designer
Team
Pair Project with Dylan Siewert
Timeline
January 2024 - April 2024
Problem Statement
RoosRoast Coffee has become a staple in Ann Arbor’s coffee culture, renowned for its quirky branding and high-quality coffee. With a growing e-commerce presence, RoosRoast aims to elevate its website experience to better reflect its unique identity and drive higher customer satisfaction and sales. This redesign focuses on improving usability, enhancing storytelling, and optimizing access to their coffee offerings, particularly on mobile and desktop platforms.
The Problem
Despite its success, the current website faces key challenges:
Complex Checkout Process: The Shopify-based checkout flow is cumbersome, causing friction for users trying to complete purchases.
Navigation Challenges: Finding coffee beans—users’ primary goal—is not intuitive from the home page.
Brand Presentation: While the site features an array of stunning photos and artwork, it lacks strategic arrangement to effectively communicate RoosRoast’s distinctive personality and values.
Process and Methodologies
Visiting the Roos Roast Roasting Facility
As this project was completed as part of a class, all students were required to visit the roasting facility of Roos Roast. My project partner, Dylan, and I had a wonderful time meeting the founder John, and everything that made Roos Roast unique.
It was also helpful that my project partner and I were long-time consumers of Roos Roast coffee, as we wanted to do their brand justice in our design.
Making a Project Plan
To best communicate and track our project process, I created a very light version of a project plan through Google Sheets. This way Dylan and I (Stasi) could communicate our progress without having to write out a message each time. This proved to be very helpful when we met up to do a big design sprint.
Sketching & Multiple Rounds of Prototyping
My project partner and I both sketched our ideas for what the redesign would look like so that we would have a more diverse set of ideas to begin with. We designed for mobile first as it is best practice.
Product Page
Home Page
Mobile Menu
Cart View
Check Out Flow
Order Placed Message
Leave a Note Concept
First Wireframe of the Home Page
Design Solutions
Style Guide
Home Page
Before
Issues:
Large Logo
Small text
Information chunking caused unclear flow
After
Improvements:
Focus on Locations & Subscriptions to increase customer engagement
Community notes feature adding Roos personality to the page with purpose
Check Out Flow
Before
Issues:
Large Logo
Long scroll to complete checkout
Confirmation of purchase page unclear
After
Improvements:
Chunking of checkout process
Branded checkout process
Clear confirmation of purchase page
Product Page
Before
Issues:
Unable to change roast/bean type within the product page
No clear focus point on the page for the text
Small font size
After
Improvements:
Added a roast type selection
Created a consistent drop down option for each categorical selection
Increased font size
Challenges and Learnings
Starting in black and white was very helpful in focusing on the layout and the importance of the hierarchy of information.
Often, a client will have a lot of asks, and prioritizing them contributes to a more streamlined design process and design priorities.
Results and Impact
As this was a class assignment, the whole class of 40 groups created redesigns for Roos Roast and presented to the owners. This meant that the Roos Roast team would end up choosing elements of the designs they liked most rather than choosing one overall. With that said, my team's design was in the top 6 of the class.
Final Prototype
Final Presentation
Retrospective
I think with more time (every design could use more time but nonetheless) my team could have added more personality to the site like the Roos Roast team was asking for. After seeing other groups' approaches, I realized that the site would benefit from more color which contrasts with what my partner and I created.
Google Sites
Report abuse