Bolon Studio™
Role: Lead designer (UX/UI), partnering with Art Direction
Focus: Campaign design, information architecture, scalable page templates
Stockholm, 2023
Focus: Campaign design, information architecture, scalable page templates
Stockholm, 2023
Context
Relaunch of Bolon Studio™, a concept of geometrically shaped floor tiles available across almost the entire Bolon collection.
Challenge
Balance playful with educational, and inspirational with technical, for two visitors with different goals. People arriving from paid and social traffic wanted inspiration first. Architects wanted specs, CAD files and a fast route to a sales inquiry.
What we did
Mapped the ecosystem, defined two journeys and designed the campaign site plus one scalable template for the shape pages. Both lead to the Pattern Tile Tool, where architects design their own layouts. We also designed the shape icon system and a custom cursor set.
Outcome
Built as a campaign, it became a permanent part of Bolon.com.
Relaunch of Bolon Studio™, a concept of geometrically shaped floor tiles available across almost the entire Bolon collection.
Challenge
Balance playful with educational, and inspirational with technical, for two visitors with different goals. People arriving from paid and social traffic wanted inspiration first. Architects wanted specs, CAD files and a fast route to a sales inquiry.
What we did
Mapped the ecosystem, defined two journeys and designed the campaign site plus one scalable template for the shape pages. Both lead to the Pattern Tile Tool, where architects design their own layouts. We also designed the shape icon system and a custom cursor set.
Outcome
Built as a campaign, it became a permanent part of Bolon.com.
Brief
Bolon relaunched Bolon Studio™, a concept of geometrically shaped floor tiles, nine forms at launch and eleven today, each orderable across almost the entire collection. The task was a campaign site around the relaunch.
The brief arrived as open questions from the art director, not a spec: How do you balance playful and simple? Educational and inspirational? Eccentric versus minimalist? We treated that ambiguity as the starting point, not an obstacle.
The sketch also set firm constraints: a film of 30 seconds at most, easy asset downloads, and a clear path for visitors who arrive from a specific collection and want to know more.
Art director's sketch: two homepage alternatives, open questions and a sub-page skeleton.
_______
The Architecture
Before touching layout, we mapped the full ecosystem. Two types of visitor would arrive with very different goals.
Visitors from paid ads and social media needed inspiration first and information second. Organic visitors and architects already on Bolon.com needed specs, CAD files and a fast path to a sales inquiry.
Both groups end up in the same place, but with different jobs to do. With nine shapes, each in several sizes, we designed the shape page as one template, not nine pages.
Every page leads to the existing Pattern Tile Tool, where architects design their own layouts by mixing shapes and collections. It's the natural endpoint of the inspiration journey.
Visitors from paid ads and social media needed inspiration first and information second. Organic visitors and architects already on Bolon.com needed specs, CAD files and a fast path to a sales inquiry.
Both groups end up in the same place, but with different jobs to do. With nine shapes, each in several sizes, we designed the shape page as one template, not nine pages.
Every page leads to the existing Pattern Tile Tool, where architects design their own layouts by mixing shapes and collections. It's the natural endpoint of the inspiration journey.
Ecosystem map: traffic sources, entry points and conversion outcomes.
Page structure: campaign home, shape page template (×9) and Pattern Tile Tool.
_______
Campaign Home (Playful)
The campaign page had one job: make an architect stop scrolling. A mosaic hero grid of photography, pattern close-ups and sculptural objects shows the range before anyone reads a word. Below it, the page alternates between inspiration and information: manifesto, shape selector, full screen film, bold typographic banners, gallery. The dark shape selector and the gallery are where the page turns from campaign into the technical shape pages.
Campaign home on desktop and mobile, with component annotations.
Sub-Pages (Technical)
Once an architect clicks through to a shape, the tone shifts. The shape pages are task focused: a technical drawing with dimensions and weft direction (the direction the weave runs), product specs, and a mixed gallery of pattern combinations and real installations. Everything an architect needs to specify a floor.
The navigation bar carries the full shape family as icons, with size variants labelled in text. The custom cursor set and the shape icon system were designed to feel native to Bolon Studio™ without adding visual noise to pages that needed to stay clean.
Two pages, two jobs.
Shape page template on desktop and mobile, with the accordion panel, shape navigation bars and custom cursor set.
_______
Live Site
Looping mosaic hero grid:
Scroll through the full campaign and shape pages
Live site The campaign launched in 2023: