Overview
Problem
Solution
I had the opportunity to redesign Völkl’s homepage, leveraging Clarity data to enhance user experience and drive higher conversion rates.
Overview
Problem
Solution
I had the opportunity to redesign Völkl’s homepage, leveraging Clarity data to enhance user experience and drive higher conversion rates.
Overview
Problem
Solution
I had the opportunity to redesign Völkl’s homepage, leveraging Clarity data to enhance user experience and drive higher conversion rates.
Overview
Problem
Solution
I had the opportunity to redesign Völkl’s homepage, leveraging Clarity data to enhance user experience and drive higher conversion rates.
01 Define
Defining
The Real
Issues
Current homepage
Hero Section
The current hero section has become very flat, I want to improve the user experience of hero section buy addressing the alert banner, and navigation bar— making them more interactive, along with making the copy more impactful by altering the positioning.
Alert banner.
Navigation menu.
SEO copy + CTA.
Secondary Stories
The secondary story section becomes flat as well, I want to improve user experience by implementing scroll animations and letting each story take over the view port having a stronger story experience.
Category story 1.
Category story 2.
Feature story 1.
Feature story 2.
Feature story 3.
Featured Product
Although the feature product slider is interactive I want this component to not be a second thought but to be an area that enticing to see and interact with.
Product cards
User Generated Content
Following the rest of the page theres a great opportunity to add more interaction to this components and step away from the flat layout.
Instagram feed
Newslettter & Footer
Thew newsletter and footer section take up a large portion of the page and can be simplified with accessibility at the top of importance, adding the news letter sign up to the footer section will help improve people scrolling past it when reaching the bottom of the page leading to more sign ups.
Klayvio signup.
Company links.
Discover links.
Support links.
Find a shop.
So What
Are We
Solving?
While Völkl is recognized globally as a leader on the slopes, their current homepage doesn't reflect the same energy, innovation, or premium feel the brand delivers on the mountain. The digital experience is flat, outdated, and lacking a clear sense of hierarchy or storytelling.
This redesign aims to realign Völkl’s homepage with its bold, performance-first reputation by leveraging visual hierarchy and targeted storytelling—through a modular homepage design reducing drop off and improving conversions.
02 Research
Data
Behind The
Design
Heatmaps
Objectives
I wanted to utilize attention and click heatmaps to understand where users are dropping off the opportunities we have to re-capture users and also celebrate overlooked areas.
Most attention and clicks are focused above the fold in the hero section, which should remain a full viewport image or video.
Just below the fold receives similar engagement and should support the hero with related products or categories.
The three feature stories see a significant drop-off, with low user interaction despite multiple narratives. This area needs to be our hook.
The featured product section shows little activity and could be better used to highlight brand initiatives or build awareness.
There is significant user activity in the footer, presenting an opportunity to enhance the experience in this area.
03 Design
Page Architecture &
Tier System
Information Architecture
Page Layout
Using insights from Clarity, I developed a standardized approach for the homepage restructure, outlining how to leverage the modular layout with the expectation that higher conversion rates will serve as a metric for improved user experience.
Tier 1
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Header Banner (Tier 1 Section 2 – Supporting Categories, Products & Sales) - Full Viewport Product Slider or 2UP Banner - This is our “slow down” section of the homepage — an ideal space to promote supporting categories or products. Positioned just after the HERO, it acts as a hook to engage users who may be on the fence.
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Tier 2
Section 3.
Banners (Tier 2 Section 3 – Secondary Stories) - Full Viewport 3UP Vertical or Horizontal Banner - This section re-engages users as they begin to disengage by showcasing relevant campaigns or categories with strong visuals. It’s ideal for highlighting ongoing promotions or stories that still have momentum.
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Tier 3
Section 4.
Banners (Tier 2 Section 4 – Secondary Stories) - Full / Half Viewport 2UP, 3UP, Vertical banners - This section helps re-engage users as drop-off rises by showcasing broad, interest-based content. It’s effective for reaching multiple user segments with relevant visuals. Does not always have to be present if page is overcrowded already.
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Tier 4
Section 5.
Banners (Tier 4 – Support or Blog) - This section highlights brand initiatives and blog content to reinforce values and influence purchase decisions. It’s placed at the page bottom to engage users still considering a purchase.
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Building
A Better
Experience
Homepage Restructure
Hero Section & Mega Menu
Heatmaps showed the hero drew the most attention, so I focused on the imagery and let the megamenu and alert banner float—allowing the story to take over the full viewport. To balance that, I brought more focus to the user cart by making it interactive, including a live cart tracker to track items.
Hero - Category focused imagery reaching broader audience.
Mega Menu – Reorganized the information architecture and added an interactive cart tracker.
Alert Banner – Blurred background lets the hero image show through, with a region selector providing instant, region-specific alert messaging.
Featured Product
With the hero story still top of mind and this section receiving the second-most attention, I added an option to shop immediately—showing skis from that category to capture users before drop-off and drive conversions.
Product cards
Secondary Stories
To address major drop-off points, I added two full-height banners to drive visual engagement, using Clarity data to dictate content and selecting Men's-our most clicked option and a supporting collection.
Men's Banner.
Supporting Category Banner.
Previous Campaign Banner.
Blog
I added a blog section as we get further into drop-off zone to re-engage users with content that resonates on a more personal level, giving them another reason to connect with the brand and continue toward conversion.
User Generated Content
I wanted to make the UGC and Völkl social cards more interactive by adding context beyond just an image and creating a fun interaction, while also creating a hashtag to encourage user participation.
Instagram feed
Newslettter & Footer
With the new brand colors, I focused on the footer and newsletter design using WCAG standards. By leveraging white space, the goal was to draw attention to key information and make navigating this information-dense area easier for users.
Klayvio signup.
Company links.
Discover links.
Support links.
Find a shop.
04 MVP
Improved
User
Engament
MVP
I was able to reimagine the homepage experience with a strong focus on what our users are doing, where they’re doing it, and how we can make their journey easier. With a modular homepage design, we can reorganize content in ways that improve user retention and ultimately drive higher conversions.
MVP
I was able to reimagine the homepage experience with a strong focus on what our users are doing, where they’re doing it, and how we can make their journey easier. With a modular homepage design, we can reorganize content in ways that improve user retention and ultimately drive higher conversions.
MVP
I was able to reimagine the homepage experience with a strong focus on what our users are doing, where they’re doing it, and how we can make their journey easier. With a modular homepage design, we can reorganize content in ways that improve user retention and ultimately drive higher conversions.
06 Reflection
Reflection
& What's
Next
After reviewing with the brand and internal dev team, we made slight visual changes to align with brand preferences and CMS constraints, but the modular and tiered system was adopted and is being rolled out for the 25/26 season.
I really enjoyed tracking user journeys—understanding how visitors navigate the site and where we start to lose their interest. These insights ultimately led to the modular highly visual design approach and the flexibility to adapt across multiple situations.
Moving forward, I plan to A/B test varied page layouts for sales, product launches, promotions, and ongoing campaigns to better refine the experience around our users, whether on web or mobile.
01 Define
Defining
The Real
Issues
Current homepage
Hero Section
The current hero section has become very flat, I want to improve the user experience of hero section buy addressing the alert banner, and navigation bar— making them more interactive, along with making the copy more impactful by altering the positioning.
Alert banner.
Navigation menu.
SEO copy + CTA.
Secondary Stories
The secondary story section becomes flat as well, I want to improve user experience by implementing scroll animations and letting each story take over the view port having a stronger story experience.
Category story 1.
Category story 2.
Feature story 1.
Feature story 2.
Feature story 3.
Featured Product
Although the feature product slider is interactive I want this component to not be a second thought but to be an area that enticing to see and interact with.
Product cards
User Generated Content
Following the rest of the page theres a great opportunity to add more interaction to this components and step away from the flat layout.
Instagram feed
Newslettter & Footer
Thew newsletter and footer section take up a large portion of the page and can be simplified with accessibility at the top of importance, adding the news letter sign up to the footer section will help improve people scrolling past it when reaching the bottom of the page leading to more sign ups.
Klayvio signup.
Company links.
Discover links.
Support links.
Find a shop.
So What
Are We
Solving?
While Völkl is recognized globally as a leader on the slopes, their current homepage doesn't reflect the same energy, innovation, or premium feel the brand delivers on the mountain. The digital experience is flat, outdated, and lacking a clear sense of hierarchy or storytelling.
This redesign aims to realign Völkl’s homepage with its bold, performance-first reputation by leveraging visual hierarchy and targeted storytelling—through a modular homepage design reducing drop off and improving conversions.
02 Research
Data
Behind The
Design
Heatmaps
Objectives
I wanted to utilize attention and click heatmaps to understand where users are dropping off the opportunities we have to re-capture users and also celebrate overlooked areas.
Most attention and clicks are focused above the fold in the hero section, which should remain a full viewport image or video.
Just below the fold receives similar engagement and should support the hero with related products or categories.
The three feature stories see a significant drop-off, with low user interaction despite multiple narratives. This area needs to be our hook.
The featured product section shows little activity and could be better used to highlight brand initiatives or build awareness.
There is significant user activity in the footer, presenting an opportunity to enhance the experience in this area.
03 Design
Page Architecture &
Tier System
Information Architecture
Page Layout
Using insights from Clarity, I developed a standardized approach for the homepage restructure, outlining how to leverage the modular layout with the expectation that higher conversion rates will serve as a metric for improved user experience.
Tier 1
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Tier 2
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Tier 3
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
Tier 4
Section 1, 2.
Header Banner (Tier 1 Section 1 – Top Selling Story) - Full Viewport Banner on top of the page - this is our most interacted with area and will be our main campaign. Video or high impact imagery.
06 Reflection
Reflection
& What's
Next
After reviewing with the brand and internal dev team, we made slight visual changes to align with brand preferences and CMS constraints, but the modular and tiered system was adopted and is being rolled out for the 25/26 season.
I really enjoyed tracking user journeys—understanding how visitors navigate the site and where we start to lose their interest. These insights ultimately led to the modular highly visual design approach and the flexibility to adapt across multiple situations.
Moving forward, I plan to A/B test varied page layouts for sales, product launches, promotions, and ongoing campaigns to better refine the experience around our users, whether on web or mobile.
Have a nice ,
Building
A Better
Experience
Homepage Restructure
Hero Section & Mega Menu
Heatmaps showed the hero drew the most attention, so I focused on the imagery and let the megamenu and alert banner float—allowing the story to take over the full viewport. To balance that, I brought more focus to the user cart by making it interactive, including a live cart tracker to track items.
Hero - Category focused imagery reaching broader audience.
Mega Menu – Reorganized the information architecture and added an interactive cart tracker.
Alert Banner – Blurred background lets the hero image show through, with a region selector providing instant, region-specific alert messaging.
Featured Product
With the hero story still top of mind and this section receiving the second-most attention, I added an option to shop immediately—showing skis from that category to capture users before drop-off and drive conversions.
Product cards
Secondary Stories
To address major drop-off points, I added two full-height banners to drive visual engagement, using Clarity data to dictate content and selecting Men's-our most clicked option and a supporting collection.
Men's Banner.
Supporting Category Banner.
Previous Campaign Banner.
Blog
I added a blog section as we get further into drop-off zone to re-engage users with content that resonates on a more personal level, giving them another reason to connect with the brand and continue toward conversion.
User Generated Content
I wanted to make the UGC and Völkl social cards more interactive by adding context beyond just an image and creating a fun interaction, while also creating a hashtag to encourage user participation.
Instagram feed
Newslettter & Footer
With the new brand colors, I focused on the footer and newsletter design using WCAG standards. By leveraging white space, the goal was to draw attention to key information and make navigating this information-dense area easier for users.
Klayvio signup.
Company links.
Discover links.
Support links.
Find a shop.
04 MVP
Improved
User
Engament
MVP
I was able to reimagine the homepage experience with a strong focus on what our users are doing, where they’re doing it, and how we can make their journey easier. With a modular homepage design, we can reorganize content in ways that improve user retention and ultimately drive higher conversions.
MVP
I was able to reimagine the homepage experience with a strong focus on what our users are doing, where they’re doing it, and how we can make their journey easier. With a modular homepage design, we can reorganize content in ways that improve user retention and ultimately drive higher conversions.