Jan - Feb. 2024
Figma, Photoshop
RoosRoast Redesign
RoosRoast Redesign
RoosRoast Redesign
Discipline
UI/UX Design,
Product Design
UI/UX Design,
Product
Design
Role
UX Designer on a team of two
Timeline
Jan - Feb. 2024
Tools
Figma, Photoshop
Optimizing the RoosRoast Coffee Online experience to mirror the zany, community-centric, in-person experience.
Project Overview
Project Overview
Project Overview
As described on the RoosRoast website: "RoosRoast Coffee is a life, art, food project that turned legit. It was born of John Roos’ mind and person, but now it’s all of us – you reading these words, the good people who work here, the coffee farmers and each and every funny encounter we have over a cup of coffee."
In short, RoosRoast is a coffee company founded in Ann Arbor with two cafe locations.
They are known for their zany, eccentric vibe, local feel, and strong community.
As described on the RoosRoast website: "RoosRoast Coffee is a life, art, food project that turned legit. It was born of John Roos’ mind and person, but now it’s all of us – you reading these words, the good people who work here, the coffee farmers and each and every funny encounter we have over a cup of coffee."
In short, RoosRoast is a coffee company founded in Ann Arbor with two cafe locations.
They are known for their zany, eccentric vibe, local feel, and strong community.
As described on the RoosRoast website: "RoosRoast Coffee is a life, art, food project that turned legit. It was born of John Roos’ mind and person, but now it’s all of us – you reading these words, the good people who work here, the coffee farmers and each and every funny encounter we have over a cup of coffee."
In short, RoosRoast is a coffee company founded in Ann Arbor with two cafe locations.
They are known for their zany, eccentric vibe, local feel, and strong community.
What is RoosRoast?
What is RoosRoast?
What is RoosRoast?
About the Project
About the Project
About the Project
RoosRoast currently has a decent website, however, it lacks lots of e-commerce best practices and doesn't do a great job of capturing the brand.
The primary goal of this project is to redesign the RoosRoast website to guide users through a virtual RoosRoast store, displaying products with detailed information to aid selection.
RoosRoast currently has a decent website, however, it lacks lots of e-commerce best practices and doesn't do a great job of capturing the brand.
The primary goal of this project is to redesign the RoosRoast website to guide users through a virtual RoosRoast store, displaying products with detailed information to aid selection.
RoosRoast currently has a decent website, however, it lacks lots of e-commerce best practices and doesn't do a great job of capturing the brand.
The primary goal of this project is to redesign the RoosRoast website to guide users through a virtual RoosRoast store, displaying products with detailed information to aid selection.
The Problem
The Problem
The Problem
The current site lacks e-commerce best practices and struggles to translate to users what makes RoosRoast a special, premium coffee roaster through both its e-commerce functionalities and ability to resonate with the company's identity.
The current site lacks e-commerce best practices and struggles to translate to users what makes RoosRoast a special, premium coffee roaster through both its e-commerce functionalities and ability to resonate with the company's identity.
The current site lacks e-commerce best practices and struggles to translate to users what makes RoosRoast a special, premium coffee roaster through both its e-commerce functionalities and ability to resonate with the company's identity.
Project Goals
Project Goals
Project Goals
Create an Exciting Homepage
Redesign the homepage to bridge the in-person experience with the online one and to communicate the RoosRoast brand.
Create an Exciting Homepage
Redesign the homepage to bridge the in-person experience with the online one and to communicate the RoosRoast brand.
Create an Exciting Homepage
Redesign the homepage to bridge the in-person experience with the online one and to communicate the RoosRoast brand.
Optimize the Shopping Bag
Optimize the shopping bag to make it easier for users to sort products and checkout.
Optimize the Shopping Bag
Optimize the shopping bag to make it easier for users to sort products and checkout.
Optimize the Shopping Bag
Optimize the shopping bag to make it easier for users to sort products and checkout.
Clarify Subscription Process
Clarify the subscription process to make it more transparent and accessible to users.
Clarify Subscription Process
Clarify the subscription process to make it more transparent and accessible to users.
Clarify Subscription Process
Clarify the subscription process to make it more transparent and accessible to users.
Goal 1: Create an Exciting Homepage
Goal 1: Create an
Exciting Homepage
Goal 1: Create an Exciting
Homepage
Goal 1: Create an Exciting
Homepage
Goal 1: Create an Exciting
Homepage
PROBLEM: The current RoosRoast homepage fails to capture RoosRoast's identity, doesn't display a wide range of products, and has unclear CTA's.
SOLUTION: My redesign of the homepage uses collages to capture the RoosRoast identity by displaying a variety of products, images of the store and employees, and leaning into the community-driven aspect of RoosRoast.
Additionally, my redesign uses clear CTAs and effectively communicates RoosRoasts values and commitment to environmental ethics.
OUTCOME: The predicted outcome of this redesign is to boost user-interaction with the website.
PROBLEM: The current RoosRoast homepage fails to capture RoosRoast's identity, doesn't display a wide range of products, and has unclear CTA's.
SOLUTION: My redesign of the homepage uses collages to capture the RoosRoast identity by displaying a variety of products, images of the store and employees, and leaning into the community-driven aspect of RoosRoast.
Additionally, my redesign uses clear CTAs and effectively communicates RoosRoasts values and commitment to environmental ethics.
OUTCOME: The predicted outcome of this redesign is to boost user-interaction with the website.
PROBLEM: The current RoosRoast homepage fails to capture RoosRoast's identity, doesn't display a wide range of products, and has unclear CTA's.
SOLUTION: My redesign of the homepage uses collages to capture the RoosRoast identity by displaying a variety of products, images of the store and employees, and leaning into the community-driven aspect of RoosRoast.
Additionally, my redesign uses clear CTAs and effectively communicates RoosRoasts values and commitment to environmental ethics.
OUTCOME: The predicted outcome of this redesign is to boost user-interaction with the website.
Goal 2: Optimize the Shopping Bag
Goal 2: Optimize the
Shopping Bag
Goal 2: Optimize the
Shopping Bag
Goal 2: Optimize the
Shopping Bag
Goal 2: Optimize the
Shopping Bag
PROBLEM: The current RoosRoast shopping bag lacks e-commerce best practices and doesn't display an estimated total price.
SOLUTION: My design of the shopping bag allows for the user to save items for later and displays saved items at the bottom of the bag. Additionally, my design clearly shows the total estimated price and has a visually distinct checkout button.
OUTCOME: The shopping bag redesign is estimated to increase online orders by 21% and improve customer satisfaction.
PROBLEM: The current RoosRoast shopping bag lacks e-commerce best practices and doesn't display an estimated total price.
SOLUTION: My design of the shopping bag allows for the user to save items for later and displays saved items at the bottom of the bag. Additionally, my design clearly shows the total estimated price and has a visually distinct checkout button.
OUTCOME: The shopping bag redesign is estimated to increase online orders by 21% and improve customer satisfaction.
PROBLEM: The current RoosRoast shopping bag lacks e-commerce best practices and doesn't display an estimated total price.
SOLUTION: My design of the shopping bag allows for the user to save items for later and displays saved items at the bottom of the bag. Additionally, my design clearly shows the total estimated price and has a visually distinct checkout button.
OUTCOME: The shopping bag redesign is estimated to increase online orders by 21% and improve customer satisfaction.
Goal 3: Clarify Subscription Process
Goal 3: Clarify
Subscription Process
Goal 3: Clarify Subscription
Process
Goal 3: Clarify Subscription
Process
Goal 3: Clarify Subscription
Process
PROBLEM: There is no dedicated page to subscriptions on the RoosRoast website and information about subscriptions is unclear.
SOLUTION: My design utilizes a 'how it works' page with three steps to simplify and clarify the subscription process. Additionally, my design has a link to the subscriptions page in the top navigation, which the current RoosRoast website does not.
OUTCOME: The expected outcome of this redesign is a boost in the number of RoosRoast subscriptions.
PROBLEM: There is no dedicated page to subscriptions on the RoosRoast website and information about subscriptions is unclear.
SOLUTION: My design utilizes a 'how it works' page with three steps to simplify and clarify the subscription process. Additionally, my design has a link to the subscriptions page in the top navigation, which the current RoosRoast website does not.
OUTCOME: The expected outcome of this redesign is a boost in the number of RoosRoast subscriptions.
PROBLEM: There is no dedicated page to subscriptions on the RoosRoast website and information about subscriptions is unclear.
SOLUTION: My design utilizes a 'how it works' page with three steps to simplify and clarify the subscription process. Additionally, my design has a link to the subscriptions page in the top navigation, which the current RoosRoast website does not.
OUTCOME: The expected outcome of this redesign is a boost in the number of RoosRoast subscriptions.
Reflection
Reflection
Reflection
That there is a lot of complexity to e-commerce websites.
That I really enjoy working on e-commerce products.
That its important to find a balance between prioritizing user experience and communicating the company's brand.
That there is a lot of complexity to e-commerce websites.
That I really enjoy working on e-commerce products.
That its important to find a balance between prioritizing user experience and communicating the company's brand.
That there is a lot of complexity to e-commerce websites.
That I really enjoy working on e-commerce products.
That its important to find a balance between prioritizing user experience and communicating the company's brand.
What I Learned
What I Learned
What I Learned
If I had more time,
I would…
If I had more time, I would…
If I had more time, I would…
If I had more time, I would…
If I had more time, I would…
If I had more time, I would…
Conduct user research and usability tests.
Use the Baymard Institute to further research ecommerce best practices.
Improve upon the visual design of some of my pages.
Conduct user research and usability tests.
Use the Baymard Institute to further research ecommerce best practices.
Improve upon the visual design of some of my pages.
Conduct user research and usability tests.
Use the Baymard Institute to further research ecommerce best practices.
Improve upon the visual design of some of my pages.
Contact
