Built with Framer
Electrolyte Boost Landing Page Redesign
Samuel Nwankwoala
Overview
Electrolyte Boost® offers electrolytes, vitamins, and Cognizin® citicoline in a waterless format designed to support sustained performance, improved mood, and stable energy without crashes. The redesign focused on making the product’s “waterless delivery” benefit instantly clear, building trust, and reducing friction from landing page to checkout.
Objectives
Redesign the website and make a visual improvement.
Improve hierarchy, simplify choice points, and answer common questions.
Increase purchase intent and guide users to "Buy" with confidence.
Reduce skepticism and make it information easy to scan.
Establish an SEO-ready structure for future growth.
Challenges
“Waterless delivery” is unfamiliar
Users may not immediately understand what the product is, how to take it, or why it’s better than mixing a drink.
Value proposition competes with multiple messages
The page includes many claims (energy, focus, performance, “no sugar/stevia/caffeine”), which can dilute the main takeaway.
Benefits aren’t strongly tied to proof
Ingredient and science references exist, but they feel disconnected from the benefits users care about.
User journey has friction between interest and purchase
CTAs and decision points can feel scattered, making it easier to scroll without committing.
Trust gaps for new customers
People need quick clarity on what’s inside, what’s not, taste expectations, safety, and who it’s for.
Hierarchy issues
Preview of the Old Design
Old Website Design
Design Approach
A modern, clean layout that emphasizes the product’s key features.
Engaging visuals and clear typography for better readability.
Enhanced product storytelling to showcase the functionality and benefits.
Improved user flow to make navigation seamless and drive conversions.
Add quick answers to top concerns to build transparency and reassurance.
New Website Design
Tools & Stack
Design: Figma
Build: Framer (Current in Progress)
Analytics: Google Analytics (GA4)
Focus Areas: UX, mobile optimization, SEO basis, conversion tracking
Outcome
Visitors can quickly tell what Electrolyte Boost® is, how to use it, and why “waterless delivery” matters.
Benefits (stable energy, focus, performance) are clearer, with ingredient and “what’s not included” info placed where users look for reassurance.
The path from landing to checkout is more direct, with consistent CTAs and fewer dead-end scroll moments.
Proof, ingredients, and FAQs are easier to scan, helping first-time buyers feel confident without leaving the page.
Content is chunked, readable, and action-oriented, making it easier to browse and buy on smaller screens.
What this product shows the client
The site now explains the unique “waterless” format in plain language and ties it to real-life value (convenience + performance).
The design shows a conversion-ready shopping experience. It supports how people actually buy (skim), compare, look for proof, then commit.
A trust-first brand presentation. It provides ingredient clarity, “no sugar/stevia/caffeine” claims, and science support are structured to build confidence without overwhelming users.
The new layout and modules make it easy to add flavors, bundles, testimonials, FAQs, or research updates without breaking the experience. A scalable content system.
A mobile-first foundation: The experience is designed for modern browsing behavior, improving readability, navigation, and purchase actions on mobile.
Like this project
Posted Mar 6, 2025
Redesigned and built the website in Framer with SEO and analytics integration, improved trust cues, and create a more direct path from landing page to purchase.
Likes
2
Views
2
Timeline
Aug 15, 2024 - Aug 21, 2024
Clients
Electrolyte Boost
