Introduction
Most research websites speak the language of data. MindMarket has chosen to speak the language of the people. MindMarket’s website redesign wasn’t just about visual reinvention. It was about translating an intangible business value – human understanding – into something visible, navigable and structurally sound.
The challenge was not to explain what qualitative research is, but to make it tangible. The result is a website where brand strategy, design and front-end engineering are inextricably linked. Not layered, interlocking.
The wire as a strategic instrument
The core of the project consists of one idea: the wire.
Not a metaphor added after the fact, but a guiding principle that shaped brand expression, UX logic and technical execution. The common thread represents MindMarket’s role as a connector: between companies and consumers, between cultures, between raw conversations and actionable insights.
On the homepage, the thread becomes the narrative backbone. It guides the scroll, connects sections and creates continuity in otherwise complex content. From a UX perspective, it functions as orientation. From a brand perspective, it becomes a visual signature. From a technical perspective, it creates a repeatable interaction pattern that can scale with the content.
This is where brand strategy goes beyond messaging and becomes interface logic.
Human energy, precision engineered
MindMarket’s work is rooted in real conversations. The site had to reflect that reality, without resorting to clichés or corporate gloss.
The visual system leans toward warmth and expressiveness: bold colors, custom, hand-drawn illustrations, and animated characters that feel intentional rather than decorative. Importantly, none of this relies on stock photos or AI-generated imagery. Each illustration is created to enhance diversity, curiosity and imperfection – qualities that are central to qualitative research.
From a technical perspective, movement was handled deliberately. Animations are made to create rhythm, not distraction. Scroll-based transitions are smooth to maintain readability while adding a sense of progression. The energy of the site is not driven by constant movement, but by timing.
This balance required close collaboration between design and development. Motion elements were treated as part of the content flow, not as separate layers applied at the end.
Front-end decisions that serve the story
The technical architecture is designed to support three core priorities: performance, scalability, and narrative clarity.
- Purposeful movement
Interactive elements and animations were only implemented where they reinforced the meaning. The thread itself acts as a structural animation, guiding users without interrupting the cognitive flow. - Performance-conscious implementation
Despite the rich illustrations and movements, the site remains lightweight. Assets are optimized and animations tuned to avoid unnecessary repaints or layout shifts, ensuring consistent performance across devices and regions.
- Scalable content structure
The site is built to grow with MindMarket’s editorial ambitions. Case studies, insights, and long-form content reside in a flexible system that maintains hierarchy and brand coherence as new pages are added.
- SEO without compromises
Narrative storytelling and search visibility were treated as complementary, not opposing, goals. Content is semantically structured, allowing rich texts to coexist with a clear UX and strong findability.
The development choices are largely invisible – and that is exactly the point. The technology never competes with the message. It supports it calmly, confidently and consistently.
The scroll-driven path animation
On the homepage, the thread isn’t just there. It unfolds.
As you scroll, a path gradually unfolds across the page, leading you through MindMarket’s story with a kind of gentle momentum. It’s subtle, but structural: both a navigational gesture and a visual gesture.
Each illustration placed along that path is a Rive animationonly activated when it comes into view using a Crossroads observer. Nothing runs unnecessarily. Movement is treated as pacing, not decoration.
What makes this system deceptively complex is how manual it had to be. Each artwork and SVG was hand-positioned over breakpoints to maintain rhythm, spacing, and continuity. In total contains the home page 85 animated and static elementscarefully placed one by one. No AI shortcuts. Just patience and precision.
To create depth, the thread is built up using three layered paths:
- MainPath (this.$mainPath): the starting layer
- Secondary Path (this.$secondaryPath): the final layer
- Shadow Path: sits between the two to add depth
The secondary path’s sole purpose is to display above the gradient shadow, keeping the layers visually distinct as the animation unfolds.
createTimeline() {
// We create and pause the timeline because it will be controlled by scroll.
this.masterTimeline = gsap.timeline({ paused: true });
// Beginning path (in green in the demo)
this.masterTimeline.fromTo(
this.$mainPath,
{ drawSVG: '5%' },
{
drawSVG: '100%',
ease: CustomEase.create('custom', 'M0,0 C0.952,0.017 0.744,0.69 1,1'),
duration: 0.9
}
);
// End of the path (in blue in the demo)
this.masterTimeline.fromTo(
this.$secondaryPath,
{ drawSVG: '0%' },
{ drawSVG: '100%', ease: 'none', duration: 1 }
);
// The shadow fading in when the secondary path overlaps the main path
this.masterTimeline.fromTo(
this.$shadowPath,
{ opacity: 0 },
{ opacity: 1, ease: 'none', duration: 0.15 },
0.95
);
}
Scrolling synchronization
Locomotive Scroll lets us know exactly when the timeline enters the viewport. It emits custom events with a normalized progress value (from 0 to 1), making it perfect for driving animations.
We simply pass that progress along to the GSAP timeline:
This keeps the path perfectly tailored to the user’s movements, so the drawing feels responsive rather than pre-written.
And ultimately, that’s what makes it work: not a single tool, but how it all comes together: scrolling progression, hand-placed visuals, layered paths, and carefully tuned easing.
Where strategy, design and code are aligned
What distinguishes the MindMarket website is not a single interaction or visual moment, but the discipline of coordination.
Brand strategy defined the idea.
Design shaped it. Front-end development turned it into a sustainable system.
The result is a digital experience that not only describes qualitative research. It behaves like this. It listens. It guides. It connects. And it leaves room for meaning.
In an industry often dominated by abstraction and dashboards, MindMarket’s website proves that clarity, humanity and technical accuracy can coexist and that sometimes the strongest interfaces are the ones that know when to step back and let the story breathe.
Tech stack
- Astro: Front-end framework that powers the site
- CMS: DatoCMS for content management
- Apply: Netlify with the Cache-Tag caching strategy
- Styling: CSS with tailwind
- River: Illustrations and micro-animations
- GSAP: Core animation engine, using DrawSVGPlugin for smooth line animations
- Locomotive role: Lightweight scroll library for modern web experiences, built on top of Lenis
About KOKI-KIKO
ANGLE FLASH is a small studio, run by two, powered by many. We believe in the magic of tailor-made teams, putting together the perfect mix of talent for each unique project. We build holistic experiences where strategy, brand, design, motion, and code work together as one system, not as separate layers. The result is products that not only catch the eye, but also truly connect to the real world through experiences that feel cohesive, human and alive. ✌️
Credits
Brand and digital strategy: Kim Levan
Creative direction brand and web: Louis Paquet
Web design: Louis Paquet, Marie-Christine Dion, Pier-Luc Cossette
Web development: Deven Caron, Pier-Luc Cossette
Project management: Kim Levan
Illustrations: Spencer Gabor
#MindMarket #Case #Study