Bona - making floor care easy to buy online.
Group projects don't fail because of lazy students. They fail because teams can't coordinate. GroupFlow is a research-driven collaboration platform that fixes that.
A trusted offline brand.
An untapped online opportunity.
Bona, a trusted floor-care brand, was expanding into eCommerce but faced a core problem users couldn't quickly find the right product online. The existing website lacked structure, personalization, and a clear purchase path.
My role was to design a seamless shopping experience by simplifying discovery, creating personalized paths for different user types, and building a consistent design system — all grounded in real user research and Baymard Institute benchmarks.
The Scale of the Problem
US household-care eCommerce market in 2024 Bona's website wasn't capturing its share.
65%
Of cleaning products still purchased offline a major conversion opportunity.
+18%
Checkout conversion improvement after the redesign
02 Constraints
Two walls we had to design around.
Before jumping into solutions, two structural limitations were identified that shaped every design decision.
From audit to checkout
How the work was done.
A five-phase design process using Jesse James Garrett's Elements of UX — each layer building on the last.
01. STRATEGY
Align business goals with real user needs
Started by mapping Bona's business objective (increase online revenue) against what users actually needed (confidence in finding the right product). Used Baymard Institute's eCommerce UX benchmarks to audit the existing site and identify gaps — turning research into a prioritized problem list before any design work began.
Baymard Audit
Stakeholder Interviews
Competitive Analysis
User Goals Mapping
Outcome: Identified product discovery and checkout confidence as the two highest-impact areas to fix.
02. SCOPE
Define what to build and what to cut
Defined the core feature set using MoSCoW prioritization: a shopping cart, smart filters, a product finder quiz, and user segmentation (homeowners vs. professionals). Features like multi-currency support and account management were scoped out to keep the MVP focused on conversion.
MoSCoW Prioritization
Feature Mapping
User Segmentation
Outcome: A clear MVP scope cart, filters, product quiz, and two user paths (homeowner & professional).
03. STRUCTURE
Rebuild the information architecture
Redesigned the site's IA and user flows to eliminate the fragmentation issue identified in the constraints phase. Mapped two distinct user journeys — a homeowner path focused on surface type (hardwood, tile, vinyl) and a professional path focused on product volume and spec sheets. Each flow was designed to reduce decision fatigue and reach the right product in 3 clicks or fewer.
User Flow Mapping
Site Map Redesign
IA Restructuring
Journey Mapping
Outcome: Two clear user paths. Product discovery reduced from 6+ steps to 3 clicks.
04. SKELETON
Wireframe every key interaction
Built low to mid-fidelity wireframes for the homepage, product listing page, product detail page, quiz flow, and checkout. Each wireframe was tested with users for navigation clarity before moving to visual design — catching confusion early when it's cheap to fix.
Lo-Fi Wireframes
Mid-Fi Wireframes
Navigation Testing
Figma
Outcome: 3 rounds of wireframe iteration before hi-fi. Key navigation issues caught and resolved early.
05. SURFACE
Build a responsive, branded UI
Developed a full high-fidelity UI using Bona's brand palette and typography — building a component library that ensured consistency across all pages and platforms. Designed responsive across desktop, tablet, and mobile. Delivered developer-ready specs with annotated components and interaction notes.
Hi-Fi UI Design
Design System
Responsive Design
Component Library
Dev Handoff
Outcome: Full design system delivered. UI consistent across all 3 platforms (eBay, Etsy, Shopify).
Four features that moved the conversion needle.
CORE FEATURE
Product finder quiz
A short 4-question quiz that routes users directly to the right product — eliminating the browsing paralysis that was the #1 drop-off point on the existing site.
View Prototype
Problem it solved
Browsing paralysis from 100+ products with no clear path
HOW IT WORKS
1.
Floor type
Hardwood, Laminate, Stone, or Tile
2.
Room size
Area and usage frequency
3.
Finish and concerns
Stain, scent, eco preference
4.
Your 3 products
Personalized with frequency + quality
FEATURE 01
Smart Filter System
Rebuilt the product filtering system around user mental models — filtering by surface type, floor finish, and concern rather than internal product codes. Reduced time-to-product and increased add-to-cart rate.
View Prototype
TOP NAVIGATION
Who are you shopping for?
SIDEBAR PANEL
Who are you shopping for?
FEATURE 02
Streamlined Cart & Checkout
Redesigned checkout flow from 6 steps to 3 removing friction at the highest drop-off stage. Applied Baymard Institute best practices: persistent cart, inline validation, and trust signals at every step.
View Prototype
TOP NAVIGATION
Who are you shopping for?
FEATURE 03
Consistent Design System
Built a shared component library used across eBay, Etsy, and Shopify storefronts ensuring brand consistency regardless of platform. Reduced future design and dev time by establishing reusable patterns for buttons, cards, and forms.
View Prototype
TOP NAVIGATION
Who are you shopping for?
05 Results
What the work delivered.
Checkout conversion rate
Measured against baseline conversion before the redesign. Driven by the simplified 3-step checkout flow and inline trust signals.
3 clicks
To the right product
Of cleaning products still purchased offline a major conversion opportunity.
3 platforms
Unified design system
Checkout conversion improvement after the redesign
06 Learnings
What this project taught me.
01
IA is invisible until it's broken
The biggest conversion win came not from visual design but from restructuring the information architecture. Users couldn't buy what they couldn't find. Fixing IA first made every other design decision easier.
02
Benchmarks beat opinions
Using Baymard Institute data to identify the worst checkout patterns gave every design decision a research foundation. It shifted conversations from "I prefer X" to "the data shows X causes drop-off" — much easier to align on.
03
Personalization at the entry point
Splitting the experience for homeowners vs. professionals early in the flow — rather than at the product level — reduced confusion for both groups. The lesson: segment users before showing them product, not after.