BuildDirect

Reframing the E-commerce Storefront Around Professional Buyers

A rebrand and a platform migration arrived with a one-line brief: “we need a better digital storefront.” Answering who “better” was for turned a visual redesign into a buying experience built for contractors, builders and designers.

  • B2C & B2B E-commerce
  • Product Strategy
  • Conversion

01 At a Glance

Role
Senior Product Designer
Platform
Flooring & building materials, B2C and B2B
Scope
Product strategy · Research · Information architecture · End-to-end UX · Usability testing · Launch & iteration
Team
Product · Engineering · Marketing · Sales · Category Management · Customer Service · Operations
Outcome
+15% conversion rate
−35% cart abandonment
50%+ faster page loads

Before-and-after analytics across a launch that also carried a rebrand and a re-platform. Read as a signal, not as an isolated result.

Overview

BuildDirect sells flooring and building materials to individual consumers and to professional buyers. As the company rebranded and migrated its e-commerce platform, the brief was one sentence: we need a better digital storefront.

“Better” meant something different to every team. I brought customer behaviour, sales insight and business priorities together to answer a more basic question first: who should the storefront optimise for? The answer moved the project from a broad visual refresh to an experience built around professional buyers, the frequent, high-value customers who needed to find, evaluate and buy materials quickly.

02 The Challenge

A storefront that had grown without a primary customer

The redesign ran alongside several business changes at once. The company was rebranding, migrating to a new technical platform, and narrowing its portfolio toward flooring, tile, carpet, decking and related building materials.

The storefront itself had evolved without a clearly defined primary customer. It served everyone from a homeowner making a one-time purchase to a contractor ordering several times a month.

Before · Browsing and deciding

The homepage: banners, categories and best-sellers.

1 / 4

Before · Checkout

Step one: log in, or check out as a guest.

1 / 3

Seven kinds of customer, one storefront, and no stated order of priority between them.

Improving the experience for all of them equally kept making the problem broader. So before redesigning screens, I went after a more strategic question: who were we actually designing for?

03 The Reframe

Better — for whom?

With limited access to direct customer research, I combined Google Analytics, sales data, Hotjar, internal interviews and competitive analysis to understand who relied on the storefront and what they needed.

Google Analytics
Who arrived, what they looked at, and where they stopped.
Sales data
Three years of orders, which is what settled the question of who the business actually ran on.
Hotjar
Scroll and engagement behaviour on the pages customers used to decide.
Internal interviews
Sales and Category Management, who spoke to these customers every day.
Competitive analysis
How mature retailers in the category treated professional and consumer customers.
Hotjar A scroll map of one product page. Drag down it and watch the audience thin out.
A Hotjar scroll heatmap of a hardwood flooring product page. Red at the top through yellow and green at the average fold, blue by Product Overview, and grey below the Specifications table

Where the pointer went. The heat is all in the gallery and the buy box; below the overview it is bare.

1 / 2

Scroll depth How far down two high-traffic product pages visitors actually got
  1. Images, price, size and colour100%
  2. Add to cart, order a sample75%
  3. Average fold
  4. Guarantees and trust marks50%
  5. Product Overview<30%
  6. Specifications12–16%
  7. Accessoriespast the last marker

More than 70% of visitors never reached the core product information. Read off the map above, which prints its markers at 75, 50 and 25 per cent and stops there — so Accessories, which sits well below the last of them, has a bound rather than a figure. Sales heard the other half of it: customers rang who had never scrolled as far as the specifications or the accessories.

What customers were asking Support

The same request kept arriving in the support inbox, and it was for something the site already offered.

Real conversations from the support inbox. Turn a card over to see the message it was taken from; names are redacted.

One segment stood out. Across three years, professional buyers never accounted for less than 63% of total sales, rising to 91.6% in the strongest year. They were also a meaningful share of site traffic, and where a consumer buys once, a Pro buyer came back several times a month.

  • 63%

    of sales in the weakest of three years

  • 91.6%

    of sales in the strongest

The same storefront, two ways of using it. One arrives with a specification; the other arrives to look.

A homeowner might buy flooring once, for one renovation. Contractors, developers and designers came back several times a month for active projects, and sales interviews said the same thing: Pro buyers were the company’s most frequent and most valuable customers.

They also shopped differently. Rather than browsing for inspiration, they usually knew what they needed and wanted to find the right product, confirm it met the project’s requirements, and buy it.

That gave us a direction: prioritise the customers who drove the majority of the business and used the storefront most often.

Making a strategic choice

Where the category had already landed, and the move we chose out of it: from one storefront serving everyone the same way into the hybrid quadrant, where the big-box retailers already were.

Competitive research put most of the category on one side of that question: six of the eleven retailers here run one storefront with a Pro layer on top, and only two run a genuinely separate Pro site. We could have built the second storefront, but two would have needed their own development, merchandising, content and operational support, and the business was under pressure to focus investment and improve profitability.

On the customer and business evidence, we made a cross-functional decision: optimise the primary experience for professional buyers while keeping it usable for individual consumers. My part was to bring the behavioural and research evidence into the room, make the difference in Pro buyers’ needs concrete, and turn that into product priorities with Product, Sales, Marketing, Category Management, Engineering and leadership.

That gave us a much clearer definition of better.

Help our highest-value customers find, evaluate and purchase building materials faster and with greater confidence.
Agreed across Product, Sales, Marketing and Category Management

04 The Redesign

Designing for professional purchasing

Two principles carried the work, and every decision across navigation, discovery, product detail, sampling, checkout and performance was judged against them.

  1. 01

    Efficiency

    Help experienced buyers find, evaluate and purchase materials with as little unnecessary effort as possible. These are people who already know what they want.

  2. 02

    Transparency

    Surface the information, costs and system feedback a customer needs to commit to a high-value order. A pallet of flooring is not an impulse purchase.

01 · Make the right product easier to find

Before · three passes to reach a product family

Three passes through the same menu to reach one product family, with the wording taken from the internal taxonomy rather than from what customers called the material.

After · the families are the top level

One pass opens the whole family at once, and the distinctions a professional buyer sorts by — rigid-core, glue-down, waterproof, tile-look — are on the first panel rather than three levels inside it.

The old navigation reflected an inconsistent internal taxonomy. Related products appeared under different categories, the terminology did not always match how customers described materials, and important distinctions were buried deep in the hierarchy. For a buyer who already knew what they needed, that meant searching for it anyway.

I worked with Category Managers to restructure navigation around clearer product families: vinyl, wood, laminate, decking and carpet.

The redesigned hierarchy. Shop by Material opens on Vinyl Flooring, whose menu holds Categories, Vinyls by Color, Look Shop, Popular Collections and a Learning Center, and whose category paths name Waterproof Rigid Core, Glue Down, Peel and Stick, Loose Lay and Tile Look.
The legacy hierarchy. Browse by Category opens Flooring, which opens Wood Flooring, which opens Laminate, Hardwood, Unfinished Hardwood, Engineered Hardwood and Bamboo — three menus deep before a product family.
Before After
Drag to compare. The two screens above are the same change as it shipped.

The hierarchy balanced three inputs.

  1. 1

    Customer demand

    Historical sales showed which categories customers reached for most.

  2. 2

    Business priorities

    Strategically important categories were given the visibility to match.

  3. 3

    Domain expertise

    Category Managers validated how professional buyers actually tell products apart.

We also surfaced distinctions such as rigid-core, glue-down and waterproof where they directly changed which product someone picked. The goal was never cleaner navigation on its own. It was to shorten the distance between “I know what I need” and “I found it”.

02 · Bring decision-critical information forward

The first screen of the redesigned product page. Price per square foot, style and size swatches, a coverage field with a waste factor and a calculator, a subtotal of $460.35, Add to Cart and Order Free Samples.
The first screen of the old product page. Price per square foot, styles, size, a coverage field, an Add To Cart for Shipping Rate button and Save to Wishlist. Under the gallery it says Call for Samples. There is no subtotal.
Before After
Drag to compare the first screen. Two different products: the old template against the new one. Both already carry a price and a coverage field; what the old one will not tell you is the total — its button reads Add To Cart for Shipping Rate — and samples there are a phone call.

Hotjar showed engagement dropping sharply as customers moved down the old product page: under 30% reached the Product Overview and 12–16% the specifications, which sat near the bottom.

Google Analytics said the same thing about the end of the journey: of the sessions that reached checkout, about 95% did not complete an order.

Sales interviews explained why that mattered: customers called Sales because they could not find the information they needed to make a decision. The scroll map and the funnel in the reframe are where those numbers come from. We reordered the page around what a professional buyer needs first.

Page order Where the redesigned product page puts each block
  1. Gallery and buy boxtop of the page
  2. Product overview30% down
  3. Specifications40% down
  4. Customer reviews50% down
  5. Accessories74% down
  6. Recommended products87% down

Everything a buyer needs to decide with is now in the top half. Each band is as tall as that part of the page really is, measured off the capture above with the footer left out; blue is the product itself, grey is everything after it. The specifications were the fourth block on the old page, sitting between two rows of merchandising and starting about 68% of the way down.

We ranked what the page had to answer, in order: product imagery, price, size and variation options, material and colour, specifications, purchase actions, sample ordering. Less decision-critical metadata such as SKU and style was visually deprioritised. An earlier concept put the specifications inside accordions to satisfy stakeholder content requirements, and usability testing showed the extra interaction discouraged people from looking at all, so we surfaced the essentials directly instead.

If information is necessary to make a purchase decision, customers shouldn’t have to work to reveal it.

03 · Make sampling part of the purchase journey

For flooring, customers often need to see and feel a product before committing to a large order. BuildDirect already offered free samples, and the programme was so hard to find that some employees did not know it existed.

We moved sampling from a secondary feature to a core shopping action. Customers could request samples directly from the listing or product page, complete a sample order without creating an account, and tell free samples apart from paid products during checkout. The point was not feature visibility. It was to shorten the path between finding a product and being confident enough to buy it.

Sample ordering · on the listing page

Every card carries it, under the price and the rating, before a product has been opened at all.

Sample ordering · on the product page

And again on the product page, directly under Add to Cart and the same width as it. The old page’s equivalent line read Call for Samples.

The path to a free sample

Before: eleven steps and three decisions, and everything after the seventh happens once the sample is already in a cart. All three decisions are about shipping cost.
After: three ways in rather than one route through, and the account is optional — the dashed box. The shipping-cost branch is not on the diagram at all.

05 Testing

Testing revealed a deeper problem

  1. 01

    Internal walkthroughs

    Realistic purchasing scenarios, run in-house first, to clear the obvious problems and our own blind spots before spending customer time.

  2. 02

    Customer usability testing

    Five existing customers, recruited with Sales and Marketing, in remote task-based sessions on Lookback. Checkout above all.

Two stages, because external recruiting was limited

At first the issues looked unrelated. Users asked whether their sample had been added, whether it was actually free, where to find shipping information, and whether the order had gone through at all.

Nineteen of them, in four kinds — and underneath, one problem wearing four faces: customers did not trust what the system was doing.

Nineteen issues, in four kinds

  • A shopper resting their chin on a hand beside a screen showing a tick in a circle and a progress bar.

    System feedback & status

    6 issues

    • Order summary
    • Shipping total
    • Confirmation
    • Status updates
  • A screen showing a delivery truck and a three-stop progress tracker, with a shopper standing beside it, arms folded.

    Shipping clarity & transparency

    6 issues

    • Hidden options
    • Unclear terminology
    • Missing details
  • A shopper pointing at a form where one field is ticked and another carries a warning, with a shield beside it.

    Validation & error prevention

    5 issues

    • Invalid inputs
    • Inventory and weight errors
    • Out-of-stock flags
  • A shopper reaching towards a screen where a cursor is clicking a button among an image and two tiles.

    Interaction & control

    2 issues

    • External navigation
    • Nested scrolling

The four faces, and what customers said

  • Completion

    A shopper kneeling to tap the first item on a checklist beside a calendar, with a question mark above them.

    Completion wasn’t clear.

    Completion

    • “Didn’t know if my order went through.”
  • Sample eligibility

    A shopper pointing at a gift box on a screen, with a question mark above them.

    Sample eligibility wasn’t visible.

    Sample eligibility

    • “Can I get the free sample?”
    • “Similar products — which one has a sample?”
  • Fulfillment

    A shopper sitting with a hand to their chin beside a screen showing a delivery truck, with a question mark above them.

    Fulfillment lacked transparency.

    Fulfillment

    • “What is the provided pickup date?”
    • “Why does it show the city and province if I can’t change or select it?”
  • Next steps

    A shopper with folded arms looking at a numbered list of three steps, with a question mark above them.

    Next steps weren’t clear.

    Next steps

    • “What’s next?”
    • Observed Users did not realise they had to enter square footage before adding to cart.

From individual fixes to confidence-first checkout

Rather than closing each comment as its own usability ticket, I framed the next iteration around a single principle: confidence-first checkout.

We added clearer sample confirmation, separated free samples from paid products, surfaced shipping and costs earlier, clarified the line-item breakdown, and made the order summary and progress feedback persistent.

Clear on what I added

Before

After

Samples were easier to identify, review and tell apart from paid products.

Clear on what I’ll pay

Before

After

Shipping and the costs that matter were consolidated, so the total was readable before checkout rather than at it.

Clear on where I am

Before

After

Step states showed customers where they were and what came next, against panels that had been in no stated order.

For a high-value building-materials order, transparency was not simply helpful information. It was the thing that let a customer move forward.

06 Constraints

Designing within real constraints

The redesign ran during a platform migration, while the existing business still had to keep trading. Design saw a chance to improve the shopping experience meaningfully; Engineering’s immediate priority was a platform stable enough to launch on.

We could not build the ideal experience at once. Richer product specifications and filtering would have improved discovery, and the engineering investment was too high against available capacity, so those improvements were deferred. We prioritised the core purchase journey, platform stability, and the changes that delivered the most customer value without putting the migration date at risk.

What we took on, and what we deferred

Solid is what we took on; dashed is what we deferred. The core purchase journey runs across the top. Richer specifications, advanced filtering and comparison hang off Discover and Evaluate, and personalisation off Purchase — the discovery work named above, drawn where it would have sat.

Treating performance as UX

One constraint could not be deferred: page speed. Competitive analysis showed other flooring storefronts loading three to four times faster — Lowe’s at a speed index of 3.2 and Home Depot at 4.4, against 13.8 here — and the investigation pointed at product imagery.

Category Managers uploaded merchandising assets straight into the catalogue, and the system let large original files reach the storefront unoptimised. That is a workflow problem as much as a technical one, so we addressed both: automatic image compression with Engineering, and image guidelines I wrote for Category Managers so assets arrived consistent in the first place.

Together those changes contributed a 50%+ improvement in page-load performance without a much larger performance programme. Sometimes improving the customer experience means fixing the system under the interface.

Where the time was going

13.8 seconds against an industry average of 6.3, and three quarters of the page was imagery. The homepage carried about 5 MB of it where a competitor carried 401 KB.

The workflow, not just the files

One step added and one changed. Compression was Engineering’s; the guidelines were mine, and without the second the first would have been compressing whatever arrived.

Designing across teams

The work needed Sales, Category Management, Engineering, Marketing, Product and leadership. My role was to hold the customer, business and technical views in one place and turn them into a coherent experience.

The core product team on one side, the partners whose knowledge the storefront depended on across the other.

07 Impact

What changed after launch

The redesign launched alongside the re-platforming and the rebrand, so these results cannot be attributed to the UX changes alone. They are before-and-after business indicators from post-launch Google Analytics rather than the output of a controlled experiment. I read them as one signal that the overall experience moved in the right direction.

  1. +15%

    Conversion rate, before launch against after.

  2. −35%

    Cart abandonment, over the same period.

  3. 50%+

    Faster page loads, after the re-platforming.

Qualitative feedback pointed at a second shift. After launch Sales reported fewer questions about navigating the site or placing standard orders, and more conversations where their product expertise could add value. The goal was never to remove Sales from the journey. It was to let the storefront handle standard purchasing so Sales could spend their time where it counted.

Post-launch sales feedback · where Sales added more value

  • Product selection

    Questions about product fit, features and comparison.

    • “Which product is best for my project?”
    • “Can you help me compare these options?”

    Typical of what Sales heard after launch, not one person’s words.

  • Installation advice

    Questions about installation methods, requirements and compatible products.

    • “What do I need for installation?”
    • “Is this compatible with my existing subfloor?”

    Typical of what Sales heard after launch, not one person’s words.

  • Project planning

    Questions about quantity, project scope and recommendations.

    • “How much material do I need?”
    • “Can you recommend the best option for a commercial project?”

    Typical of what Sales heard after launch, not one person’s words.

The redesign became a starting point

Launch was not the end of the project. With the new platform live, I kept working with Marketing, Category Management and Engineering on what the live site taught us.

  • Product cards

    Refined the information and badges a card carries.

  • Naming and content

    Improved product naming and merchandising copy.

  • Free samples

    Kept iterating on the flow that testing had reshaped.

  • Room visualiser

    Improved discovery of the tool that previews flooring in a customer’s own space.

How the iterations ran

The live site became the input. Each round started from what it was telling us rather than from a backlog written before launch.

Product card refinement

Before

After

Brought key product details and sample actions together for faster evaluation.

Filter panel refinement

Before

After

Expanded filtering with more product-specific criteria, helping shoppers narrow options more precisely. The new panel runs on below the crop — it is about twice the height of the one it replaced.

SEO banner refinement

Before

After

Created a more flexible content structure for clearer SEO messaging and easier updates.

We also evolved the SEO banners and homepage merchandising so Marketing could run content without a developer. The redesign was a stronger foundation rather than a finished answer.

08 Reflection

  • Personal learning

    Focus is a product decision

    Trying to serve everyone equally dilutes the experience. Prioritising professional buyers gave us clearer product priorities and a stronger basis for making trade-offs, and it made the disagreements easier to settle because we were arguing about evidence rather than taste.

  • Personal learning

    UX goes beyond the interface

    Performance, platform constraints and internal workflows all shape the customer experience. The image-compression work and the guidelines for Category Managers moved page speed more than any screen I drew, and neither of them was a screen.

See more work