Ripples Learning website

Context

Ripples Learning does a lot: training programmes, HR and L&D credentials, assessment platforms like Discovery and Velocity, and original research. The old message spread all of that across separate places. Enterprise buyers needed one page that explains what Ripples does, proves it works and helps them find the right starting point, without first learning the names of a dozen products.

How might we turn a broad portfolio into one clear story, where a buyer starts from the outcome they need rather than the product name?

How it came together

I started from the content and goals, set up the style guide early so every section shared one visual language, and took the designs through rounds of feedback, refining each time until sign-off.

The page as a story

The home page runs to 13 sections, so I treated it as a story with a clear order: promise, proof, choice, depth, trust and action. Hover or tap a number to see what each section does.

12345678910111213

1. 1

   Promise

   One headline, four verbs (assess, train, credential, measure) and one button.

2. 2

   Proof

   70+ countries, 500+ organisations, 20M employees: credibility before any product is named.

3. 3

   Choose your outcome

   Twelve outcomes to start from, filterable four ways.

4. 4

   Not sure where to start?

   Halfway down, a calm way out for undecided visitors: tell us your goal and we’ll recommend a pathway.

5. 5

   Flagship pathways

   The two CHRMP offers side by side, one dark and one light, each with its own call to action.

6. 6

   Platforms

   AURA, Discovery and Velocity in tabs, each with a real product screenshot.

7. 7

   Programmes

   Six numbered programmes in a bento grid, mixing text and photography.

8. 8

   Built for every organisation

   Growing companies, enterprises, academia and government, each with its own colour-coded icon.

9. 9

   Original research

   Why Ripples is different, in three numbered points: what it benchmarks, standardises and measures.

10. 10

    Whitepapers

    Downloadable research in a carousel, proof that the expertise is real.

11. 11

    Reviews

    Voices from learners and clients.

12. 12

    How it all connects

    Learning, Credentials and Research as one capability loop.

13. 13

    Act

    Two closing calls to action and a footer organised by brand, so no one reaches the end without a next step.

Promise first, then proof

12345

1. 1

   A launch without a takeover

   Velocity is announced in a slim bar above the navigation, so the hero stays about Ripples as a whole.

2. 2

   The accent starts here

   A soft peach dot behind “learning” introduces the accent that runs through every heading on the page.

3. 3

   What Ripples does, in four verbs

   Assess, train, credential and measure, instead of a paragraph of copy.

4. 4

   One action

   Book a Meeting is the only button in the hero.

5. 5

   Designed for enterprise

   Recognisable client logos sit straight under the promise.

Start from the outcome, not the product

Visitors arrive with a goal, like better managers, measurable training or compliance, not with Ripples’ product names. So the catalogue is organised by outcome, and the product name follows in brackets.

1234

1. 1

   The visitor’s words

   “Start with what you need to achieve” frames the whole catalogue around the buyer’s goal.

2. 2

   Four ways in, one catalogue

   Browse by need, programme, platform or credential, depending on how you think about the problem.

3. 3

   One card anatomy

   Photo, outcome as the title, one line of value, then Explore. Twelve cards, all the same shape.

4. 4

   Outcome first, product second

   “Measure Learning Impact (Velocity)”: people who don’t know the product names still find the right one.

A style guide behind every section

With 13 sections and many content owners, consistency had to be designed in. I set up a style guide covering colour, type and components, so every section is assembled from the same parts and new pages can follow the same rules.

One signature, every heading

The most recognisable rule in the guide: every section heading picks one keyword, sets it in a handwritten accent and puts a soft dot behind its first letter. It gives a corporate page a human voice, and it pulls the eye to the word that matters. Rebuilt here from the designs:

Connected to the products I designed

The website is the front door to two products whose experiences I also designed. It names them in the outcome cards, the platform tabs and the closing call to action.

Case studyRipples Velocity →“Measure Learning Impact (Velocity)” on the websiteCase studyRipples Discovery →“Assess Capability with 360° Feedback” on the website

Result

A live company website that tells one story across Ripples’ programmes, credentials, platforms and research, built on a style guide and refined through feedback. Visit it at rippleslearning.com.