CASE STUDY
AlgaeCal Homepage
Elevating performance through strategic homepage user experience.
+95%
Product Clarity
+40%
Mobile Efficiency
Company: AlgaeCal Inc.
Industry: Health, Wellness & Nutrition
Business Model: (D2C) e-commerce
Timeframe: July – August 2025
Location: USA & Canada
Role: UX Researcher, Product Designer, UX/UI Designer
Team: Collaborated closely with developers and marketing/eCommerce teams
Tools: Adobe Creative Suite, Figma, Storybook, HTML/CSS, Chromatic, and Adobe XD.
Key Metrics Snapshot
-
The redesign improved how users understood the product lineup, resulting in +95% product clarity and greater confidence in their selections.
-
Simplified mobile layouts and clearer navigation boosted task efficiency by 40%, allowing users to complete key actions faster.
-
Elevating scientific proof and guarantees increased trust interactions by 30%, reinforcing credibility and driving stronger purchase confidence.
Background
AlgaeCal’s homepage had remained unchanged for over four years despite being the company’s most-visited entry point and key revenue driver. As both a D2C and B2B supplement brand focused on bone health, the homepage played a vital role in communicating trust, science, and product credibility to a primarily 55+ female audience concerned with bone loss.
However, analytics and qualitative feedback revealed friction points in mobile usability, low visibility of clinical evidence, and content hierarchy issues that diluted clarity and conversion potential. My role as Lead Product Designer was to reimagine the homepage through a complete UX redesign—modernizing its structure, improving comprehension, and ensuring it aligned with the new design system rollout.
Problems
-
User confusion: Visitors struggled to understand product differences and navigate the purchase path effectively. (see graph).
-
Outdated structure: The layout no longer reflected modern design standards or scalability within the new system.
-
Credibility gaps: Important scientific and guarantee information was buried, reducing trust and hurting SEO performance.
Success criteria
-
Raise trust and clarity
-
Maintain or improve purchase-path momentum
-
Deliver a dev-ready, scalable component architecture
Research Plan
I ran an unmoderated remote usability study with U.S. participants matching our primary demographic: women 55+ with bone-loss concerns. Sessions were task-based with think-aloud protocols in a platform called UserLytics. I also used heatmap data collected in LuckyOrange to combine the usability study with real user behaviour data.
Key tasks included:
-
Explore the homepage freely
-
Find product guarantee information
-
Find product categories
-
Change currency
-
Find science/clinical information
Metrics captured: task success, time on task, navigation paths, perceived trust, and product understanding.
Data-Driven Responsive Strategy
I optimize based on real user data, not assumptions. Analytics revealed that traffic sources influence device usage patterns. Mobile dominates at 50%+, tablets follow as the second priority, and medium devices represent minimal usage at 3%. This distribution guided our design decisions throughout the project.
Heatmap data results
By pairing usability testing with LuckyOrange heatmap data, I was able to validate where real users were actually focusing on the homepage. The heatmap confirmed that attention was skewed toward the quiz CTA and navigation links, while critical trust elements like clinical studies and product details were underutilized. This insight directly shaped my design decisions to elevate science content, rebalance CTAs, and reduce cognitive load.
Research Findings →
Translated usability insights into clear design requirements that improved clarity and trust.
01
Trust & credibility: Users valued clinical evidence and guarantees but struggled to find them.
→ Elevate science and guarantee content visually, with clearer navigation.
02
Product comprehension: The flagship product was usually recognized, but other categories caused confusion.
→ Keep the flagship prominent and design a scalable product carousel.
03
Mobile experience: Mobile users took longer to complete tasks due to friction and redundant CTAs.
→ Simplify layouts and tighten vertical spacing to enhance usability.
04
Secondary navigation: Rare tasks (e.g., currency change) were difficult to locate.
→ De-prioritize for Phase I and plan for Phase II improvements.
05
Testimonials: Some users trusted them, others were skeptical.
→ Replace dense text with a concise, video-forward carousel and authenticity cues.
Hero & Primary CTAs
-
Explored multiple placements for the Bone Health Quiz.
-
Final decision: I kept the quiz visible but reduced redundancy, placing it near account/sign-in for returning users and under the product carousel, while letting the hero focus on purchase intent.
Product Carousel (Scalable by design)
-
Standardized product cards with consistent CTA hierarchy.
-
The flagship product always led, while supporting products scaled without layout breakage.
Testimonials → Video Carousel
-
Elevated into the hero and mid-page with clear, labeled entry points.
-
Removed hidden drawers that slowed comprehension.
Clinical Proof & “The Science”
-
Replaced the dense text wall with a finite, video-first carousel.
-
Added “Real People, Real Results” label and verification cues.
Guarantee Block
-
Iterated layouts to balance credibility with mobile clarity.
-
Final: clean composition supporting both imagery and legal copy.
FAQs → Bone Health Consultant (BHC)
-
Removed homepage FAQs to reduce cognitive load.
-
Added an actionable “Bone Health Consultant” block for guidance and an always visible widget for users to contact a representative right away.
Final UX & UI
Hero: clear promise + clinical proof with one action
Product carousel: scalable, reusable card components with flagship prioritized
Evidence: clinical studies teaser + guarantee block
Social proof: video carousel with authenticity signals
Assistance: BHC block for uncertain users
Component System: All sections built with the Design System components and packaged for dev handoff.
Handoff & Implementation
I delivered a compiled prototype with assets and interaction documentation, clarified testimonial selections and product ordering, and coordinated copy edits, disclaimers, and QA feedback with cross-functional partners.
Results & Impact
The redesign exceeded business goals while improving user clarity and trust. It not only delivered a measurable revenue lift but also reinforced the brand’s clinical credibility and simplified the purchase path across devices. By creating a reusable design system, the project also laid a foundation for future testing, personalization, and product expansion.
-
+25% revenue in the post-launch period (Phase I)
-
Trust remained high; science & guarantees were more discoverable
-
Flagship product correctly identified by the majority of users
-
Testimonials became easier to digest, with stronger authenticity signals
-
Componentized foundation set for future A/B testing and scale
