The Bolon.com Evolution (2021–2025)
Role: UI/UX designer
Focus: B2B Strategy, Design System, Accessibility, UX Research
Stockholm, 2021-2026
Focus: B2B Strategy, Design System, Accessibility, UX Research
Stockholm, 2021-2026
Phase 1: The Reality Check (Discovery)
Bolon isn't just a flooring manufacturer; they are a Swedish design institution leading the world in woven vinyl flooring. When I joined in 2021, the brand was premium, but the digital experience was fragmented. Years of using various freelancers had left the site with inconsistent visual hierarchy, oversimplified flows unable to handle complex needs, and a simplicity that wasn't "minimalist," but rather "insufficient." The company realized they couldn't keep patching it up; they needed a dedicated designer to step in and finally take full ownership of the Bolon.com ecosystem.
The insight
The process started with the standard toolkit: Google Analytics. However, it quickly became clear we were in a B2B blind spot.
The Trap:
Bolon sells premium flooring to architects who don’t “check out” online. They order samples (if they don’t already have them) and then speak with sales representatives to close the deal.
The Pivot:Workshops Sessions with Owners, Marketing, and Product teams were held to align on a vision and expectations.
I stopped relying solely on data and integrated the Sales team directly into the design loop. Since Sales Reps are on the front lines, they became a primary research source. I consulted them first to identify the specific friction points architects were complaining about.
The goal:
The website’s job wasn't to sell the floor; it was to empower the conversation between the Architect and the Sales Representative.
The website’s job wasn't to sell the floor; it was to empower the conversation between the Architect and the Sales Representative.
_______
Phase 2: The Audit (Definition)
Before building anything new, it was critical to understand the existing landscape. A comprehensive Visual Inventory was conducted to map the current state.
The Diagnosis
We found major inconsistencies in typography, button behaviors, and spacing. The site was struggling to handle complex tasks because every page had been designed in isolation.
We found major inconsistencies in typography, button behaviors, and spacing. The site was struggling to handle complex tasks because every page had been designed in isolation.
UI inventory (components, patterns, templates, weird one-offs)
The Architecture
Once the visual chaos was mapped, we tackled the structure. The Information Architecture (IA) was restructured to handle increasing complexity. We mapped out clearer, more robust user flows that mirrored the actual work patterns of a user (Architect, property manager, floor installer, professional cleaner).
Once the visual chaos was mapped, we tackled the structure. The Information Architecture (IA) was restructured to handle increasing complexity. We mapped out clearer, more robust user flows that mirrored the actual work patterns of a user (Architect, property manager, floor installer, professional cleaner).
_______
Phase 3: The Design System "Weft"
This was the pivot point. The platform required a system that could handle without losing the brand's premium character.
Consistency & Modularity:
The primary challenge was moving away from ad-hoc styling to a standardized framework. We built a modular design system capable of supporting complex functional components—like interactive selectors and dynamic filters—while ensuring a cohesive look across the ecosystem.
The primary challenge was moving away from ad-hoc styling to a standardized framework. We built a modular design system capable of supporting complex functional components—like interactive selectors and dynamic filters—while ensuring a cohesive look across the ecosystem.
The Rules:
A strict design language was established—typography scales, grid systems, and interaction states.
A strict design language was established—typography scales, grid systems, and interaction states.
Accessibility First:
A major focus early on was weaving in accessibility. We really wanted to find that balance between a premium aesthetic and true legibility, making sure the final product worked just as well as it looked.
A major focus early on was weaving in accessibility. We really wanted to find that balance between a premium aesthetic and true legibility, making sure the final product worked just as well as it looked.
_______
Phase 4: The Production Loop (Design)
We established a lean, efficient small team structure: a Product Manager, a lead designer (myself), and a part-time designer for support. We streamlined the Figma-to-development handoff and established a cyclical workflow:
1. Investigate:
For every new page or feature, I talked to the Sales Reps (our proxy for users) and actual Architects to understand their friction points.
For every new page or feature, I talked to the Sales Reps (our proxy for users) and actual Architects to understand their friction points.
2. Benchmark:
We looked at sector standards—not just flooring, but luxury e-commerce—to identify opportunities to improve the experience.
We looked at sector standards—not just flooring, but luxury e-commerce—to identify opportunities to improve the experience.
3. Exploration & Alternatives:
We moved to clickable prototypes quickly. They were serving as tangible tools to facilitate discussions with the core team, marketing manager, and sometimes the owners. This allowed us to test alternatives and align on the best path before development began.
We moved to clickable prototypes quickly. They were serving as tangible tools to facilitate discussions with the core team, marketing manager, and sometimes the owners. This allowed us to test alternatives and align on the best path before development began.
4. Refine & Handoff:
We delivered modular designs to engineering, ensuring they had the logic, states, and assets needed to build it right the first time. Every single page with modules improved the design system along the way.
We delivered modular designs to engineering, ensuring they had the logic, states, and assets needed to build it right the first time. Every single page with modules improved the design system along the way.
_______
Phase 5: The Output (Delivery)
Over four years, the site wasn't just "refreshed"; it was transformed into a strategic sales tool. By implementing a design system and listening to the needs of the field, we bridged the gap between the digital browse and the physical sale.
The following gallery showcases the final implemented designs:
