Redesigning an AI SaaS Landing Page to Drive +35% Higher Trial Signups.
A deep-dive case study showing how user empathy research, high-contrast visual hierarchy, and a scalable Figma component system transformed a complex AI video editing tool into a seamless, high-converting digital experience.
Diagnosing Friction & Architecting the UX Solution.
Bridging the gap between complex AI video tech and an intuitive, friction-free landing page user experience.
Why the Original Landing Page Was Underperforming
The original layout was overloaded with technical AI jargon. Visitors could not quickly grasp what the product actually did within the first 3 seconds.
Desktop artboards were shrunk down without mobile-first padding or touch-target optimization, leading to tiny text and unclickable CTA buttons.
No video output samples or interactive tool previews were shown above the fold, forcing users to read long paragraphs before trusting the tool.
The User-Centric Figma UI Redesign Strategy
Crafted a clear H1 headline (*"Turn Text Scripts Into Studio-Quality Videos"*), concise sub-text, and a high-contrast primary CTA button.
Designed a prominent UI mockup container displaying an active video rendering timeline, immediately establishing visual proof of product quality.
Engineered dedicated 375px mobile artboards with fluid typography scales, 48px+ button touch zones, and WCAG AA contrast compliance.
Grounded in Google UX Design Protocols.
Every design decision in this case study was validated through user research, iterative wireframing, and accessibility testing.
User Empathy & Persona Research
Interviewed SaaS creators and agency marketers to map user friction points. Identified that 72% of visitors wanted immediate visual proof of rendering speed before signing up.
Information Architecture & Flow
Architected a high-converting 6-section landing page hierarchy: Hero -> Social Proof Strip -> Interactive Preview -> Feature Cards -> Testimonials -> FAQ -> Primary CTA.
Low-Fidelity Grayscale Wireframes
Built rapid grayscale wireframes in Figma to validate section spacing, visual weight, and CTA button placement prior to visual branding polish.
WCAG AA Accessibility Audit
Audited color contrast ratios (minimum 4.5:1), touch-target dimensions (minimum 48x48px on mobile), and legible font scaling across all breakpoints.
A Scalable Figma Design System.
Constructed using atomic design methodology to ensure consistency, rapid iteration, and clean developer handoff.
Global Color Tokens & Typography Scale
Built a 9-tier color token system (Brand Primary #FD6F00, Dark Neutral #0D0E11, Contrast Accent #8B5CF6) paired with an 8pt fluid typography scale.
Auto-Layout 5.0 Component Variants
Created modular component variants for primary buttons, form inputs, pricing cards, and video timeline controls with interactive state properties.
Multi-Breakpoint Artboard System
Engineered desktop (1440px) and mobile (375px) artboards ensuring seamless handoff for Webflow or React developers without layout ambiguity.
Figma Component Library Available
Interested in exploring the full Figma artboards and component variants for your project?
Live Conversion Results & Client Feedback.
Quantifiable improvements measured across live analytics following the Figma UI redesign deployment.
Free Trial Signups
Conversion rate increased from 2.1% to 2.84% within 30 days post-redesign.
Mobile Bounce Rate
Mobile visitor retention jumped significantly thanks to responsive 375px artboards.
Client Rating
Delivered on schedule with 100% client satisfaction and repeat contract extension.
"Aqsa completely transformed our AI SaaS landing page. Her Google UX approach simplified our value proposition so clearly that our free trial signups jumped by 35% within the first month. Communicative, insanely skilled, and delivered a production-ready Figma design system!"
Marcus Vance
Co-Founder & Head of Growth, CreateVideo AI — 🇺🇸 San Francisco, CA
Explore Next Case Study & Related Services
Discover relevant case studies, complementary service offerings, and project capabilities.
Web UI/UX Design Services
Explore full capabilities for Figma landing page wireframing, component design systems, & prototypes.
Solar Energy Webflow System Case Study
See how an end-to-end Figma to Webflow CMS build generated +210% consultations.
Services Overview Hub
Compare all 3 core service offerings, deliverables, turnarounds, and pricing matrix.
Have an Awesome Project Idea? Let’s Discuss.
Whether you need a custom Figma landing page, a Webflow site conversion, or high-engagement social media graphics, I'm ready to bring your vision to life.