Rotating headline
We map behaviour and get people talking, closer, curious, amazed, connected. One sentence, five promises.
MapsTell
A website MapsTell keeps building itself
MapsTell helps trainers and coaches make behaviour visible and easy to talk about through The World of Difference, a rich, metaphor-driven model built on DISC. We built their new site in Webflow as a library of components with page slots. Their team drops components into a page, fills in the fields and publishes, with every form connected to their CRM through n8n.
Services
Webdesign
Webflow Development
Micro Interactions
N8N Automations
CRM integration
Client
MapsTell
Industry
Training & Coaching
Year
July 2026
Navigator
Hero
Logo wall
Image slider
Feature section
Stepper
Card grid
Carousel cards
Comparison
Centered content
FAQ
Contact
Component properties
Hero
TaglineDiscover The World of Difference
HeadingWe map behaviour and get people
Rotating wordstalking, closer, curious, amazed, connected
Button 1See how it works
Button 2Download the Explorer's Guide
Logo wall
TitleThese organisations are already on their way:
Marquee
Image slider
Images4 map details
Drag to move
Feature section
TaglineOur vision
HeadingInsight starts on paper. Change starts in conversation.
Image sideLeft
Button 1Our method
Button 2Book a Discovery Call
Stepper
Step 1ME
Step 2YOU
Step 3WE
Autoplay
Card grid
TaglineWhat The World of Difference does
HeadingNine things people notice the moment they step onto the map
Cards9
Carousel cards
TaglineApplications
HeadingOne map. Countless applications.
Arrows
Comparison
HeadingFrom insight on paper to real conversations.
Left columnWithout the map
Right columnWith MapsTell
Centered content
TextFind out why 1,000+ Guides in 20 countries chose MapsTell
ButtonMore about our method
FAQ
TaglineDiscover The World of Difference
HeadingFrequently Asked Questions
Open first item
Contact
HeadingLet's get to know each other
Cards3
Select a component in the Navigator to edit its fields.
Libraryby Digitalmakers
HeroLogo wallImage sliderFeature sectionStepperCard gridCarousel cardsComparisonCentered contentFAQContactEvery component is on the page. Remove one in the Navigator to add it again.
A simplified view of how a page is put together in Webflow. Click around: add a component to the page slot, select it, remove it.
No developer in sight
MapsTell
MapsTell maps behaviour. More than 1,000 Guides in 20 countries use The World of Difference to get teams talking. The website needed to do what the map does: make something complex easy to step into, and easy to keep building on.
81
counted in the sitemap
pages live
Every one of them assembled from the same set of components.
19
section components
Counted in the source of the live pages. Each one can be dropped into any page slot.
1
library
Designed in Figma, built in Webflow and used by MapsTell's own team.
Our approach
A library, not a fixed set of pages
Challenge
MapsTell's previous website ran on a custom-built CMS. It did the job, but the team could not build new pages on their own, while they kept adding applications, client stories and countries.
A redesign alone would not fix that. The team needed to build pages themselves, without breaking the brand or the links that other tools already pointed to.
Solution
We designed the site in Figma as a system of components instead of a set of pages, and built that system in Webflow. Heroes, sliders, feature sections, steppers, card carousels and FAQ blocks are separate components, each with its own content fields.
Every page has a page slot. MapsTell's marketeer drops components into it, puts them in order and fills in the fields. Forms are built the same way, from ready-made field components, and every submission is checked for spam, tagged with its source and sent through an n8n flow into their CRM.
Result
The new mapstell.com is live. A new page no longer starts with a briefing to an agency. It starts in Webflow, with the people who know the method best.
For us it is the clearest example of how we like to build: hand over a system the client can run, and stay close for the parts that need a developer.
One library
Same blocks, twelve different pages
Every column holds real pages from mapstell.com. Different stories, the same library underneath.
Built to keep growing
Build in Webflow
The full site runs on Webflow, with Lenis for smooth scrolling and GSAP for the page transitions and micro interactions. Every block on the page is a component the MapsTell team can reuse.
Pages
It does not stop at the homepage
The method, the applications, the certification and the client stories are built from the same components as the homepage.
All recorded on the live site
Micro interactions
Five stops where the site moves
Nothing moves for show: each one helps a first-time visitor find their place. Every card sketches the idea; point at it and the recording from the live site takes over.
Point at a card
Map slider
The map artwork drifts past under the hero and follows your drag.
Stepper
ME, YOU, WE. The three levels of the method open one after the other.
Page transition
A click fades the page out and the next one in, and the new headline builds up line by line.
FAQ
Questions fold open in place, written for people and for search.
Mobile
Every component works at phone width
Each block was designed for a small screen as well. A page the team stacks together on a laptop needs no extra work to hold up on a phone.
The method
Mobile
Home
Mobile
Applications
Automation
Every form lands in the CRM
No inbox in between
01
Webflow form
Built by the team from ready-made field components.
02
SubmissionsClean
Spam check passed
Source added
Form script
Filters out spam and adds where the visitor came from.
03
Fields mapped
Passed on to the CRM
n8n flow
Maps the fields and passes the submission on.
04
Leads
Today
Waiting for a lead
S
Sam
New lead, just now
New
CRM
A new lead, ready for the team to follow up.
This demo stays on this page. Nothing you type is sent or stored.
One route
The Exploration Guide request and the contact form use the same field components. Whatever form the team adds next follows the same route into the CRM.
Handover
What the team now does without us
Five jobs that used to need a developer. Four of them now start and end with the MapsTell team.
Their site, their hands
01 / 05
Page slots
Page slot
MapsTell
Build a new page
Add components to the page slot, fill in the properties and publish.
02 / 05
Page slots
Rearrange a page
Move a component up, swap it for another or take it out. The design holds either way.
03 / 05
Forms
Form
Send
CRM
Add a form
The field components are ready, and the CRM connection comes with them.
04 / 05
CMS
DraftPublished
Publish a client story
Stories and resources live in the CMS and appear wherever the topic fits.
05 / 05
Digitalmakers
New component
Digitalmakers
Digitalmakers
Need a new component? That is where we come in
When a story needs a block that does not exist yet, we design it, build it and add it to the library.
In short
We delivered theparts,not thepages
The parts
Delivered: 19 section components, named as in the build
The pages
Theirs to build
View caseView case
%201.svg){kind=icon}