UX/UI DESIGN, 2025
Huey Suncare
Designers: Emily Sayer, Ireland Mak, Henry Ni, Danny Truong
Overview
Huey Suncare is a mineral sunscreen brand built for athletes and outdoor enthusiasts. Huey's founder approached our team to redesign Huey’s website with the goal of creating a more immersive and purposeful digital experience than their current site, which had originally been designed as a pitch tool for investors. The new site needed to showcase the brand’s performance-driven philosophy, highlight the science behind sunscreen, and introduce Huey’s upcoming personalized product: Hues, a custom sunscreen developed through a skin hue–matching quiz.
​
Unlike traditional sunscreen brands, Huey positions sunscreen not only as protection from UV damage but as a performance tool that prevents sun fatigue—enabling athletes and adventurers to perform longer, recover better, and keep exploring. The redesign required restructuring the flow of information to clearly communicate these benefits while reflecting Huey’s unique brand identity, which blends nautical and prep-inspired aesthetics with bold, Benetton-style color blocking.
​
​By repositioning Huey as more than just a skincare brand—bridging the worlds of athletics and cosmetics—the redesigned site sets the stage for Huey’s transition from a small Amazon tester product to a bold, differentiated presence in the sports and skincare markets.
Contents
Final Prototype
THE PROBLEM
Transform Huey Suncare’s site into a bold, athlete-focused, personalized shopping experience that frames sunscreen as a high-performance tool.
RESEARCH
Competitive Analysis
To inform the redesign of Huey Suncare’s website, I analyzed a set of competitor and aspirational brands—Dedcool, Vacation, and Prose—that successfully blend product storytelling, personalization, and immersive brand experiences. Several themes emerged that directly shaped Huey's design strategy.
Prominent Social Proof:
Dedcool and Vacation both elevate social proof by placing customer reviews and influencer content prominently near the top of their homepages, establishing instant trust. They reinforce credibility through multiple review formats, including testimonials and visible star ratings. This layered validation helps users feel confident in the product from the moment they land on the site.
Personalization as a Core Experience:
Prose sets the standard for personalization by guiding users into a custom quiz at multiple touchpoints and positioning it as essential to product effectiveness. This approach mirrors Huey’s upcoming Hues quiz, emphasizing the value of introducing interactive customization early and often. Together, they show how personalization can become a core part of the product experience rather than an optional step.
Immersive Interactivity:
Vacation uses playful digital moments—like animated tickers, interactive “vibe generators,” and hover effects—to fully draw users into the brand experience. Dedcool’s animated ticker and Prose’s name-entry animations achieve a similar effect, keeping users engaged through subtle but deliberate interaction. Together, these examples show how immersive micro-interactions can pull users deeper into a brand while nudging them toward action.
Clear Conversion Pathways:
Each brand used strategic, high-visibility CTAs—like “Get Your Formula” or “Shop the Collection”—to make the path from homepage to purchase immediate and unmistakable. These prompts appeared across multiple sections, reinforcing the desired action without overwhelming the user. Persistent or fixed CTAs further minimized friction, keeping conversion consistently top-of-mind.
The strongest digital experiences combine personalization, trust-building, and immersive brand expression. For Huey, this translates to elevating the Hues quiz as a core feature, integrating social proof throughout, and crafting interactive brand moments that frame sunscreen as both science-backed and performance-oriented.
RESEARCH
User Personas
The High-Commitment Athlete
“During long matches, I can’t afford distractions — especially from sunscreen that melts off or makes my skin look chalky.”
Goals:
-
Find sun protection that remains effective during heavy sweating and long matches
-
Use a shade that complements her complexion without leaving a cast
-
Rely on long-wear SPF so she can stay locked into performance rather than upkeep
Frustrations:
-
Traditional sunscreens often leave a noticeable white film
-
Reapplying in the middle of training or competition is inconvenient and disruptive
The Long-Wear SPF Seeker
“I’m outside all day — I just need something reliable that I can throw in my bag and not think twice about.”
Goals:
-
Use dependable SPF that lasts through extended outdoor training
-
Keep his routine streamlined with straightforward product choices
-
Carry compact, portable sunscreen that fits easily into a backpack or bike bag
Frustrations:
-
He often forgets to reapply amid busy training sessions
-
​Too many product variations lead to indecision and overwhelm
IDEATION
Sitemapping
This user flow maps out the redesigned Huey website experience, guiding users from browsing product details through checkout while also introducing a personalized path via the “Find Your Hue” quiz. Inspired by competitors like Prose, the quiz is positioned as a central entry point, encouraging users to match their hue and select outdoor activities before receiving tailored results.
Social proof and product validation, as seen in Dedcool and Vacation, informed the integration of review visibility and interactive touchpoints throughout the site to build trust and keep users engaged. Multiple conversion routes—whether through direct shopping, quiz results, or CTAs—reflect insights from our market analysis, ensuring users encounter clear, immersive pathways to purchase while experiencing Huey’s distinct brand identity.
Restructured Site Map:
WIREFRAMING
Low-to-High Fidelity Development
Next, we built out low-fidelity wireframes to begin visualizing the site's new layout. Here is the progression of the pages from low to high-fidelity wireframes:
Low-Fi Home Screen:
.png)
Hero image that prompts users to visit "Shop" screen
Amazon reviews to provide social proof
Product carousel to entice users to shop
Informational zone that navigates to the "About" screen
Product imagery
Informational zone displaying stand-out ingredients
Users are prompted to join email list
Links to and carousel preview of Huey's social media
High-Fi Home Screen:
"Find Your Hue" sticky banner that prompts users to take a quiz to find their perfect product match
Sticky button for AI chat assistant
Amazon reviews
The Huey home page centers personalization by prominently featuring the “Find Your Hue” quiz in the hero section. Placing this interactive element upfront encourages users to engage immediately and highlights the brand’s unique approach of tailoring sunscreen to individual skin tone, activity, and needs.
​
​Social proof is introduced early through customer testimonials and lifestyle imagery, helping build trust and credibility while showcasing the product in real-world athletic contexts. This mix of reviews and visuals reinforces the idea that Huey sunscreen is both validated and aspirational, giving new visitors immediate confidence in the brand.
​
The layout also prioritizes clear, frequent calls-to-action such as “Shop Best Sellers” and “Try Now,” ensuring a seamless path from exploration to purchase. Educational sections on ingredients and product benefits are paired with these CTAs, balancing storytelling with direct conversion opportunities.
"Find Your Hue" Sticky Banner:
Personalized "Your Hue" Banner, which reflects quiz results and navigates to product screen:
Low-Fi About Screen:
.png)
Hero image that prompts users to take the "Find Your Hue" quiz
Informational zone that navigates to a "Why We Work" screen, explaining the science of the product
Features and benefits
Informational zone that navigates to a "How We Work" screen, explaining the founding story
Links to and carousel preview of Huey's social media
Users are prompted to join email list
High-Fi About Screen:
Hero image that navigates to "Our Product" screen rather than "Find Your Hue," as the sticky "Find Your Hue" banner will be present above
Instead of features and benefits, our stakeholder wanted to highlight the signs of sun fatigue
Interactive slider element that highlights the key differences between mineral and chemical sunscreen
Interactive ingredient thumbnails (reveal ingredient image on hover)
Because our client wanted to differentiate Huey by relaying to consumers the importance of not only preventing sun damage, but preventing sun fatigue, I decided that the About page would need to focus on educating around sun fatigye. This is the biggest change from low-fidelity to high-fidelity, as I initially imagined the page to be solely product-focused.
​
The end result was a mix of product focus and sun fatigue education, with the final wireframe for the page including information on sun fatigue, the difference between mineral vs. chemical sunscreen, and some of the product's most notable ingredients.
​
To achieve the client's goal of making the site more immersive, I added several interactive elements to this page: the "Mineral vs. Chemical" subsection features a draggable slider that, when pulled, illustrates the drawbacks of chemical sunscreen vs. the benefits of mineral sunscreen (as displayed in the primary state of the subsection); the benefits in this subsection are expandable, to show users details about each benefit when selected. The ingredients subsection is also interactive, revealing images of the ingredients when users hover over an ingredient name.
Design System
We created a library of the following components in order to build out Huey's visual design system.
FINAL WIREFRAMES
Immersing Shoppers in Huey
Home Screen and Dermatology AI Chat Box Experience:
Insight: Active consumers don’t shop for sunscreen as a beauty product—they evaluate it like gear. To convert this audience, the homepage must signal performance, credibility, and personalization immediately, while removing friction and uncertainty around product choice.
-
Anchor the Experience in Personalization
-
A “Find Your Hue” sticky banner urges users to shop their personalized product match.
-
Homepage breaks the quiz into three simple, human steps (look at skin, choose activity, get match), which frames personalization as easy, intentional, and core to the brand.
-
-
Modular Sections support Different Shopping Mindsets
-
Best sellers are platformed for fast decision-makers.
-
Ingredients carousel is present for trust-seekers.
-
Social proof and testimonials for are present for validation.
-
-
Reinforce Community and Real-World Use
-
User-generated imagery and social content are embedded throughout.
-
Diverse skin tones and activity types are shown consistently, which signals inclusivity while validating real performance across users.
-
-
AI Chat Bot: Reducing Friction with Proactive Assistance
-
Sticky red chat button ensures help is always accessible throughout the scroll.
-
The chat is positioned as a Dermatology AI Assistant, not generic support, which signals expertise rather than sales pressure.
-
Quick-select prompts anticipate most-asked questions and reduce friction.
-
Result: Huey’s home experience transforms sunscreen shopping into a performance-driven, personalized journey—combining athlete-led branding, guided product matching, and on-demand expertise to increase confidence, trust, and conversion.
Personalized "Find Your Hue" Quiz:
Insight: Many sunscreen shoppers—especially those with deeper skin tones—hesitate to purchase due to fear of white cast, poor performance during activity, and unclear product differentiation. A short, guided quiz can replace guesswork with confidence and move users decisively toward purchase.
-
Set Clear Expectations before Users Commit
-
Hero copy promises only two questions.
-
The “Start Now” CTA is visually dominant and unambiguous, which educes perceived effort and increases quiz start rate.
-
-
Reduce Cognitive Load with Visual, Single-Choice Steps
-
Only one question is presented per screen with large tappable cards.
-
Clear Back / Next navigation maintains user control, keeping momentum high and minimizing abandonment.
-
-
Preserve Agency while Optimizing Conversion
-
Primary CTA “Shop Now” is positioned as the natural next step.
-
Secondary “Retake” option allows correction without friction, respecting user autonomy without derailing momentum.
-
-
Seamlessly Transition from Quiz to Commerce
-
Results screen visually and structurally mirrors the shopping experience.
-
There is no abrupt context switch between quiz and product purchase, which maintains trust and continuity through checkout.
-
Result: The “Find Your Hue” quiz transforms sunscreen selection into a fast, confidence-building decision—guiding users from curiosity to purchase by framing Huey products as personalized, high-performance tools built for real activity.
Shop, Product Detail, and Checkout Screens:
Insight: Once users enter the shop, hesitation often comes from uncertainty around shade selection, performance claims, and whether the product will actually work for their activity level. The shopping experience must reinforce confidence, minimize comparison fatigue, and keep momentum toward checkout.
-
Make Personalization Visible at the Catalog Level
-
Hue Type labels (Type I–VI) are shown directly on product cards.
-
All variants are priced equally to avoid perceived “risk tiers," removinh guesswork early and reinforcing that shade matching is intentional, not cosmetic
-
-
Reduce Decision Fatigue with a Clean, Repeatable Grid
-
Card structure is consistent (image, rating, hue, price, CTA).
-
Absence of excessive filtering or competing product lines helps users quickly identify their product rather than compare endlessly.
-
-
Guide Correct Use to Protect Performance Expectations
-
Clear “How to Use” section presents reapplication guidance.
-
Language ties usage directly to outcomes (“Play longer → Recover faster”), preventing misuse that could undermine trust in product performance.
-
-
Minimize Checkout Friction
-
Slide-out cart preserves context and momentum.
-
Clear pricing, quantity controls, and prominent checkout CTA help to reduce abandonment by keeping users oriented and in control.
-
Result: The shop and checkout experience reinforces Huey’s core promise—personalized, high-performance sun protection—by eliminating shade anxiety, grounding claims in real-world use, and maintaining a smooth, confidence-driven path to purchase.
Educating Users on the Benefits of Mineral Sunscreen:
Insight: Active consumers often underestimate the performance impact of sun exposure and mistrust generic sunscreen claims. To earn trust, the About experience must educate without lecturing and connect science directly to athletic outcomes.
-
Reframe Sunscreen as Performance Protection
-
Hero headline focuses on “Your skin’s best defense against sun fatigue.”
-
Messaging ties UV exposure to energy loss, recovery issues, and reduced performance, which positions sunscreen as a functional necessity, not a cosmetic add-on.
-
-
Educate through Progressive Disclosure
-
Content unfolds in a clear hierarchy: What sun fatigue is, why mineral sunscreen matters, how it works in the skin.
-
This prevents information overload while building understanding step by step.
-
-
Use Diagrams to Build Scientific Credibility
-
Visual comparison of mineral vs. chemical sunscreen helps illustrate the products' differences
-
Layered skin diagram shows how UV rays are blocked vs. absorbed; building trust through clarity, not marketing claims.
-
-
Maintain Personalization throughout Education
-
Persistent “Your Hue: Type II” banner (or "Find Your Hue" banner if user has yet to take quiz) reinforces relevance of product education.
-
Educational content always contextualized to users' skin and activity, keeping the experience personal, not generic.
-
-
Convert Education into Action
-
Strong “Find Your Hue” CTA anchors the bottom of the page.
-
Education funnels users back into personalization rather than a dead end, transforming learning into confident next steps.
-
Result: The About experience positions Huey as both an educator and performance partner—helping users understand why sun protection matters, how mineral sunscreen works, and which product is right for them—without breaking momentum toward purchase.
SUMMARY
Our redesign transformed Huey’s site from an investor-focused page into an immersive, customer-first experience by positioning sunscreen as a performance tool and introducing personalization through the “Find Your Hue” quiz as a central feature.
We restructured the information hierarchy to balance education and trust, integrating reviews, lifestyle photography, and ingredient highlights to validate the product while guiding users toward action. Bold color-blocking, dynamic product visuals, and clear CTAs reinforced Huey’s performance-driven identity and created seamless pathways to purchase. By weaving together personalization, social proof, education, and bold aesthetics, the redesign delivered a thoughtful, strategic solution that positioned Huey as both innovative and trustworthy in the sunscreen market.
The Right Hue for Every Skin Tone