Dried Tea Website - Page Redesign
Overview
This UX/CRO initiative focused on redesigning a WordPress site to boost e-commerce performance and convert a large Facebook community into paying customers. By combining data-driven research, AI-enhanced seasonal visuals, cross-team SEO collaboration, and precise design iterations, the project delivered an optimized Homepage, Tea Club page, and site-wide navigation structure built to increase user engagement and track core sales metrics.
Role
CRO Analyst, UX Designer, Implementation Manager
Tools
Google Analytics, Crazy Egg Heatmap & Session Recordings, Figma, AI Image GeneratorWordPress
The Process
Research
To help the client update their site theme, reflect seasonal branding, and convert their large Facebook audience into online shoppers, I performed a comprehensive UX/CRO audit. This research encompassed analyzing Google Analytics, reviewing heatmaps, building user personas from Facebook group insights, conducting competitor analyses, and executing a heuristic walkthrough. Integrating findings with input from the SEO and copywriting teams, I delivered a strategic plan with site-wide and page-specific recommendations targeting the Homepage and Tea Club page.
Design
Using the client’s selected WordPress theme, updated seasonal imagery, and custom AI-generated graphics, I redesigned key pages within theme and plugin constraints. Layout changes, content hierarchy shifts, and new interactive features were introduced to streamline the user journey. Before presenting the Figma mockups, prototype, and implementation notes to the client, I reviewed the designs with our developer to confirm technical feasibility and establish a execution timeline.
Feedback & Iteration
The client requested revisions involving SEO copy, updated color palettes, and revised imagery, which required extending the project timeline to source higher-quality assets. I delivered updated designs within a one-week turnaround that incorporated all cross-team revisions. Following a final round of minor client adjustments, the designs received full approval and advanced to the development phase.
Implementation
Our developer built the customized theme in a WordPress sandbox environment, updating the targeted pages along with site-wide navigation and supporting templates. Key performance indicators—including Facebook referral visits, bounce rates, add-to-carts, and completed purchases—were verified in Google Analytics. After comprehensive multi-device QA testing by internal teams and the Account Manager, the approved build was handed over to the client for live deployment.
Before & After
Homepage
Altered Navigation & CTAs
Promoted 'Take the Quiz' to a transactional parent category with a CTA design, renamed 'Brand' to 'About,' simplified newsletter signups to build trust, and added diverse shop CTAs throughout the page.
Updated Visual Imagery
Updated the hero section with high-quality, product-focused imagery (loose leaf tea) frequently used sitewide to showcase details and quality, and incorporated imagery of people drinking tea in mission sections.
Shuffle Product Display & Hierarchy
Prioritized displaying bestsellers and popular tea categories directly below the hero section using carousels and added interactive elements like hover effects, 'best seller' badges, and quick-add options (static on mobile).
Streamlined Content
Deprioritized 'Shop by Benefit,' 'Our Mission,' and 'Find the Right Tea' sections by minimizing their visual footprint, optimizing language to align with the quiz, and breaking up dense text blocks to reduce cognitive load and increase scroll depth.
Improved Social Proof
Implemented an abbreviated testimonials carousel with 'verified user' badges and added an Instagram carousel.
Alternate Footer Layout
Simplified the footer layout to include only relevant social links, contact information, high-level shop categories, and popular searches.
Before & After
Tea Club Page
Hero & Second Fold Updates
Updated the hero section with people-focused imagery and explicit value propositions (e.g., free shipping). Prioritized program process details in the second fold using simple iconography to explain "pay as you go" and monthly benefits.
Add Purchase Experience to Page
Integrated a direct "Add to Cart" buy box to reduce purchasing steps. This section highlights key perks, includes a relevant testimonial, and displays subscription details beneath CTAs to build trust.
Shuffle Information Hierarchy
Consolidation of membership perks, descriptions, and shipping/return details into a tabbed section below the buy box, using brand-aligned checkmark icons for clarity.
Brand & Content Enhancements
Refined the "About the Club" section by minimizing text, updating color contrast, and emphasizing bullet points. Added a general unique value proposition section featuring loose-leaf imagery and icons.
