Opalescence.com
Transforming teeth whitening brand website home page with engaging, user-driven design
Project Info
Teeth whitening brand, Opalescence, sought a homepage redesign for their consumer website that infused emotional resonance, showcased their new campaign imagery, and encouraged users to explore further—despite the broader site remaining outside the project scope. The challenge was to elevate the homepage design while ensuring cohesion with the existing site.
My Role
As the lead UX Designer on this project, I led the homepage strategy—reframing the brief, conducting competitive research, and designing a more immersive, user-centered experience that balanced emotional resonance with clear conversion paths.
The Problem
Opalescence’s consumer homepage lacked clarity, emotional engagement, and functional cohesion—undermining its ability to guide users toward a clear action or connect them meaningfully to the brand’s whitening solutions.
Key Insights, Constraints, & Strategy
Insights
-
Lack of Category Voice
The teeth whitening space lacks a distinctive brand voice. Brands that take risks with tone, innovation, and visual storytelling are perceived as leaders.
-
Emotional Drivers Matter
Consumers are motivated by aspirational outcomes like confidence and beauty, yet most brand sites lean clinical or uninspired in tone and design.
-
Decision Paralysis is Common
Without clear product guidance, users struggle to navigate the variety of whitening options and often abandon the journey altogether.
-
High Mobile Traffic, Low Conversion
In the beauty and wellness space, mobile is the primary discovery platform—making concise CTAs and visual hierarchy critical to retaining users.
-
Search Behavior is Outcome-Oriented
Users enter with goals, not brand loyalty—making education and guided discovery essential to capturing attention.
Constraints
-
Tight Timeline & Budget
The client viewed this as a simple visual refresh and requested completion in under one month, limiting the scope for broader site restructuring or in-depth user testing.
-
Legacy Site Architecture
The homepage needed to function within an outdated design system and backend, meaning the rest of the site couldn't be modified for consistency or flow.
-
Prescriptive Creative Brief
The initial ask was for a static hero image with a tagline and single CTA—leaving little room for dynamic storytelling or brand differentiation.
Strategy
-
Redefined the Ask Through Research
I conducted a competitive audit and pulled references from both within and outside the category to demonstrate missed opportunities and inspire new directions. -
Proposed an Immersive Homepage Experience
Instead of a static hero, I recommended an interactive, visually rich layout that invited exploration and made the product journey feel more personal and emotionally resonant. -
Built for Depth Within Constraints
While the broader site remained untouched, I focused on crafting a homepage that could stand alone—educating, exciting, and directing users without relying on perfect downstream UX. -
Clarified the User Journey
Through improved hierarchy, strategic CTA placement, and guided storytelling, the homepage was restructured to help users intuitively answer: What is Opalescence? What’s right for me? And where do I go next?
Previous Home Page Design
Key Issues
Unclear Primary CTA
It’s not obvious whether users are supposed to buy products directly, learn more, or find a provider.
Vague & Repetitive CTAs
Multiple buttons use generic language ("Explore Teeth Whitening," "Find Out Why") without clear differentiation or intent.
Dead-End Navigation
Several links lead to orphan or outdated pages, creating a disjointed experience.
Broken Interactions
Carousels and before/after sliders lack proper markers or functionality, reducing usability.
Missed Emotional Resonance
While new campaign imagery exists, the site doesn't effectively leverage it to create an emotional or aspirational hook.
Inconsistent Design Language
The homepage update needed to live within the constraints of a legacy site, but still elevate the look and feel.
Desktop
Mobile
Competitive Audit & Interaction Inspiration
In the teeth whitening space there is no clear voice or personality that owns the conversation and brands that are perceived as innovative and trendsetting are seen as the most disruptive and demonstrate greatest gains.
Therefore, using this homepage redesign as an opportunity, I proposed we use immersive, interactive home page elements to ignite interest and evoke emotional resonance to encourage users to delve deeper into the Opalescence teeth whitening journey.
Preliminary Homepage Design Proposal
Use interaction design to make immediate impact
Proposed using a layered parallax scroll experience using the campaign language and video to draw the user in and create an immersive and impactful first impression
Prioritize Mobile-First Design
Optimize features, images, and CTAs on the home page to make it easier for users to scroll and access navigation
Implement a Quiz to help users discover product
Adding a 'Find the Right Teeth Whitener for You' quiz to the homepage creates a more interactive and personalized experience from the start—guiding users to a tailored product recommendation and driving them deeper into the site. This targeted approach can boost engagement and increase conversion rates.
Add Dentist Finder Tool to Homepage
Placing the provider locator module directly on the homepage gives the user an easier time locating the product nearest to them, leading to higher conversion rates and more streamlined website experience
Results
Client Adoption
Presenting the competitive audit, initial wireframes, interaction design, and engagement strategies helped build client confidence and momentum, ultimately leading to alignment on the vision and a smooth transition into high-fidelity design and dev handoff.
What made this approach successful?
-
Holistic framing: Starting with a competitive audit established strategic rationale and positioned the work within broader industry trends.
-
Early alignment: Sharing initial wireframes ensured stakeholder buy-in before moving into visual design, minimizing downstream revisions.
-
Interactive thinking: Proposing engagement-driving features (like the homepage quiz) demonstrated a user-first mindset that resonated with the client (despite it not being part of the initial brief)
-
Clear progression: Structuring the presentation to build from insight to execution made the design process feel purposeful and cohesive.
Impact
Key Takeaways from the Homepage Redesign Impact
+60% increase in campaign content interactions shows stronger emotional engagement
30% of users completed the new quiz, with 50% more navigating to product pages
+40% use of the location finder after surfacing it on the homepage indicates improved conversion potential
+25% click-through rate on the primary CTA reflects stronger user intent
35% bounce rate and +20% faster load time on mobile validate the mobile-first design approach
