The Bolon.com Evolution
2021–2026
2021–2026
Role: Lead product designer (UX/UI)
Team: PM, part-time designer, engineering, marketing and sales
Focus: Design system, accessibility, B2B UX, sales enablement
Stockholm
Team: PM, part-time designer, engineering, marketing and sales
Focus: Design system, accessibility, B2B UX, sales enablement
Stockholm
Context
Bolon.com, the B2B site for a premium Swedish flooring brand, used by architects, property managers, installers and professional cleaners.
Challenge
Years of freelance patches left the site fragmented. Architects order samples and close through sales reps, and the site gave that journey no clear support.
Bolon.com, the B2B site for a premium Swedish flooring brand, used by architects, property managers, installers and professional cleaners.
Challenge
Years of freelance patches left the site fragmented. Architects order samples and close through sales reps, and the site gave that journey no clear support.
What we did
We reframed the site as a tool for the sales conversation, built Weft, a WCAG 2.1 AA design system in Figma, and redesigned the site end to end over five years.
We reframed the site as a tool for the sales conversation, built Weft, a WCAG 2.1 AA design system in Figma, and redesigned the site end to end over five years.
Outcome
One design language across the whole site, built to WCAG 2.1 AA from the start. It passed an accessibility audit for EU e-commerce requirements in 2025. New pages now start from Weft instead of a blank canvas.
One design language across the whole site, built to WCAG 2.1 AA from the start. It passed an accessibility audit for EU e-commerce requirements in 2025. New pages now start from Weft instead of a blank canvas.
Phase 1: The Reality Check (Discovery)
Bolon is a premium Swedish flooring brand, and in 2021 its website didn't show it. Years of work by different freelancers had left inconsistent hierarchy and flows too simple for complex needs. The simplicity wasn't minimalist, it was insufficient. So Bolon brought in a dedicated designer to own the whole Bolon.com ecosystem.
The insight
We started with Google Analytics, and it hit its limit fast. Bolon sells to architects who don't check out online. They order samples, if they don't already have them, then talk to a sales rep to close the deal. The moments that mattered most happened off the site, so analytics could only tell us half the story.
The Pivot
Workshops Sessions with Owners, Marketing, and Product teams were held to align on a vision and expectations.
The Pivot
Workshops Sessions with Owners, Marketing, and Product teams were held to align on a vision and expectations.
We 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. We 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 support the conversation between the architect and the sales rep.
The website's job wasn't to sell the floor. It was to support the conversation between the architect and the sales rep.
_______
Phase 2: The Audit (Definition)
Before building anything, the site got a full visual inventory: colors, type, buttons, spacing and grids.
The Diagnosis
We found over 120 typography variations, differing in size or weight, and over 30 different buttons and CTAs. Every page had been designed in isolation, so the site couldn't carry complex tasks.
The Diagnosis
We found over 120 typography variations, differing in size or weight, and over 30 different buttons and CTAs. Every page had been designed in isolation, so the site couldn't carry complex tasks.
Visual audit of the existing Bolon.com — mapping components, patterns, and one-offs across the site.
The Structure
With the visual chaos mapped, we turned to the information architecture. We rebuilt it around how four types of users actually work: architects, property managers, installers and professional cleaners. Support, for example, was one catch-all branch in 2021. It's now split into Installation, Maintenance and FAQ.
With the visual chaos mapped, we turned to the information architecture. We rebuilt it around how four types of users actually work: architects, property managers, installers and professional cleaners. Support, for example, was one catch-all branch in 2021. It's now split into Installation, Maintenance and FAQ.
IA Structure when I started working.
Restructured IA, mapped around four real user types: architects, property managers, installers & professional cleaners.
_______
Phase 3: The Design System "Weft"
This was the pivot point. The site needed a system that could handle complex functional components without losing the brand's premium character.
Consistency and modularity
The main challenge was moving from ad-hoc styling to a standard framework. We built Weft as a modular system, ready for complex components like interactive selectors and dynamic filters, with one cohesive look across the ecosystem. Weft replaced 120+ type styles with 20, each with a mobile version, and 30+ buttons and CTAs with 9 that combine into groups for CTAs and filters.
The rules
Weft sets the language: type scales, grids, a spacing scale and interaction states. The type scale came straight from the inventory, so every size and weight has a reason to exist.
Accessibility first
We built accessibility into the foundations from the start, looking for the balance between a premium look and real legibility. Contrast ratios and focus states are part of the system, and it meets WCAG 2.1 AA without looking like a compliance checklist. The site passed an accessibility audit for EU e-commerce requirements in 2025.
Consistency and modularity
The main challenge was moving from ad-hoc styling to a standard framework. We built Weft as a modular system, ready for complex components like interactive selectors and dynamic filters, with one cohesive look across the ecosystem. Weft replaced 120+ type styles with 20, each with a mobile version, and 30+ buttons and CTAs with 9 that combine into groups for CTAs and filters.
The rules
Weft sets the language: type scales, grids, a spacing scale and interaction states. The type scale came straight from the inventory, so every size and weight has a reason to exist.
Accessibility first
We built accessibility into the foundations from the start, looking for the balance between a premium look and real legibility. Contrast ratios and focus states are part of the system, and it meets WCAG 2.1 AA without looking like a compliance checklist. The site passed an accessibility audit for EU e-commerce requirements in 2025.
Weft foundations: colors, icons in three sizes, and a type scale for desktop and mobile built on two typefaces. Color and type built to meet WCAG 2.1 AA.
Spacing scale, grid breakpoints and the button system in Figma. Buttons combine into groups for CTAs and filters, with defined states.
Figma-to-dev handoff. Every component is tagged new, existing or updated and tracked from not started to ready for dev, across carousels, thumbnails and content modules.
Hero module at four breakpoints (desktop, tablet landscape, tablet portrait, mobile), with shadow on/off variants and a dev spec row for engineering.
_______
Phase 4: The Production Loop (Design)
We kept the team small for a lean and efficient structure: a product manager, me as lead designer and a part-time designer for support. We tightened the Figma-to-development handoff and settled into a cycle:
1. Investigate
For every new page or feature, we talked to sales reps, our proxy for users, and to architects themselves, to find their friction points.
2. Benchmark
We moved to clickable prototypes early and used them in conversations with the core team, the marketing manager and sometimes the owners. Where it mattered, we also tested them with architects and sometimes installers. The prototypes let us compare alternatives and agree on a path before development began.
For every new page or feature, we talked to sales reps, our proxy for users, and to architects themselves, to find their friction points.
2. Benchmark
We looked at sector standards, and beyond flooring at luxury brands. In the workshops, the owners said they wanted a story section in that spirit, so we borrowed how those brands tell their journey online and made the text more readable on image-heavy layouts. It became the Stories section on Bolon.com.
3. Exploration & AlternativesWe moved to clickable prototypes early and used them in conversations with the core team, the marketing manager and sometimes the owners. Where it mattered, we also tested them with architects and sometimes installers. The prototypes let us compare alternatives and agree on a path before development began.
4. Refine & Handoff
Engineering got the logic, states and assets they needed to build the modules. Every page with new modules also improved Weft along the way.
_______
Phase 5: The Output (Delivery)
Bolon.com grew from stacked banners and pages designed one by one into a sales tool. It runs on one design system, a structure built around four types of users, and a process that starts with what sales reps and architects told us. The gallery below pairs the originals with what shipped.
Original startpage (2021): stacked banners. Flat hierarchy, inefficient layout, poor readability.
Redesigned startpage: product pathways, a projects and testimonials carousel, and a news feed.
Main menu: from a full screen dark overlay to a grouped white sidebar, chosen after user testing.
Original projects page: one long gallery, faint filter controls and oversized Favourite Picks cards.
Redesigned projects page: sector pages, a tabbed filter above the gallery and a compact project carousel.
Flooring product page, before and after: compact hero, room scale photos, tabbed specifications.
New rug product page: trimming selector with three recommendations, live image updates and a details box.
Original order samples page: large hero, heavy remove buttons and a long, low contrast form.
Redesigned order samples page: mini cart, order summary beside the form and accessible form fields.
Outcomes & Reflection
Five years in, Bolon.com is calmer and more capable. The fragmentation is gone, architects, installers and property managers get richer journeys, and the brand has one visual language across the site.
Weft turned design from a bottleneck into an accelerator. New pages start from a shared foundation, accessibility is built in, and the system grows without breaking what came before.
What I'd do differently
Weft turned design from a bottleneck into an accelerator. New pages start from a shared foundation, accessibility is built in, and the system grows without breaking what came before.
What I'd do differently
- Spend less time on the inventory. It was valuable groundwork, but doing it alone slowed the design work.
- Set up measurement earlier. The qualitative feedback was strong, but harder numbers would have sharpened the next decisions.
- Document Weft's why, not just its how. Systems last longer when the reasoning is visible.