Thirty Days to MVP — A Cinematic, Scroll-Driven Storytelling Website Illustrating a 30-Day Product Launch Blueprint
Thirty Days to MVP — A Cinematic, Scroll-Driven Storytelling Website Illustrating a 30-Day Product Launch Blueprint
Thirty Days to MVP — A Cinematic, Scroll-Driven Storytelling Website Illustrating a 30-Day Product Launch Blueprint
Thirty Days to MVP — A Cinematic, Scroll-Driven Storytelling Website Illustrating a 30-Day Product Launch Blueprint
01 — Introduction
01 — Introduction
01 — Introduction
01 — Introduction
01 — Introduction
Thirty Days to MVP is an interactive storytelling website designed to visually narrate how an idea transforms into a working product within 30 days.
The website uses scroll-driven animations, cinematic section transitions, and a chapter-based narrative format to simplify complex product building concepts.
In a world where early founders struggle with clarity, execution, and direction, Thirty Days translates the entire MVP journey into a high-impact digital experience turning abstract product workflows into immersive visual metaphors and interactive “machines”.
Thirty Days to MVP is an interactive storytelling website designed to visually narrate how an idea transforms into a working product within 30 days.
The website uses scroll-driven animations, cinematic section transitions, and a chapter-based narrative format to simplify complex product building concepts.
In a world where early founders struggle with clarity, execution, and direction, Thirty Days translates the entire MVP journey into a high-impact digital experience turning abstract product workflows into immersive visual metaphors and interactive “machines”.
Thirty Days to MVP is an interactive storytelling website designed to visually narrate how an idea transforms into a working product within 30 days.
The website uses scroll-driven animations, cinematic section transitions, and a chapter-based narrative format to simplify complex product building concepts.
In a world where early founders struggle with clarity, execution, and direction, Thirty Days translates the entire MVP journey into a high-impact digital experience turning abstract product workflows into immersive visual metaphors and interactive “machines”.
About the project
About the project
Company
Thirty Days to MVP - Dubai
Timeline
April 2025 – Ongoing
Role
Lead Product Designer & Interaction Designer
I led the entire experience from concept development, motion direction, and storyboarding to
UI design, GSAP sequencing, and prototype building.
I led the end-to-end product design process
from research, strategy, and UX architecture to
interface design and MVP development.
This included stakeholder alignment, usability,
testing, and continuous iteration based on
early pilot feedback.
I led the end-to-end product design process
from research, strategy, and UX architecture to
interface design and MVP development.
This included stakeholder alignment, usability,
testing, and continuous iteration based on
early pilot feedback.
Team
-01 Lead Product Designer
-01 UI Designer
-01 Front-End Developer
-01 Creative Strategist
02 — My Design Approach
02 — My Design Approach
02 — My Design Approach
02 — My Design Approach
02 — My Design Approach
Unlike traditional UX projects, Thirty Days required a cinematic + UX hybrid mindset.
The approach centered on three pillars:
Unlike traditional UX projects, Thirty Days required a cinematic + UX hybrid mindset.
The approach centered on three pillars:
Unlike traditional UX projects, Thirty Days required a cinematic + UX hybrid mindset.
The approach centered on three pillars:
1. Storytelling First
Every scroll movement drives the story forward.
Each chapter (Day 01 → Day 30) visualizes a major milestone in product creation.
2. Motion-Led Experience
GSAP scenes, parallax layers, character movements, and 3D elements are choreographed like a film—each transition guides emotion and understanding.
3. Visual Metaphors as “Machines”
Ideas move through machines, pipelines, and workstations that represent real product processes:
Ideation
Wireframing
Validation
Prototyping
Development
Launch
1. Storytelling First
Every scroll movement drives the story forward.
Each chapter (Day 01 → Day 30) visualizes a major milestone in product creation.
2. Motion-Led Experience
GSAP scenes, parallax layers, character movements, and 3D elements are choreographed like a film—each transition guides emotion and understanding.
3. Visual Metaphors as “Machines”
Ideas move through machines, pipelines, and workstations that represent real product processes:
Ideation
Wireframing
Validation
Prototyping
Development
Launch
1. Storytelling First
Every scroll movement drives the story forward.
Each chapter (Day 01 → Day 30) visualizes a major milestone in product creation.
2. Motion-Led Experience
GSAP scenes, parallax layers, character movements, and 3D elements are choreographed like a film—each transition guides emotion and understanding.
3. Visual Metaphors as “Machines”
Ideas move through machines, pipelines, and workstations that represent real product processes:
Ideation
Wireframing
Validation
Prototyping
Development
Launch
This creates a tangible and playful representation of product building.
This creates a tangible and playful representation of product building.
This creates a tangible and playful representation of product building.
03 — Challenge
03 — Challenge
03 — Challenge
03 — Challenge
03 — Challenge
What Was the Problem?
What Was the Problem?
What Was the Problem?
Product strategy content is dry.
New founders get overwhelmed with:
Too many frameworks
Zero clarity
No visual understanding
Lack of excitement or motivation
They prefer visual learning, but 95% of online content is text-heavy.
Product strategy content is dry.
New founders get overwhelmed with:
Too many frameworks
Zero clarity
No visual understanding
Lack of excitement or motivation
They prefer visual learning, but 95% of online content is text-heavy.
Product strategy content is dry.
New founders get overwhelmed with:
Too many frameworks
Zero clarity
No visual understanding
Lack of excitement or motivation
They prefer visual learning, but 95% of online content is text-heavy.
What Are We Solving?
What Are We Solving?
What Are We Solving?
We aimed to build a new format of learning for founders:
A visual journey instead of walls of text
Story-driven thinking instead of lectures
Motion-based clarity
A fun, narrative experience that keeps users hooked
The challenge was merging design, motion, and education into one smooth digital storyline.
We aimed to build a new format of learning for founders:
A visual journey instead of walls of text
Story-driven thinking instead of lectures
Motion-based clarity
A fun, narrative experience that keeps users hooked
The challenge was merging design, motion, and education into one smooth digital storyline.
We aimed to build a new format of learning for founders:
A visual journey instead of walls of text
Story-driven thinking instead of lectures
Motion-based clarity
A fun, narrative experience that keeps users hooked
The challenge was merging design, motion, and education into one smooth digital storyline.
04 — Concept Development Process
04 — Concept Development Process
04 — Concept Development Process
04 — Concept Development Process
04 — Concept Development Process
We followed a simplified creative process:
We followed a simplified creative process:
We followed a simplified creative process:
05 — Research & Creative Insights
05 — Research & Creative Insights
05 — Research & Creative Insights
05 — Research & Creative Insights
05 — Research & Creative Insights
05 — Research & Creative Insights
Research Methodology
Research Methodology
Research Methodology
Scroll-based cinematic interactions
Awwwards and FWA award-winning websites
Motion-as-content systems
Product education tools (Basecamp, Notion, Webflow)
Narrative UX patterns
Key insights:
Key insights:
Key insights:
Motion should guide comprehension, not distract
Narrative must unfold linearly
Always keep scroll → story → action linked
Avoid heavy blocks of text; use micro-chunking
User Surveys: Key Pain Points in Home Service Apps
User Surveys: Key Pain Points in Home Service Apps
User Surveys: Key Pain Points in Home Service Apps
User Surveys: Key Pain Points in Home Service Apps
User Surveys: Key Pain Points in Home Service Apps
06 — Users & Personas
06 — Users & Personas
06 — Users & Personas
06 — Users & Personas
06 — Users & Personas
06 — Users & Personas
Who Are the Users?
Who Are the Users?
Who Are the Users?
Primary Audience
Primary Audience
Primary Audience
Primary Audience
First-time founders looking for guidance.
First-time founders looking for guidance.
First-time founders looking for guidance.
Secondary Audience
Secondary Audience
Secondary Audience
Designers, developers, and creators who love interactive storytelling.
Designers, developers, and creators who love interactive storytelling.
Designers, developers, and creators who love interactive storytelling.
What They Need
What They Need
What They Need
A simple breakdown of complex processes
Engaging visuals that reduce cognitive load
Motivation and clarity
Shareable content
Fast understanding
A simple breakdown of complex processes
Engaging visuals that reduce cognitive load
Motivation and clarity
Shareable content
Fast understanding
A simple breakdown of complex processes
Engaging visuals that reduce cognitive load
Motivation and clarity
Shareable content
Fast understanding
06 — Experience Goals
06 — Experience Goals
06 — Experience Goals
06 — Experience Goals
06 — Experience Goals
06 — Experience Goals
Expected Experiences
Expected Experiences
Expected Experiences
Make learning cinematic
Turn the product-building journey into a narrative
Create emotional engagement using transitions
Break complexity into simple, scroll-based modules
Use visuals to explain product thinking
Make learning cinematic
Turn the product-building journey into a narrative
Create emotional engagement using transitions
Break complexity into simple, scroll-based modules
Use visuals to explain product thinking
Make learning cinematic
Turn the product-building journey into a narrative
Create emotional engagement using transitions
Break complexity into simple, scroll-based modules
Use visuals to explain product thinking
08 — Narrative Structure
08 — Narrative Structure
08 — Narrative Structure
08 — Narrative Structure
08 — Narrative Structure
08 — Narrative Structure
09 — Flow & Interaction Map
09 — Flow & Interaction Map
09 — Flow & Interaction Map
09 — Flow & Interaction Map
09 — Flow & Interaction Map
10 — Wireframes / Motion Blocks
10 — Wireframes / Motion Blocks
10 — Wireframes / Motion Blocks
10 — Wireframes / Motion Blocks
10 — Wireframes / Motion Blocks
Understanding the Market Landscape
Understanding the Market Landscape
Understanding the Market Landscape
Before designing Kayan, I analyzed key players in the home service industry across the Middle East and global markets. The goal was to understand how users discover, book, and trust service providers — and to identify gaps in usability, clarity, and localization that Kayan could improve upon.
Before designing Kayan, I analyzed key players in the home service industry across the Middle East and global markets. The goal was to understand how users discover, book, and trust service providers — and to identify gaps in usability, clarity, and localization that Kayan could improve upon.
Before designing Kayan, I analyzed key players in the home service industry across the Middle East and global markets. The goal was to understand how users discover, book, and trust service providers — and to identify gaps in usability, clarity, and localization that Kayan could improve upon.
10 — Wireframe
We develop the user flow to know the apps screens to see the future flows and organize the ideas that we had for the app.
10 — Wireframe
We develop the user flow to know the apps screens to see the future flows and organize the ideas that we had for the app.
10 — Wireframe
We develop the user flow to know the apps screens to see the future flows and organize the ideas that we had for the app.
10 — Wireframe
We develop the user flow to know the apps screens to see the future flows and organize the ideas that we had for the app.
10 — Wireframe
We develop the user flow to know the apps screens to see the future flows and organize the ideas that we had for the app.
10 — Wireframe
We develop the user flow to know the apps screens to see the future flows and organize the ideas that we had for the app.
The user flow outlines the complete journey from discovery to service completion ensuring a seamless experience for every household using Kayan.
The user flow outlines the complete journey from discovery to service completion ensuring a seamless experience for every household using Kayan.
The user flow outlines the complete journey from discovery to service completion ensuring a seamless experience for every household using Kayan.
09 — Flow & Interaction Map
09 — Flow & Interaction Map
12 — Rejected Designs
12 — Rejected Designs
12 — Rejected Designs
12 — Rejected Designs
12 — Rejected Designs
11 — Selected Designs
11 — Selected Designs
11 — Selected Designs
11 — Selected Designs
11 — Selected Designs
11 — Rejected Design
12 — Selected Designs
12 — Selected Designs
13 — Usbaility Study
13 — Usbaility Study
13 — Usbaility Study
13 — Usbaility Study
13 — Usbaility Study
13 — Impact
Testing the Experience with Real Homemakers
Testing the Experience with Real Homemakers
Testing the Experience with Real Homemakers
Quantitative
Increased engagement by 3× compared to typical educational pages
Average scroll depth reached 85% (vs. standard 40–50%)
To ensure Kayan feels intuitive and trustworthy for everyday users, I conducted early usability testing sessions with homemakers in Kuwait. Participants interacted with the prototype via Google Meet while sharing their feedback on the booking flow, service discovery, and payment transparency. These sessions revealed small friction points — such as unclear service categories and pricing hierarchy — which helped refine the overall UX before development.
Qualitative
Users described the journey as “fun, impactful, easy to remember”
The format dramatically simplified complex product concepts
Achieved a design style capable of competing in award circuits (Awwwards/FWA)
Observing homemakers test the Kayan prototype remotely — gathering authentic insights that shaped a more accessible and reliable home-service experience.
Observing homemakers test the Kayan prototype remotely — gathering authentic insights that shaped a more accessible and reliable home-service experience.
Observing homemakers test the Kayan prototype remotely — gathering authentic insights that shaped a more accessible and reliable home-service experience.
Observing homemakers test the Kayan prototype remotely — gathering authentic insights that shaped a more accessible and reliable home-service experience.
Observing homemakers test the Kayan prototype remotely — gathering authentic insights that shaped a more accessible and reliable home-service experience.
Observing homemakers test the Kayan prototype remotely — gathering authentic insights that shaped a more accessible and reliable home-service experience.
13 — Final Version Fidelity Design
13 — Final Version Fidelity Design
13 — Final Version Fidelity Design
13 — Final Version Fidelity Design
13 — Final Version Fidelity Design
13 — Impact
13 — Impact
13 — Impact
13 — Impact
13 — Impact
14 — Reflection
A tool designed to make home services faster, safer, and more trusted.
A tool designed to make home services faster, safer, and more trusted.
A tool designed to make home services faster, safer, and more trusted.
What I Learned
After developing the first interactive prototype of Kayan, we conducted usability sessions with a small group of homeowners and service providers in Kuwait City.
The goal was to validate our assumptions around navigation clarity, trust indicators, and bilingual interaction (Arabic ↔ English).
During the tests, users found the booking flow and real-time tracking screen the most intuitive parts of the experience. However, they suggested clearer cues for service verification and pricing transparency, which led us to refine several UI elements and micro-interactions.By gathering feedback early, we were able to enhance accessibility, streamline onboarding, and ensure that every key interaction felt familiar and frictionless to our diverse audience.
How to design content as motion
Crafting linear narratives with GSAP
Building emotional transitions
Simplifying complexity visually
What I Learned
How to design content as motion
Crafting linear narratives with GSAP
Building emotional transitions
Simplifying complexity visually
12 — Design Guide
12 — Design Guide
12 — Design Guide
12 — Design Guide
12 — Design Guide
Contact
Contact
Ifyourbrandfeelsoutdated,yourwebsiteisn’tperformingasitshould,oryou’rereadytolevelupyourdigitalpresenceI’mheretohelpyoudesignsomethingthattrulystandsout.
Ifyourbrandfeelsoutdated,yourwebsiteisn’tperformingasitshould,oryou’rereadytolevelupyourdigitalpresenceI’mheretohelpyoudesignsomethingthattrulystandsout.
Reach out today to get a clear plan, honest advice, and support from someone who cares about your project as much as you do. Whether you prefer a quick call or a simple email, getting started is easy.
Contact
Ifyourbrandfeelsoutdated,yourwebsiteisn’tperformingasitshould,oryou’rereadytolevelupyourdigitalpresenceI’mheretohelpyoudesignsomethingthattrulystandsout.
Reach out today to get a clear plan, honest advice, and support from someone who cares about your project as much as you do. Whether you prefer a quick call or a simple email, getting started is easy.
© 2025 Mohammed Shijas. All rights reserved.
© 2025 Mohammed Shijas. All rights reserved.
© 2025 Mohammed Shijas. All rights reserved.