MapOut is a career enablement startup helping job seekers navigate their career journey with personalised guidance and expert mentorship. They needed a flagship brand page one that didn’t just inform, but emotionally connected with first-time users, reflected their brand values, and brought trust to the forefront.
I was brought in to conceptualise and design their brand story into a scroll-based narrative website one that subtly mapped the user’s own job journey as they scrolled through it. The focus was to create high recall while maintaining clarity, motion, and modernity.
Process:
This project demanded a mix of narrative thinking and visual systems design. Here's how I approached it:
Started with a deep dive into the brief's vision, their tone of voice, and how they define career transformation.
Mapped out competitive brand pages from edtech, coaching, to recruitment identifying gaps in tone, UX, and emotional connection.
Crafted a scroll-based content framework, mimicking a user's inner dialogue during career confusion
Created section-wise story arcs (intro → problem → journey → mentors → outcomes)
Applied a modular design structure to enable reusability across campaigns.
Designed on Figma to explore real-time interactions, transitions, and animation feasibility.
Problem:
MapOut was struggling with two core issues:
Lack of brand clarity: Their old landing pages didn’t communicate who they were or what they stood for.
Low trust and recall: First-time users left without understanding the platform’s long-term value or vision.
The brand needed a cohesive narrative page that established trust, communicated value clearly, and reflected a bold, confident, mentorship-first identity.
Solution:
I designed a visually immersive, scroll-based brand page that mirrored the emotional stages of career confusion to clarity.
Core interventions:
Built the entire flow around narrative UX each scroll section feels like a natural progression in a user's thought process.
Used strong typography and whitespace to anchor attention while avoiding overwhelm.
Introduced trust anchors: mentor highlights, real-life success stats, and expert-led content blocks.
Embedded microinteractions and subtle scroll-based reveals to make the journey feel alive.
Integrated Call-to-Actions (CTAs) that feel contextual not pushy at critical reflection points in the scroll.
The result was not just a website, but a brand story that moved with the user.
Result:
Average scroll depth increased by 3x users were engaging with all sections instead of dropping mid-page.
First impressions improved significantly: internal testing saw a 40% jump in brand clarity recall.
Stakeholders used the brand page as a pitching deck substitute it conveyed vision better than a static deck.
Figma's interactive prototype allowed faster feedback loops and final development with minimal friction.
