Huey Suncare
UX/UI DESIGN, 2025
Designers: Emily Sayer, Ireland Mak, Henry Ni, Danny Truong
Overview
Huey Suncare is a mineral sunscreen brand built for athletes and outdoor enthusiasts. The founder, Justin, 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
The Problem
Research
Ideation
Wireframing
Final Wireframes
Summary
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
FELICIA, 27 F
“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
SAM, 36 M
“I’m outside all day — I just need something reliable that I can throw in my bag and not think twice about.”
Goals:
-
Discover events that align with specific interests
-
Track attendance history and engagement over time
-
Build and maintain social routines
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.
WIREFRAMING
Low-to-High Fidelity Development
Next, we built out low-fidelity wireframes to begin visualizing the site's new layout. My responsibility was the About screen, and we all collaborated on the Home screen.​ 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" 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.
FINAL WIREFRAMES
Immersing Shoppers in Huey
Home:
About:
Find Your Hue:
Shop:
SUMMARY
The Right Hue for Every Skin Tone