TeaHaus Redesign
TeaHaus is a locally owned tea bar & lounge in Ann Arbor, Michigan. This project focuses on a complete overhaul of their website to improve information architecture, align with the in-store experience, and increase e-commerce sales.
Role
UX Researcher & Designer
Team of 2
Project Duration
January - March 2026
Focus
Design Systems
Responsivity
Competitive Analysis
TeaHaus
Clear entry into browsing
High quality product pictures
Plenty merchandise available
Extensive subpages
Outdated appearance
Blue Bottle Coffee
Layout & photos with brand
Simplified navigation
Easy to locate cafe
Brand character
Brew guides tucked in footer
Flight Tea Bar
High-quality photos of tea
Easy to navigate shop page
Missing cafe address
Text color contrast failure
Project Goals
Simplify Key Paths
Help customers explore online and in-person offerings without overwhelming them.
Modernize Feel
Increase trust and usability by utilizing a clean, responsive look in-line with other cafes.
Show Character
Bring the charm of the TeaHaus lounge to their online website experience.
Brand Elements
Color
Primary
Default
Light
Subtle
Darker
Secondary
Default
Light
Subtle
Darker
Success State
Default
Light
Subtle
Darker
Error State
Default
Light
Subtle
Darker
I engineered a semantic color system using Figma variables, mapping colors to tokens like "Success" and "Error" as well as “dark” and “light.” This logic-based approach automates UI states and ensures a scalable, dev-ready palette.
Typography
Sora
Ag
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Inter
Ag
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
I established a disciplined type hierarchy by anchoring Sora and Inter into a global style library. This framework enforces mathematical scaling and optimized legibility, ensuring 100% visual consistency across the entire platform.
Logo
I refined the brand’s visual identity by transitioning from a dated, enclosed crest to a clean, minimalist wordmark. This enhances digital scalability and legibility while maintaining the charm of TeaHaus.
TeaHaus
Ann Arbor
Components & Templates
Components
Size
Size
50g
100g
200g
500g
Size (#)
Type
Type
Green Tea (#)
Green Tea (#)
Green Tea (#)
Green Tea (#)
Type (#)
Vietnam Jasmine
$12.25
Green Tea
Vietnam Jasmine
$12.25
Green Tea
Green Tea (#)
Green Tea (#)
Green Tea (#)
Green Tea
Black Tea
White Tea
Fruit Tea
Shop
Shop
Shop
Buttons
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Large
Medium
Small
Primary
Secondary
Tertiary
Scalable Templates
TeaHaus
Ann Arbor
Shop
Visit
Learn
About
Search
TeaHaus
Ann Arbor
TeaHaus
Ann Arbor
Sign up for our newsletter
Email Address
Hours
Mon: Closed
Tues–Sat: 10am–10pm
Sun: 11am–6pm
Location
200–204 N. 4th Ave.
Ann Arbor, MI 48104
Shop
Tea
Tea Accessories
Giftcards
Visit
Location & Hours
Menu
Event Calendar
Learn
Brewing Tips
Tea Ingredients
Tea Quality & Testing
About
Our Mission
Tea Community
Where to Buy
TeaHaus
Ann Arbor
© 2026 TeaHaus
Sign up for our newsletter
Email Address
Hours
Mon: Closed
Tues–Sat: 10am–10pm
Sun: 11am–6pm
Location
200–204 N. 4th Ave.
Ann Arbor, MI 48104
Shop
Tea
Tea Accessories
Giftcards
Visit
Location & Hours
Menu
Event Calendar
Learn
Brewing Tips
Tea Ingredients
Tea Quality & Testing
About
Our Mission
Tea Community
Where to Buy
TeaHaus
Ann Arbor
© 2026 TeaHaus
Sign up for our newsletter
Email Address
Hours
Mon: Closed
Tues–Sat: 10am–10pm
Sun: 11am–6pm
Location
200–204 N. 4th Ave.
Ann Arbor, MI 48104
Shop
Tea
Tea Accessories
Giftcards
Visit
Location & Hours
Menu
Event Calendar
Learn
Brewing Tips
Tea Ingredients
Tea Quality & Testing
About
Our Mission
Tea Community
Where to Buy
TeaHaus
Ann Arbor
© 2026 TeaHaus
Key Design Decisions
Menu-style homepage
Help customers explore online and in-person offerings without overwhelming them.
Simplified browsing
Increase trust and usability by utilizing a clean, responsive look in-line with other cafes.
Type & color updates
Bring the charm of the TeaHaus lounge to their online website experience.
Final Designs
Homepage - Before
Overwhelming nav menu options
Duplicative list and menu-style layout of teas
No location or hours on homepage
Outdated visual appearance
Homepage - After
Reduced & simplified nav options
Menu-style offers accessible entry points to primary site pages
Modal pop-up for return shoppers who want a quick experience
Hours & location added to footer
Homepage (Mobile) - Before
Extremely small touch targets (top bar & nav specifically)
No collapsed nav menu
Homepage (Mobile) - Before
Collapsed nav to hamburger menu for simplicity and adhesion to mobile mental model
Cart and profile accessible in top nav bar to improve discoverability
Horizontal scrolling leveraged for tea browsing
Product Page (Mobile) - Before
Extremely small touch targets for size dropdown
Low visibility CTA button "Add to Cart"
Large chunks of text descriptions
Product Page (Mobile) - After
mobile-friendly sizing of elements and touch targets
bag illustration for clear CTA for user
high visibility CTA "Add to Cart" button
Reviews included for customer satisfaction data
Product Page (Mobile) - Before
Extremely small touch targets for size dropdown
Low visibility CTA button "Add to Cart"
Large chunks of text descriptions
Other Layouts (Mobile) - After
Spacing, color, layout adjustments that improve clarity of information and browsing functions
Simplified and streamlined checkout within TeaHaus platform (current website links to Shop e-commerce platform
Dark Mode - After
Leveraged Figma tokens to swiftly shift between light and dark mode seamlessly
My Takeaways
Design-to-Code
I prioritized developer-friendly handoffs by mirroring technical workflows in Figma. I learned the importance of semantic naming and tokenization: to bridge the gap between creative vision and implementation.
Atomic Consistency
Building from the ground up reinforced the value of atomic design. I established foundations like color and type first, before creating components—ensuring a consistent and easy to maintain design system.
More Projects
TradeBox: Blind Box Trading
A no-cost trading platform for blind box enthusiasts to trade items.
View project
Tato: Smart book companion
An AI-powered companion that helps children reconnect with reading.
View project
Digital Design for Silverado EV
Next-gen infotainment concept to encourage connection on group drive.
View project
Redesigning MPLP Website
A website overhaul to improve resource finding for Michigan legal aid attorneys.
View project
Sara Carrier
copyright © 2026