# Ripples Learning website URL: https://kalpana-srivastava.pages.dev/work/visual/ripples-learning-website > The company website for Ripples Learning. It turns a broad portfolio of programmes, credentials, platforms and research into one clear story for enterprise… [← All visual work](https://kalpana-srivastava.pages.dev/work#showcase) Website · Ripples Learning # Ripples Learning website The company website for Ripples Learning. It turns a broad portfolio of programmes, credentials, platforms and research into one clear story for enterprise buyers, backed by a style guide and refined through rounds of feedback. _\[Image: Ripples Learning home page: hero “Turning learning into real-world results”, client logos, proof stats, outcome cards with filters, flagship pathways, platforms, programmes, organisation types, research, whitepapers, reviews, the capability loop and a closing call to action.\]_ Full page Home “Can Ripples help my organisation, and where do I start?” What to look for - The promise, then proof in numbers, before any product is named - Choose by outcome, with four ways to filter the same catalogue - Help for undecided visitors halfway down the page - Every section ends in Explore or Book a Meeting Scroll inside the window to explore the full page. Client Ripples Learning My role UX designer Year 2025–26 Platform Web [Visit live site ↗](https://rippleslearning.com/) ## 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. 1. Content & goals 2. Wireframes 3. Style guide 4. High fidelity 5. Feedback 6. Refine Feedback and refine, repeated until each section was signed 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. _\[Image: The full Ripples Learning 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 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 _\[Image: Ripples Learning hero: announcement bar for Velocity, navigation, the headline “Turning learning into real-world results”, four services, a Book a Meeting button 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 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. _\[Image: Proof, Not Promise: 70+ countries, 500+ organisations, 20M employees impacted and 20,000 certified professionals.\]_ “Proof, not promise”: four numbers, each with a short line on what it counts. ## 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. _\[Image: Start With What You Need To Achieve: tabs for Needs, Programs, Platforms and Credential, and a grid of outcome cards such as Build Leaders & Managers and Measure Learning Impact (Velocity).\]_ [1](https://kalpana-srivastava.pages.dev/#outcome-1)[2](https://kalpana-srivastava.pages.dev/#outcome-2)[3](https://kalpana-srivastava.pages.dev/#outcome-3)[4](https://kalpana-srivastava.pages.dev/#outcome-4) 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. 01 · Colour - Ripples navy #001448 Buttons, top bar and dark bands - Peach accent #ffdac1 Dot behind a heading keyword - Gold accent #c59c23 The same dot on dark bands - Card blue #f4f9ff Programme and organisation cards - Icon blue #0260a1 Growing organisations - Icon orange #f37521 Large enterprises - Icon yellow #ffcc00 Academic institutions - Icon teal #00c3d0 Government & public sector 02 · Type - Display_56px · Medium_Turning learning into real-world results - Section heading_40px · Semibold_Start With What You Need To Achieve - Accent word_40px · Semibold_Need - Card title_16px · Semibold_Build Leaders & Managers - Body_14px · Regular_Reduce friction and improve collaboration. 03 · Components Buttons Book a Meeting →Login Book a Meeting →Book a Demo → Segmented filter By NeedsBy ProgramsBy Platforms Proof stat 70+ Countries Where Ripples pathways have been used Numbered point 1 What we benchmark Readiness indices and sector insights. Outcome card Measure Learning Impact (Velocity) Track adoption and behaviour change. Explore → Organisation icons ### 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: - Proof, Not Promise - Start With What You Need To Achieve - Not Sure Where To Start? - Programs That Make Change Stick - Designed For Scale Across Organization Types - Whitepapers & Benchmarks ## 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 website](https://kalpana-srivastava.pages.dev/work/ripples-velocity)[Case studyRipples Discovery “Assess Capability with 360° Feedback” on the website](https://kalpana-srivastava.pages.dev/work/ripples-discovery) ## 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](https://rippleslearning.com/). [Next · DashboardProcfox auction reportsAuction reports for Procfox, designed for two roles. The auctioneer sees every supplier and every bid; the supplier sees only their own, in the same layout.](https://kalpana-srivastava.pages.dev/work/visual/procfox-auction-reports)