← All work
Case study · Website redesign

McMaster Training website

The shop window for McMaster Training's facilitator-ready packs. 12 pathways, 6 levels each and 18 components in every level, redesigned so a facilitator understands the whole offer in one scroll.

Role
Design, copy structure, development
Built on
WordPress, Elementor, WooCommerce
Buyers
Facilitators, HR and L&D teams
Palette
Ink, paper and turquoise
mcmastertraining.co.za
McMaster Training home page with the document wall hero

McMaster Training sells complete training programmes written by a team with 27 years in training and L&D. Each level comes with everything a facilitator needs: guides, scripts, slides, workbooks, assessments and certificates.

The old page did not show any of that. A buyer could not see what was in a pack, how the levels fitted together, or what to do with the files on the day.

The brief: make it bold, show the product itself, and make the whole offer obvious before anyone reaches the price.

The site now sells the packs, and the McMaster Training Platform delivers them behind the Dashboard button.

The problem

Why buyers hesitated.

Hidden contents

Nothing showed the 18 components a buyer would actually download.

No sense of progression

Six levels per pathway, but no picture of how they build on each other.

Generic layout

A template look that said nothing about the depth of the material.

The design

Let the product be the hero.

Bold Montserrat headings, card columns and alternating ink and paper sections. The hero is a wall of real training documents with a download bar cycling through all 12 pathways.

One promise

"Download today. Facilitate tomorrow." sits under the headline and sets the tone for every section.

Show the flow

A four-step section shows which file to reach for one week before, on the day, straight after and over 90 days.

Levels as a meter

L-01 to L-06 read like a progression bar, from Foundations to executive.

The engine

Hand-built sections on a store that already worked.

The redesign kept McMaster on WordPress and WooCommerce. The work was in sections that look custom but stay easy to edit.

  • 13 Elementor HTML sections, each self-contained, so any one can be swapped without touching the rest
  • Theme styles overridden on every link and button, so Elementor never changes the look
  • Animated document wall that pauses for visitors who prefer reduced motion
  • WooCommerce products for packs and bundles, which the training platform reads by SKU
PagesHeader, hero, what's inside, levels, packs, pricing, about and footer as separate sections
StoreWooCommerce packs, editable versions and full pathway bundles
PlatformDashboard button into the McMaster Training Platform
BaseWordPress with Elementor
What I built

A complete home page, section by section.

Hero

  • 10 animated hero options to choose from
  • Document wall with a cycling download bar
  • Turquoise tuned over three rounds

Product sections

  • What's inside and how to use the packs
  • Six levels with fill meters
  • 12 pathway cards and pricing

Trust and contact

  • About Shelley with credentials
  • Other services on full turquoise
  • Final call to action and footer
At a glance

The whole offer, in one scroll.

12pathways shown as cards
6levels each, Foundations to executive
18components in every level
13Elementor sections, each one swappable

Got a spreadsheet your team hates?

Send me a WhatsApp with what your team does every day and where it breaks. I'll tell you honestly whether a dashboard fixes it, and what it would take.

WhatsApp me now

Opens a WhatsApp chat with Steph

© 2026 Steph · WordPress & WooCommerce developer · Johannesburg, South AfricaDesigned and built by hand