CASE STUDY 01
Quill - AI Writing Assistant
Full SaaS landing page for an AI writing tool targeting marketers, freelancers, and agency owners.
Figma
Framer
Relume
Landing page
CASE STUDY 01
Quill - AI Writing Assistant
Full SaaS landing page for an AI writing tool targeting marketers, freelancers, and agency owners.
Figma
Framer
Relume
Landing page
Client
SaaS Startup
Timeline
1 week
Tools
Figma · Framer · Relume
Type
Landing page design + development
Client
SaaS Startup
Timeline
1 week
Tools
Figma · Framer · Relume
Type
Landing page design + development
THE BRIEF
THE BRIEF
A SaaS product that needed to look like a Series A company
A SaaS product that needed to look like a Series A company
Quill is an AI writing assistant targeting freelancers, agency owners, and product marketers. The brief was to design a full landing page that communicates the product clearly, builds trust through social proof, and converts visitors to free signups — with no existing brand vision, no design system, and no website to start from.
Quill is an AI writing assistant targeting freelancers, agency owners, and product marketers. The brief was to design a full landing page that communicates the product clearly, builds trust through social proof, and converts visitors to free signups — with no existing brand vision, no design system, and no website to start from.
PROCESS
PROCESS
01
01
Centered hero with bleeding product UI
Centered hero with bleeding product UI
Creates scroll curiosity - the visitor sees enough to want to see more. Headline gets full width which makes it more impactful.
Creates scroll curiosity - the visitor sees enough to want to see more. Headline gets full width which makes it more impactful.
02
02
Indigo as the single system color
Indigo as the single system color
Signals intelligence without being cold like pure blue. Used as a single accent across every touchpoint for cohesion.
Signals intelligence without being cold like pure blue. Used as a single accent across every touchpoint for cohesion.
03
03
Dark sections as visual bookmark
Dark sections as visual bookmark
Testimonials and Call-to-Action on dark background. Two visual anchors where the eye stops - placed at the most emotionally persuasive moments.
Testimonials and Call-to-Action on dark background. Two visual anchors where the eye stops - placed at the most emotionally persuasive moments.
THE RESULT
THE RESULT
· 9 sections designed
· 9 sections designed
Hero through footer - every section planned in wireframe before touching color.
Hero through footer - every section planned in wireframe before touching color.
· 2 breakpoints
Desktop at 1440px and mobile at 402px (perfect for iPhone scrolling) - different layout logic, not just scaled down.
Desktop at 1440px and mobile at 402px (perfect for iPhone scrolling) - different layout logic, not just scaled down.
· 1 design system
· 1 design system
Color styles, text styles, and components built before designing a single section.
Color styles, text styles, and components built before designing a single section.
WHAT I LEARNED
WHAT I LEARNED
Wireframes save more time than they cost
Wireframes save more time than they cost
Every section wireframed first took half the time to design.
Every section I skipped - I
redesigned twice.
Every section wireframed first took half the time to design.
Every section I skipped - I redesigned twice.
Spacing is the hardest thing to get right
Spacing is the hardest thing to get right
I adjusted section gaps more than any other element. The 8-point grid saved me hours.
I adjusted section gaps more than any other element. The 8-point grid saved me hours.
Components pay off immediately
Components pay off immediately
Building a button component saved hours across the whole project. Updated once, it was used throughout every section.
Building a button component saved hours across the whole project. Updated once, it was used throughout every section.