Modern Website Design

Overview

Aevro Tea sources handcrafted loose-leaf tea from sustainable farms. The product was exceptional. The site looked like every other online store in the category: dense catalog grids, generic descriptions, a checkout that revealed shipping cost only at the last step.

Visitors browsed. Few bought. The ones who did rarely came back with confidence: support tickets were doing the job the product pages should have.

I led research, information architecture, UI, and usability testing across a 6-week engagement, from stakeholder interviews through developer handoff.

Highlights

• Guided discovery replacing static category grids: filter by mood, wellness goal, flavor, and caffeine level
• Product pages rebuilt as stories (origin, brewing method, wellness benefit), not spec sheets
• Progressive checkout that surfaces shipping cost before commitment, not after
• A documented, reusable design system for future launches

The Problem

Three business symptoms, one root cause: the site never built trust before asking for a decision.

• High traffic, poor conversion: people arrived, browsed, left
• Low engagement with educational content: brewing guides and origin stories went unread because they weren't where decisions were being made
• Frequent checkout abandonment: shipping costs surfaced too late, navigation buried comparison

Research

Stakeholder interviews surfaced a pattern before a single user was in the room: visitors explored products but rarely purchased, and returning customers were loyal while first-time visitors weren't converting. Trust was breaking somewhere early.

Eight tea enthusiasts and six casual drinkers confirmed it in moderated interviews. Three themes repeated:

• Information overload: long, inconsistent descriptions with no clear starting point
• Lack of trust: no transparency on sourcing, ingredients, or health claims
• Decision fatigue: no way to compare products side by side

“I don't know which tea is right for me.”

A competitive benchmark against premium beverage and wellness brands sharpened the brief: the strongest competitors weren't selling tea; they were selling an experience, with storytelling built into the functional purchase flow itself.

Who We Designed For

Mapping the Journey

Two friction points accounted for most of the drop-off: comparing products, and the moment shipping cost appeared in checkout.

Design Strategy

One principle governed every decision: reduce cognitive effort while increasing purchasing confidence.

Four pillars carried it through: Simplicity, Trust, Discovery, Education. Every UI decision below maps back to one of these.

Rebuilding the Navigation

Three navigation concepts were wireframed and tested. A mega-menu overwhelmed users; a minimal menu hid categories entirely. A hybrid (few top-level items, guided filtering underneath) won on task completion and became final.

The Four Decisions That Moved the Metrics

1. Guided product discovery Problem: users didn't know which tea suited their needs and had no vocabulary to search for it. Solution: filter by mood, wellness goal, flavor profile, caffeine level, and brewing time, with no tea knowledge required. Principle: recognition over recall. Impact: +34% product exploration, +28% conversion.

2. Story-driven product pages Problem: pages read like a catalog, listing features instead of reasons to care. Solution: every product page restructured around origin, flavor notes, brewing guide, wellness benefit, sustainability, and reviews. Principle: match between system and the real world, with information ordered the way people actually evaluate premium goods. Impact: 2.1x time on product pages.

3. Progressive checkout Problem: shipping costs appeared too late, causing last-step abandonment. Solution: shipping estimate shown before checkout begins; progress indicator shows remaining steps. Principle: visibility of system status. Impact: –24% checkout abandonment, 47% faster completion.

4. Trust built into the interface Problem: no certifications, no reviews, no sourcing transparency; nothing to counter skepticism. Solution: organic certifications, farm stories, verified reviews, secure payment badges, clear return policy and delivery estimates, all surfaced at the decision point, not buried in a footer. Principle: credibility and social proof. Impact: –51% support requests.

Checkout itself went through three iterations: a long single-page form, then a two-step process, and finally progressive disclosure, which tested fastest and generated the fewest errors.

Visual Design & System

A component library (buttons, product cards, review cards, filter chips, breadcrumbs, accordions, ratings, toasts, form inputs, empty states) kept the build consistent and made future product launches a configuration exercise, not a design exercise.

Product cards went through four iterations (starting minimal, then adding ratings, flavor profile, and finally wellness tags), which together lifted task completion by 41%.

Accessibility

Built in from the first wireframe, not patched at the end:

• WCAG AA contrast compliance
• Full keyboard navigation with visible focus states
• Semantic heading hierarchy
• Accessible form labels and large tap targets
• Responsive typography and screen-reader-friendly structure

Validation

Twelve participants ran through the interactive prototype on tasks like finding a caffeine-free tea, comparing two green teas, and locating brewing instructions.

Business Impact

Reflection

Outcomes

• Rebuilt navigation, discovery, product pages, and checkout around trust rather than volume
• Reduced checkout abandonment by 24%, increased conversion by 28%
• Delivered a documented, reusable design system for future launches and campaigns
• Cut support requests in half by moving trust signals to the point of decision

Aevro Tea's numbers didn't come from a visual refresh. They came from removing the moments where a first-time visitor had to decide whether to trust the site, one at a time, until there weren't any left.