# Ripples Velocity website

URL: https://kalpana-srivastava.pages.dev/work/visual/ripples-velocity-website

> The marketing website for Ripples Velocity. Five pages built from the product manager's content, within the brand guidelines, on a style guide I created.

[← All visual work](https://kalpana-srivastava.pages.dev/work#showcase)

Website · Ripples Learning

# Ripples Velocity website

The marketing website for Ripples Velocity. Five pages built from the product manager's content, within the brand guidelines, on a style guide I created.

_\[Image: Velocity home page: hero “Make Learning Count”, client logos, the training gap, what Velocity is, three moves (Reinforce, Measure, Prove), who it is for, four features, proof numbers, a testimonial, the Ripples Journey suite and a closing call to action.\]_

Page 1 of 5

Home

“Why should I care, and is this for me?”

What to look for

- The problem (training fades within a week) before the product
- Reinforce, Measure, Prove as the one idea to remember
- Three audiences, each with their own reason to buy
- Every section ends in Book a Demo or Start a Free Trial

Pick a page, then scroll inside the window to see all of it.

Client

Ripples Learning

My role

UX designer

Year

2025–26

Platform

Web

[Read the Ripples Velocity case study →](https://kalpana-srivastava.pages.dev/work/ripples-velocity)

## Context

Ripples Velocity follows people for 90 days after a training programme and shows whether they actually use what they learned. That is a new idea for most buyers, who are used to measuring training with attendance and satisfaction scores. The website had to explain it quickly, speak to three very different buyers (freelance trainers, training companies, and L&D and HR teams), and turn interest into demos and free trials.

> How might we make “proof that training worked” feel concrete enough that an L&D leader books a demo?

## How it came together

The product manager gave me the content and the requirements. I gathered the details I needed, structured the pages, designed them within Velocity’s brand guidelines, and refined them after each round of feedback.

1. Content from the PM
2. Requirements
3. Page structure
4. Design in the brand
5. Feedback
6. Refine

Feedback and refine, repeated until each page was signed off

## Five pages, five questions

Each page answers one question a buyer has, in the order they usually ask them. Click a card to open that page at the top.

1. [1 · Home“Why should I care, and is this for me?”Open page ↑](https://kalpana-srivastava.pages.dev/#sx-panel-ripples-velocity-website-1)
2. [2 · Velocity Model“How does it actually work?”Open page ↑](https://kalpana-srivastava.pages.dev/#sx-panel-ripples-velocity-website-2)
3. [3 · Features“What exactly do I get?”Open page ↑](https://kalpana-srivastava.pages.dev/#sx-panel-ripples-velocity-website-3)
4. [4 · Pricing“What will it cost me?”Open page ↑](https://kalpana-srivastava.pages.dev/#sx-panel-ripples-velocity-website-4)
5. [5 · Suite“How does it fit with everything else?”Open page ↑](https://kalpana-srivastava.pages.dev/#sx-panel-ripples-velocity-website-5)

## The home page as a story

The home page leads with the problem, then the answer, then proof, then the next step. Hover or tap a number to see each section’s job.

_\[Image: The full Velocity home page as a thin map with 13 numbered sections.\]_

[1](https://kalpana-srivastava.pages.dev/#map-1)[2](https://kalpana-srivastava.pages.dev/#map-2)[3](https://kalpana-srivastava.pages.dev/#map-3)[4](https://kalpana-srivastava.pages.dev/#map-4)[5](https://kalpana-srivastava.pages.dev/#map-5)[6](https://kalpana-srivastava.pages.dev/#map-6)[7](https://kalpana-srivastava.pages.dev/#map-7)[8](https://kalpana-srivastava.pages.dev/#map-8)[9](https://kalpana-srivastava.pages.dev/#map-9)[10](https://kalpana-srivastava.pages.dev/#map-10)[11](https://kalpana-srivastava.pages.dev/#map-11)[12](https://kalpana-srivastava.pages.dev/#map-12)[13](https://kalpana-srivastava.pages.dev/#map-13)

1. 1  
Promise  
“Make Learning Count”, one line on what Velocity does, and two ways in: Book a Demo or Start a Free Trial.
2. 2  
The problem  
Up to 90% of new learning fades within a week, with three costs every L&D team recognises.
3. 3  
The answer  
A dark band: Velocity is the layer that makes training stick.
4. 4  
Three moves  
Reinforce, Measure, Prove: the one idea the whole site repeats.
5. 5  
Who it’s for  
Freelance trainers, training companies, and L&D and HR teams, each with its own promise.
6. 6  
The SAR engine  
The heart of the product, Situation, Action, Result, explained with one illustration.
7. 7  
Learners and managers  
Gamification for learners, then manager-verified impact, alternating sides for rhythm.
8. 8  
A view for every seat  
Role-based dashboards, from learner to CEO.
9. 9  
Proof in numbers  
22+ companies, 6,000 impact stories, 100+ programmes, on the brand gradient.
10. 10  
Wall of love  
A real quote from an HR leader.
11. 11  
Part of something bigger  
Velocity alongside Dimensions and Mastery in the Ripples Journey suite.
12. 12  
Act  
“Ready to see Velocity in action?” with the same two buttons as the hero.
13. 13  
Footer  
Links grouped by the buyer’s questions, plus Book a Demo once more.

## A promise with two doors

_\[Image: Velocity hero: navigation, the headline “Make Learning Count” with a soft green dot behind the L of Learning, two lines of supporting copy, Book a Demo and Start a Free Trial buttons, and enterprise client logos.\]_

[1](https://kalpana-srivastava.pages.dev/#hero-1)[2](https://kalpana-srivastava.pages.dev/#hero-2)[3](https://kalpana-srivastava.pages.dev/#hero-3)[4](https://kalpana-srivastava.pages.dev/#hero-4)[5](https://kalpana-srivastava.pages.dev/#hero-5)

1. 1  
Navigation in the buyer’s words  
Velocity Model, Features, Solutions, Pricing and Suite, in the order people ask.
2. 2  
The accent dot  
A soft green dot behind “Learning” is the signature that runs through every heading on the site.
3. 3  
What, then how  
One line on the outcome, then an italic line on how Velocity gets there.
4. 4  
Two doors  
Book a Demo for enterprise buyers, Start a Free Trial for trainers who want to try it themselves.
5. 5  
Trust straight away  
Enterprise client logos sit on a white card that overlaps the hero.

## The problem before the product

_\[Image: The Training Gap section: “Training Fatigue Is Real—And Costly”, a red statistic that up to 90% of new learning fades within a week, three cards (Budgets vanish, Old habits return, L&D fights for justification) and a box saying Velocity closes that gap.\]_

[1](https://kalpana-srivastava.pages.dev/#gap-1)[2](https://kalpana-srivastava.pages.dev/#gap-2)[3](https://kalpana-srivastava.pages.dev/#gap-3)[4](https://kalpana-srivastava.pages.dev/#gap-4)

1. 1  
Name the pain  
“Training Fatigue” is the keyword, in the handwritten accent.
2. 2  
A fact with a source  
The 90% statistic is in red and cites the Ebbinghaus forgetting curve, so it reads as evidence, not marketing.
3. 3  
Three costs, one red line  
Each card has a red underline: the problem, made visible.
4. 4  
The turn  
A calm green box answers the problem before the page moves on.

_\[Image: From Training To Impact In Three Moves: Reinforce in a blue circle, Measure in green and Prove in dark brown, joined by arrows and numbered 1 to 3.\]_

Three moves, three brand colours. The same diagram returns on the Velocity Model page, so the idea sticks.

## Pricing that answers back

Pricing was the hardest page: two kinds of buyer, three tiers, add-ons and burst pricing. Rather than a dense table, the price card does the maths for you.

_\[Image: Velocity pricing: an Organization or Training Providers toggle, a Free plan card, and a live price card showing $5,200 a year with a campaigns-per-year slider, tier prices, a Buy Seats button, add-ons, included features and an explanation of burst pricing.\]_

[1](https://kalpana-srivastava.pages.dev/#price-1)[2](https://kalpana-srivastava.pages.dev/#price-2)[3](https://kalpana-srivastava.pages.dev/#price-3)[4](https://kalpana-srivastava.pages.dev/#price-4)[5](https://kalpana-srivastava.pages.dev/#price-5)[6](https://kalpana-srivastava.pages.dev/#price-6)

1. 1  
Pick your lane  
Organisations and training providers buy differently, so a toggle swaps the whole page.
2. 2  
Free to start  
One campaign with five learners, so nobody has to talk to sales to try it.
3. 3  
A live price  
The yearly price updates as you move the slider, with the cost per campaign underneath.
4. 4  
One question, not a table  
“How many campaigns per year?” is the only input; tiers follow from it.
5. 5  
Add-ons as checkboxes  
Extras are opt-in, each with a unit price and an info tip.
6. 6  
No surprises  
Burst pricing is explained in plain words right on the card.

## A style guide behind every page

Before designing the pages, I set up a UI style guide for Velocity within its brand guidelines: colours, type, grid, spacing and every component the site needed, each with its states. Every page was then assembled from these parts. Hover or tap a number to explore the full guide.

_\[Image: The Velocity UI style guidelines in full: index, colours, typography, grid system, spacing, buttons, cards, effects, accordion, tabs, input fields, radio buttons, checkboxes and tooltips.\]_

[1](https://kalpana-srivastava.pages.dev/#guide-1)[2](https://kalpana-srivastava.pages.dev/#guide-2)[3](https://kalpana-srivastava.pages.dev/#guide-3)[4](https://kalpana-srivastava.pages.dev/#guide-4)[5](https://kalpana-srivastava.pages.dev/#guide-5)[6](https://kalpana-srivastava.pages.dev/#guide-6)[7](https://kalpana-srivastava.pages.dev/#guide-7)[8](https://kalpana-srivastava.pages.dev/#guide-8)[9](https://kalpana-srivastava.pages.dev/#guide-9)[10](https://kalpana-srivastava.pages.dev/#guide-10)[11](https://kalpana-srivastava.pages.dev/#guide-11)[12](https://kalpana-srivastava.pages.dev/#guide-12)[13](https://kalpana-srivastava.pages.dev/#guide-13)

1. 1  
Colours  
Two brand colours, four state colours, text greys and soft background tints.
2. 2  
Typography  
Lato, with six heading sizes from 56px to 20px and a 1.1 line height.
3. 3  
Grid  
A 12-column grid on a 1440px frame, 36px margins and 20px gutters.
4. 4  
Spacing  
Ten levels, from 8px to 120px.
5. 5  
Buttons  
Primary, secondary and tertiary, each with default, hover, pressed and disabled states, for desktop and mobile.
6. 6  
Cards  
Four card types, including the gradient primary card.
7. 7  
Effects  
Shadow levels for cards and overlays.
8. 8  
Accordion  
Used for every FAQ on the site.
9. 9  
Tabs  
Used for the pricing toggle and the suite pillars.
10. 10  
Input fields  
Default, focus, filled, error and disabled, with helper text.
11. 11  
Radio buttons  
Every state, at two sizes.
12. 12  
Checkboxes  
Every state, used for pricing add-ons.
13. 13  
Tooltips  
Four directions, light and dark, used for the pricing info tips.

Rebuilt from the guide:

01 · Colour

- Primary  
#221314  
Buttons, dark bands and footer
- Secondary  
#8dc162  
Brand green, gradients and icons
- Info  
#0260a1  
Reinforce, links
- Success  
#27ae60  
Check marks and confirmations
- Warning  
#e2b93b  
Alerts
- Error  
#dc2626  
The problem statistic, errors
- Body text  
#666666  
Paragraphs
- Accent tint  
#d7eedd  
Section labels and the heading dot

02 · Type

- Heading 1 · Lato_56px · Bold_Make Learning Count
- Heading 2 · Lato_48px · Bold_Training Fatigue Is Real
- Heading 4 · Lato_32px · Bold_The SAR Reflection Engine
- Accent word_40px · Semibold_Impact
- Heading 6 · Lato_20px · Bold_Freelance Trainers

03 · Components

Buttons · four states each

PrimarySecondaryTertiaryDefaultButton →Button →Button →HoverButton →Button →Button →PressedButton →Button →Button →Disabled

Section label

How it works

Primary card

Ready to see Velocity in action?

Three moves

Reinforce

Measure

Prove

### One signature, every heading

Like the Ripples Learning site, each heading picks one keyword, sets it in a handwritten accent and puts a soft dot behind its first letter, here in Velocity’s green. It ties Velocity to the Ripples family while keeping its own colours.

- Training Fatigue Is Real
- From Training To Impact
- The Layer That Makes Training Stick
- Built For Everyone
- What Gets Captured
- Everything A Campaign Needs

## The product behind the website

I also designed the Velocity product itself. The website’s promise, “prove what training changes”, is what the product’s dashboards deliver.

[Case studyRipples Velocity, the product The dashboards the website promises](https://kalpana-srivastava.pages.dev/work/ripples-velocity)

## Result

A five-page website that explains a new idea in plain words, speaks to three kinds of buyer and ends every page in a demo or a free trial, built on a style guide and refined through the product manager’s feedback.

[Next · WebsiteC1 Global websiteTaking C1 India global. A website for international clients, shaped with the CEO, VP, marketing and project management, and built on the brand guidelines.](https://kalpana-srivastava.pages.dev/work/visual/c1-global-website)