RoosRoast Redesign

INTRODUCTION

RoosRoast is a coffee shop in Ann Arbor, MI that values community, art, and exceptional coffee. The cafes tailor a unique experience to everyone that comes in with the welcoming staff and easter eggs throughout the spaces.

MY ROLE

Throughout the class, I used research from Baymard Institute to learn about design in e-commerce websites. These learnings helped me make better design decisions while creating a shop flow.

View my full Figma file

PROJECT SCOPE

6 week class project (Jan - Mar 2024)

TOOLS

Figma, Noun Project, Baymard Institute

PROBLEM DISCOVERY

Users experience frustration and reduced engagement with the RoosRoast website because of difficult navigation, filtering products, and completing purchases smoothly.

While exploring the RoosRoast website, there were many elements that violated UX practices:

1. The Homepage, which is supposed to tell the story of RoosRoast, instead bombardes the user with advertisements. Additionally, the text was extremely light and small, making it difficult for users to read.

2. The Search Results Page has no filtering options or distinct way of ordering their products, forcing the user to scan through all of the products one by one.

3. The Product Page includes several button styles, making the button hierarchy confusing for users to know what is the most important element on the page.

4. The Checkout Flow has a lack of RoosRoast branding and has no feedback on the user’s process while checking out.

KEY DESIGN DECISIONS

The current website does not reflect the in-person experience. The branding of RoosRoast is not consistent throughout the shopping experience. There is a lack of personalized experience, information hierarchy, and guidance while browsing through items.

  1. Rebranding the Home Page

    • Creating more consistency on branding through easter eggs

  2. Filtering Options on the Shopping Page

    • Adding filtering options that allow for an easier shopping experience

  3. Checkout Page

    • Making the checkout process more intuitive and accessible for users by providing visual process steps that are an exact match for each step of the process

View the current website

Cart

RESEARCH

A competitive analysis was conducted to understand how other coffee shops keep their users engaged and have a smooth checkout process.

Homepage

#1: Rebranding the Homepage

The redesign has more consistency with branding by implementing easter eggs, catering to a more personalized experience, and telling the story of RoosRoast. All of the illustrations are by John Roos!

#2: Filtering Options on the Shopping Page

Users need to be able to quickly tailor the product list to include only the most suitable items. Without key filter types, users' ability to tailor product lists is restricted.

#3: Checkout Page

Making the checkout process more intuitive and accessible for users to have a smoother checkout experience. Providing visual process steps that are an exact match for each step of the process through icons and progress bars.

Cart

Confirmation Page

Order Confirmed

LEARNINGS

Throughout this course, I gained a deeper understanding of effective e-commerce design principles backed by research from the Baymard Institute. By analyzing both successful and poor design examples, I was able to make more informed decisions in my own work. Our exploration of RoosRoast in person, including its unique branding elements and hidden “easter eggs,” also taught me how to keep consistentcy and branding to create a more personalized experience.