Marije Rottier.
← All work

Case 02 / 07 · B2B web shop · Concept

All4feet

A wholesaler of pedicure supplies with 1,308 products on software from 2010. A concept where professionals log in, see their own price and send an order that the team checks: an order request, not a checkout.

Role
UX audit, IA, UX/UI, prototype, product data
Type
B2B web shop redesign
Timeline
12 to 20 October 2026
Status
Concept and case study, not implemented
A tilted collage of the All4feet concept: product pages, the category page, the design system, the order flow and the menu diagram
Screens and boards from the concept, all built in HTML with real products, prices and photos from the current shop.
Problem

Pedicurists reorder the same supplies between clients, often on a phone, but the shop hid prices, discounts and its own core range.

What I did

Audited the shop, pitched a concept to the owner, rewrote the brief after his answers, rebuilt two whole brands as data, and audited my own design with the same method.

Outcome

39 menu lines down to 4 buttons, 160 brand listings down to 45 products, 36 of 51 audit findings solved. Not yet tested with users.

01

Context

The challenge

A shop that works against its customers

The customers are pedicurists and salons who order the same things again and again, often on their phone between two clients. The shop made that hard: tier discounts only on the invoice, every colour and size a separate product, a core gel polish range in no category at all, and no quantity field on the phone.

The shop isn't a checkout. It's an order request.

The name is used with permission. This is a concept and a proposal; the shop was not rebuilt.

The audit

51 findings, each rated

I checked the live shop on desktop and on a phone against Nielsen's heuristics. Every finding got a severity, an effort and a fix, so the owner could see what to do first.

UX audit · 12 Oct 2026Excerpt, 6 of 51
Core range in no category

94 of the 107 Gelamour listings, almost all of them gel polish colours, only findable through search.

CriticalEffort SIA
Tier prices offline

“We calculate the extra discount on your invoice.” The biggest advantage of buying in bulk was invisible.

CriticalEffort MPricing
No quantity field on the phone

Size radios of 13 by 13 pixels and an English “Add to Cart”, but no way to order ten boxes.

CriticalEffort MMobile
A menu of 39 lines

36 categories and 3 clickable divider lines at one level: brands, product types, three kinds of offers and catch-alls.

MajorEffort SIA
Every colour and size a product

Fourteen glove listings for what are really four products.

MajorEffort MIA
Search finds the wrong things

“nitril handschoen” shows a tanning glove first; “reparatie” finds nail filler, not the repair service.

MajorEffort LSearch
Severity 1 cosmetic to 4 critical · Effort S hours, M days, L weeks or a new platform · Effort S with severity 3 or 4 is a quick win

The pitch

One conversation changed the brief

I pitched version 2 to the owner on 18 October. He liked the direction, and corrected almost every assumption behind it:

  • Product sales are the core, not the repair service I had put first
  • There is no stock system and no online payment: an order is a request on account, and staff call when something is short
  • Prices only for logged-in customers; some must never be seen by consumers
  • The customer file and SnelStart (bookkeeping) matter most
  • Two category levels at most, no expensive plug-ins
  • Calmer and more elegant: pedicure and high-end spa, not deals and prices

So I rewrote the brief and started version 3 from those answers.

02

Process

Information architecture

From 39 lines to four buttons

One organising principle: type of product. Brands get their own page and a filter, offers become a label on the product, the divider lines disappear and the catch-alls get a real place during migration.

The order flow

An order request, not a checkout

The owner's answers turned the cart into an order list. The customer sends it without paying; the team checks what is in stock, calls if something is short, and invoices from the bookkeeping system. The site says so at every step.

Versions

Seven versions in nine days

Every version was saved with screenshots, so each change can be compared with the one before. The biggest turn came from the pitch, not from a test.

Version v1: Shop first
v1 · Shop first
Version v2: Workshop first, pitched
v2 · Workshop first, pitched
Version v3: Brief rewritten, style A
v3 · Brief rewritten, style A
Version v3.1: Gehwol, a whole brand
v3.1 · Gehwol, a whole brand
Version v3.2: Gelamour, product page
v3.2 · Gelamour, product page
Version v3.3: Fresher style
v3.3 · Fresher style
Version v3.4: Audited and fixed
v3.4 · Audited and fixed

Style

From busy, to calm, to fresh

The owner found version 2 too busy. Three style directions on one board led to style A, Salon Calm. On screen it read as muted, so a header, logo and colour board led to a fresher version: a near-white page, white cards and a clearer green. Six new logos didn't beat the simple wordmark, so it stayed.

Two whole brands

Proving the catalogue model

Instead of a few sample products I rebuilt two complete brands from the live shop. Gehwol: 53 listings, one per size, became 34 products with the size as a choice and its own price and photo. Gelamour: 107 listings became 11, with 91 gel polish colours as one product, a swatch for each colour and a search by number.

Design decisions

What changed, and why

  1. An order list instead of a cart

    No payment step. “Place order under reservation”, then what happens next in plain words.

    WhyThere is no stock system and no online payment. A checkout would have promised something the business can't keep.

  2. Prices only after login

    Guests see the range and how to get an account; customers see the price of their group.

    WhySome prices must never reach consumers, and the price group is the link with the customer file.

  3. Deals that do the maths

    10 + 1 per size for gloves, 11 + 1 mixable across the 75 ml creams, counted in the product page and the order list.

    WhyThe rules came from the live site and the owner. Showing how many more you need beats a promo in the title.

  4. Audit my own design

    The same method as the first audit, plus contrast, touch targets and a phone pass.

    WhyThe concept should meet the standard I held the old shop to, before anyone tests it.

Auditing my own design

What the audit caught

36 of the 51 original findings were solved. But the new design had problems of its own, and I fixed the quick ones before calling it done.

Audit of v3.3 · 20 Oct 2026New findings, all fixed in v3.4
Search failed on real queries

A colour number, “gehwol 75” and the Dutch word “vijl” found nothing; “reparatie” still missed the repair service.

MajorEffort SSearch
Order possible under the minimum

The button worked at € 13,95 while the minimum is € 50.

MajorEffort SOrder flow
Small grey text below AA

3.4 to 3.9 : 1. Now 5.3 : 1, and field borders 3.2 : 1.

MajorEffort SAccessibility
Results below the fold on the phone

Search results started under the category list. Found only in real-size phone screenshots.

MajorEffort SMobile
A label that wasn't true

“Often ordered together” without order data. Renamed to “More in this category”.

MinorEffort SHonesty
After the fixes: 0 unnamed controls, 0 heading skips, 0 pages scrolling sideways, 7 of 7 test searches right.
03

Outcome

The result

Calm, fast to reorder, honest about stock

A near-white shop with one green for everything you can do. Logged-in customers start with their regular products; every price is their own; every deal is counted for them.

On the phone

Eleven tasks, before and after

Most orders happen on a phone between two clients, so I compared eleven tasks at the same screen size, the old shop next to the concept.

Design system

Built from the code

The board uses the prototype's own stylesheet, so it can't drift from the screens: colours with measured contrast, type, buttons, fields, labels and the product card.

In numbers

Before and after

39 → 4lines in the menu; the range in 8 categories, two levels
53 → 34Gehwol listings merged into products
107 → 11Gelamour listings; 91 colours in one product
44 pxsize buttons on the phone, were 13 px
7 of 7test searches answered right, were 2 of 7
36 of 51audit findings solved in the concept

Where it stands

Delivered, and honestly open

  • An audit of the live shop and a platform advice (WooCommerce, lean)
  • A clickable prototype with prices per group, deals, an order list without payment and a staff page
  • Two complete brands as data, ready to show the migration
  • An audit of my own design, with the quick fixes done

Not done yet: no tests with users (a card sort and a remote task test with pedicurists are planned), the SnelStart link is unconfirmed, product photos and texts still come from the old shop.

AI in my process

Research, code and data, decisions mine

AI crawled the shop, measured contrast and targets, wrote the prototype code and turned 160 product pages into data. I set the brief, chose every direction and rule, and checked the claims. One check caught a wrong number: the menu has 39 lines, not the 35 the first audit said.

  1. Step 1

    Audit

    Pages crawled and measured; severity and fixes judged by me.

  2. Step 2

    Prototype

    HTML, CSS and JS written by AI; scope, style and every revision mine.

  3. Step 3

    Brand data

    160 pages fetched and grouped; swatch colours read from photos, about 25 by eye.

  4. Step 4

    Self-audit

    Measured by AI, the fixes chosen and approved by me.

Product texts copied from the live shop are labelled as such in the prototype; anything not confirmed by the owner is marked “te bevestigen”.

04

Reflection

What I'd do differently

  1. Talk to the owner before repositioning

    I rebuilt the homepage around second-hand information that repair was the core. One conversation reversed it. The brief should have come from him first.

  2. Test the order flow first

    I designed a checkout with payment for a business that doesn't take payment online. Asking how an order actually travels through the shop would have found that on day one.

  3. Check numbers at the source

    “35 menu items” travelled through every document until I recounted for a diagram: it was 39. Counting from the page source, not from a screenshot, would have caught it.