TRULY Campaign
Role: Lead designer (UX/UI), partnering with Art Direction
Focus: Immersive web experience, interaction design, scroll storytelling
Stockholm, 2022
Focus: Immersive web experience, interaction design, scroll storytelling
Stockholm, 2022
Context
Launch campaign for a collection of five new woven flooring designs that Bolon considers among its boldest.
Challenge
Match a bold collection with an equally bold web experience: turn an editorial art direction vision into an immersive story that still carries full product information.
What we did
Designed a scroll journey in two parts: a full screen story with spatial transitions and interactive product elements, then a regular product section with side panel specs and a custom video player.
Outcome
Launched in January 2022 with all five designs. After launch week we used analytics to improve the page, and click-through to Bolon.com and the product pages rose about 58%.
Launch campaign for a collection of five new woven flooring designs that Bolon considers among its boldest.
Challenge
Match a bold collection with an equally bold web experience: turn an editorial art direction vision into an immersive story that still carries full product information.
What we did
Designed a scroll journey in two parts: a full screen story with spatial transitions and interactive product elements, then a regular product section with side panel specs and a custom video player.
Outcome
Launched in January 2022 with all five designs. After launch week we used analytics to improve the page, and click-through to Bolon.com and the product pages rose about 58%.
About
TRULY was the counterpart to Bolon.com. Where the main site needed a rigorous B2B system, this launch needed to feel editorial and experimental. I worked side by side with Art Direction to turn their concepts into an interactive experience people want to stay in.
_______
The Hook: The Startpage Countdown
To build anticipation, we replaced the homepage with a temporary countdown page. A looping background video set the editorial tone, and frosted glass panels kept the countdown readable over it. It also gave visitors a prompt to subscribe before the collection dropped.
_______
The Mechanics: A Two-Part Journey
To balance the editorial storytelling with actual product specification, the landing page was structured into two distinct phases
1. The Scroll Narrative
The first half drops the traditional layout for a full screen, scroll-driven story. The scroll is never hijacked, so visitors set the pace. Normal scrolling triggers spatial transitions that reveal bold typography and interactive product elements over the photography.
2. The Deep Dive
After the story, the page becomes a conventional long scroll. It opens with the five released products, each with a short paragraph and a looping video that works as its thumbnail. Clicking it, or its "Watch video" button, opens the custom player. Further down are the heavier details: interactive product grids, sustainability specs and close-up texture shots.
The desktop screen recording below runs at a steady, continuous scroll to clearly showcase the spatial transitions and the seamless shift from the immersive narrative down into the product discovery grids.
_______
Side panel navigation
To keep the main scroll clean, detailed specs sit in slide-out side panels. Each has product details, a clear call to action and quick links between the five designs, so visitors can go deep without breaking the flow.
_______
Custom Video Player
A custom player replaces standard embeds, so the campaign feel carries through to the films. Built in controls let visitors move between all five films, and each film links to its product.
_______
After launch: reading the data
What the data showed
Launch week brought a lot of traffic, but analytics showed that few visitors continued to Bolon.com or the product pages. The page was doing its storytelling job and losing people at the next step.
Launch week brought a lot of traffic, but analytics showed that few visitors continued to Bolon.com or the product pages. The page was doing its storytelling job and losing people at the next step.
What we changed
The CTAs were easy to miss, so we moved them to better positions and made them more visible.
The CTAs were easy to miss, so we moved them to better positions and made them more visible.
Result
Click-through rose from about ~6% to about 9.5%
Click-through rose from about ~6% to about 9.5%
_______
Reflection
Next time I'd push for a clearer brief earlier. We explored several directions that never shipped, and that time would have been better spent working more closely with Art Direction from the start.