Defenders
Defenders
Defenders
How I leveraged ChatGPT and Framer together to deliver a polished, production-ready MVP in just 2 weeks.
How I leveraged ChatGPT and Framer together to deliver a polished, production-ready MVP in just 2 weeks.
How I leveraged ChatGPT and Framer together to deliver a polished, production-ready MVP in just 2 weeks.
Investment
Investment
Investment
Mobile banking
Mobile banking
Mobile banking
Project overview
Project overview
In an era where personal safety concerns are escalating, traditional security options often fall short — especially for solo commuters, working women, students, and travelers. There's a noticeable gap in the market for immediate, trustworthy, and on-demand security services. Defenders was envisioned as a response to this need: an Uber-like platform to instantly book verified personal security professionals.
In an era where personal safety concerns are escalating, traditional security options often fall short — especially for solo commuters, working women, students, and travelers. There's a noticeable gap in the market for immediate, trustworthy, and on-demand security services. Defenders was envisioned as a response to this need: an Uber-like platform to instantly book verified personal security professionals.
My role
My role
I led the end-to-end design and development of the website — from information architecture and copywriting to visual creation and Framer implementation. I collaborated with another designer who handled stakeholder communication and supported content brainstorming.
I led the end-to-end design and development of the website — from information architecture and copywriting to visual creation and Framer implementation. I collaborated with another designer who handled stakeholder communication and supported content brainstorming.
Strategy & Planning
Strategy & Planning
We began by clarifying the target audience (solo travelers, women, students, etc.) and their core concerns around safety and trust. Our goal was to:
We began by clarifying the target audience (solo travelers, women, students, etc.) and their core concerns around safety and trust. Our goal was to:
•
•
Build empathy with real-world use cases
Build empathy with real-world use cases
•
•
Emphasize speed, verification, and professionalism
Emphasize speed, verification, and professionalism
•
•
Guide the user through a story that ends in action: joining the waitlist
Guide the user through a story that ends in action: joining the waitlist
ChatGPT helped generate not only content but also content structure, and we built our flow around a user-centric narrative.
ChatGPT helped generate not only content but also content structure, and we built our flow around a user-centric narrative.
Information Architecture
Information Architecture
The site was designed as a single-scroll landing page to reduce cognitive load and maintain user momentum.
The site was designed as a single-scroll landing page to reduce cognitive load and maintain user momentum.
The site was designed as a single-scroll landing page to reduce cognitive load and maintain user momentum.
The flow follows Problem → Solution → Trust → Action logic, optimized to educate and convert.
The flow follows Problem → Solution → Trust → Action logic, optimized to educate and convert.
The flow follows Problem → Solution → Trust → Action logic, optimized to educate and convert.
Development process
Development process
Wireframes in Figma
Wireframes in Figma
•
•
Low-fidelity flows for layout review
Low-fidelity flows for layout review
•
•
Used to finalize structure before committing to build
Used to finalize structure before committing to build
Build in Framer
Build in Framer
•
•
All design and interactivity implemented in Framer
All design and interactivity implemented in Framer
•
•
Leveraged scroll effects, hover interactions, sticky CTAs
Leveraged scroll effects, hover interactions, sticky CTAs
•
•
Handled all responsive design manually via breakpoints
Handled all responsive design manually via breakpoints
•
•
Used native Framer modules (forms, toggles, CMS blocks)
Used native Framer modules (forms, toggles, CMS blocks)
AI-powered workflow
AI-powered workflow
Content Generation (ChatGPT)
Content Generation (ChatGPT)
•
•
Used for headline ideas, tone definition, value prop breakdowns
Used for headline ideas, tone definition, value prop breakdowns
•
•
Drafted all microcopy and FAQs in ChatGPT before refinement
Drafted all microcopy and FAQs in ChatGPT before refinement
•
•
Helped generate layout content flow ideas (e.g., "3-step usage", pain points)
Helped generate layout content flow ideas (e.g., "3-step usage", pain points)
ChatGPT wasn’t just a writing tool — it helped co-structure the entire user journey
ChatGPT wasn’t just a writing tool — it helped co-structure the entire user journey
Visual imagery (Midjourney + ChatGPT)
Visual imagery (Midjourney + ChatGPT)
•
•
Midjourney was used to create localized, cinematic-style security visuals
Midjourney was used to create localized, cinematic-style security visuals
•
•
ChatGPT helped us craft consistent prompts (lighting, setting, attire)
ChatGPT helped us craft consistent prompts (lighting, setting, attire)
•
•
Iterated several times to avoid generic or stock-like imagery
Prompting was everything — we treated it like art direction, not automation.
Section Breakdown
Engagement strategy
Engagement strategy
This flow follows the AIDA model: Attention → Interest → Desire → Action, and each section of the website was crafted to fulfill a distinct purpose within this funnel:
This flow follows the AIDA model: Attention → Interest → Desire → Action, and each section of the website was crafted to fulfill a distinct purpose within this funnel:
Attention: The hero section immediately grabs attention with a bold headline, supported by a cinematic visual and a clear CTA.
Interest: The "About the App" and "Use Cases" sections sustain interest by explaining how the product works and where it fits into the user’s life, using relevant scenarios and emotionally resonant storytelling.
Desire: The "Why We Built Defenders," "How It Works," and "Features" sections build desire by showing what makes the service trustworthy, fast, and different. The visuals and testimonials reinforce this.
Action: The sticky CTA and final call-to-action encourage users to join the waitlist with minimal friction, backed by everything they’ve seen so far
Attention: The hero section immediately grabs attention with a bold headline, supported by a cinematic visual and a clear CTA.
Interest: The "About the App" and "Use Cases" sections sustain interest by explaining how the product works and where it fits into the user’s life, using relevant scenarios and emotionally resonant storytelling.
Desire: The "Why We Built Defenders," "How It Works," and "Features" sections build desire by showing what makes the service trustworthy, fast, and different. The visuals and testimonials reinforce this.
Action: The sticky CTA and final call-to-action encourage users to join the waitlist with minimal friction, backed by everything they’ve seen so far
Results & impact
Results & impact
•
•
Delivered in 14 days
Delivered in 14 days
•
•
Client/stakeholder approved with minimal revision
Client/stakeholder approved with minimal revision
•
•
Fully mobile responsive
Fully mobile responsive
•
•
Avg. session time: 2m 14s
Avg. session time: 2m 14s
•
•
Waitlist signups (first 10 days): 83
Waitlist signups (first 10 days): 83
•
•
Repeat visitors: 22%
Repeat visitors: 22%
Let’s create beautiful
things together.
Let’s create beautiful
things together.
Let’s create beautiful
things together.
Let’s create beautiful
things together.