Illustrative before-and-after concepts

Why we show concepts, not case studies

Many design studios show client work with headline figures attached: traffic up by a large percentage, enquiries doubled. We do not publish figures like that. Results depend on the business, the season, the market and much more than the website, and a number taken out of that context can mislead. Section 12A of the Fair Trading Act 1986 requires anyone making a claim in trade to have reasonable grounds for it when the claim is made ^[1], and we hold our own marketing to the standard we would apply to any site we build. Our website claims guide covers the rule in more depth.

So instead of case studies, this page shows illustrative concepts. Each one is a fictional business with a common website problem. The "before" drawing exaggerates common faults slightly so they are easy to spot. The "after" drawing shows the direction a redesign would take. Read them as sketches of an approach, not as evidence of results.

Compare the concepts

Each concept has a slider. Drag it, or focus it and use the arrow keys, to reveal more of the before or after view. With JavaScript turned off, the two views appear side by side instead.

Harbourside Fitness: the timetable problem

Harbourside Fitness is a fictional gym. Its old home page opens with a generic welcome message and a large photo, and the class timetable is a PDF linked from the footer. On a phone, people have to download the PDF and zoom in to see what is on tonight.

The redesign concept moves the timetable onto the home page as a simple list for today and tomorrow, with a link to the full week. The trial pass offer becomes a single button. Coach profiles move to their own page instead of a long scrolling section. Buttons are larger and spaced further apart, in line with the target size criterion added in WCAG 2.2 ^[2].

What the concept does not show is equally important. It does not claim more memberships would follow. A gym's sign-ups depend on its location, prices and classes. The redesign removes an obstacle; it does not create demand.

Totara Plumbing: the "where do you work" problem

Totara Plumbing is a fictional plumbing business. Its old site has a slogan for a headline, a phone number in small print at the bottom and no list of service areas. Visitors have to ring to find out whether the business covers their suburb.

The redesign concept puts the phone number in the header on every page, with a tap-to-call link on phones. A plain list of service areas appears near the top. The enquiry form drops from nine fields to four. The headline says what the business does instead of using a slogan.

These are small changes, and most could be made in a UX refresh without a full redesign. That is part of the point: a redesign is not always the answer.

Fernleaf Homewares: the surprise delivery cost problem

Fernleaf Homewares is a fictional online plant and homewares store. Its old site shows products in a cluttered grid with inconsistent photos, and delivery costs only appear at the last step of checkout.

The redesign concept shows delivery costs on every product page and in the cart. The product grid uses consistent photo sizes and fewer badges. Returns information sits next to the buy button. Product pages are lighter, with images sized for the screen. For a store, changes like these would sit within an e-commerce redesign, along with a full redirect map for product addresses.

How the comparator works

The slider is a standard range input, so it works with a mouse, a finger or a keyboard. Screen readers announce it as a slider with a label and its current position. Each step moves the reveal by five per cent. The before-and-after drawings are decorative, so the text above describes each change in words.

Want to see a concept of your own site?

To see the direction for your own site, the design stage of a paid project produces page designs you approve before any build work. Start with the redesign planner, or get in touch with a link to your current site.