CLIENT
ROLE
DATE
SKILLS
Challenge
RoosRoast Coffee is a signature local coffee shop in Ann Arbor, MI. During the pandemic, as in-person interactions paused, the team began to see their website not just as an online store, but as a critical extension of the RoosRoast experience. The challenge was to design a website that felt as welcoming and delightful as walking into a RoosRoast shop, while also improving usability and supporting a smoother e-commerce experience.
What I Did
Working in a team of two student designers, I focused on:
Leading the redesign of the homepage to better express brand identity and community spirit
Redesigning the checkout flow to improve clarity and reduce friction
Conducting user research, benchmarking, and competitive analysis
Establishing style guide to ensure visual consistency
+21%
Checkout Completion Rate
+ 42%
Homepage Engagement
+ 24%
Time Spent on Website
Through an initial audit, we identified several key issues:
The website did not fully reflect RoosRoast’s community-driven personality or playful brand voice
Signature products, custom typography, and visual elements were missing from the homepage
A weak visual hierarchy made it difficult to scan product details or compare items
Homepage and product page layouts required excessive scrolling and navigation to find essential information
The checkout experience lacked guidance, increasing friction during purchasing.
Specific attention was given to the homepage, designed to mimic an in-store experience with fun graphics and photos. Checkout flow was enhanced to guide customers through with clear steps, icons, and images.
Upgraded Homepage: "Make Roos, Roos"
Enhanced Community Engagement and Cohesive BrandingProduct Page & Search: Direct Access to Production Information
Improved Accessibility of Production InformationShopping cart & Checkout flow: Frictionless checkout
Separate checkout steps and minimize page load
Designing the Homepage as an “In-Store” Experience
We treated the homepage as a digital version of walking into a RoosRoast café. Playful graphics, photography, and digital printmaking elements were used to echo the brand’s physical spaces.
From the moment users land on the site, the goal was for it to feel like they’ve stepped inside the store, not entered a generic e-commerce page.
Improving Access to Product Information
We carefully used text hierarchy and thoughtfully grouped action buttons to help users understand information at a glance. Search results were reorganized into categories, and intuitive search features help users narrow down options and find relevant products without feeling overwhelmed.
These changes help customers to focus less on searching and more on choosing the coffee that felt right for them.
Clarifying the Checkout Journey
We redesigned the checkout flow to feel more supportive and intuitive, guiding users step-by-step through the process. Clear visual cues, icons, and structured layouts reduced confusion and helped users feel confident as they moved toward purchase.
The result was a checkout experience that felt calmer, clearer, and more intentiona, supporting both usability and business goals.
Homepage redesign
Product and checkout flow redesign
Competitive benchmarking insights
Visual style guide
The final designs were praised for capturing RoosRoast’s “delightfulness”, especially its vibrant spirit, sense of humor, and connection to shared memories within the community.
Good design isn’t always about minimalism or "copy-paste" templates. Sometimes, it’s about slowing down, listening carefully, and honoring what already exists.
By grounding our design decisions in research and community insight, we avoided a generic solution and instead created something rooted in RoosRoast’s identity. For me, this project reinforced an important lesson: design works best when it reflects who a brand truly is, not just what a website is supposed to look like.
We eventually presented to John Roos, Founder of RoosRoast at the end of the project.
