Making support feel like a conversation
A complete landing page, visual identity, and design system for HelpFlow AI - an AI-powered customer support platform. One designer, three days, nothing handed off half-finished.
A product that needed to earn trust before asking for a signup
The task was clear on the surface - design a landing page for HelpFlow AI, an AI-powered help desk targeting startup founders and customer support teams. The goal: waitlist signups.
But the real brief underneath? Make a stranger trust an AI product enough to hand over their email address. That's a harder problem. And it starts before a single pixel is placed.
Design constraint: "Warm + professional" visual direction. 3-day deadline. Deliverables: high-fidelity desktop, mobile responsive, design system, OG image, logo variants, and component library.
Who I designed for
Three distinct users shaped every decision on this page:
Results-oriented, time-poor. Need to feel the value before they read the headline. They scroll fast and decide faster.
Practical, process-driven. They evaluate tools by how well features map to their existing workflow - not by aesthetics.
Exploring AI tools. Need reassurance and clarity over excitement. Trust before transaction.
Every user needed to feel three things in order - this is credible, this solves my problem, this is worth my email.
Warm + professional doesn't mean add warm colors
The brief asked for warm and professional. My first instinct as a storyteller was - this is a feeling, not a color instruction. Designing literally warm means oranges, ambers, and corals alongside blue. That creates visual competition. Two dominant personalities fighting for the user's attention.
"One warm moment, used intentionally, is more powerful than two competing ones."
So I made a deliberate split. Blue as the professional foundation - the dominant trust signal in B2B SaaS. Intercom, Zendesk, Freshdesk all anchor in blue for exactly this reason. And a purple-to-blue gradient as the single warm accent - used in two specific moments only.
The Color System
#2563EB
#152E63
Accent
#F6F9FF
#16A34A
#EAB308
#FB3748
Semantic colors aren't decorative - they carry meaning across every state. Red for urgent alerts and error states. Yellow for warnings and scheduled follow-ups. Green for resolved tickets and success confirmations. Each mapped intentionally to real product moments, not just added because every design system has them.
Where the accent actually lands
Two moments only, as promised - the closing CTA and the hero's dashed AI-thinking line. Nowhere else. If a color shows up everywhere, it stops meaning anything.
The OG Image - A Deliberate Split
The OG image uses a dark, moody, abstract 3D aesthetic - deliberately different from the landing page. This was strategic, not inconsistent.
The OG image's job is to stop the scroll on LinkedIn or in a Slack preview. The landing page's job is to convert attention into a signup. Two different jobs. Two different visual languages. One brand connecting them.
The typeface had to feel technically credible
Geist was chosen for three specific reasons - it has technical DNA that matches an AI product, it holds legibility at small sizes critical for component text, and its geometric structure communicates modern professionalism without coldness.
Applied to real copy, not filler text
A specimen only proves so much. Here's the scale set against the actual page copy - the words a visitor would read in order.
Type Scale Decisions
Hero headline only. Maximum visual authority. Sets brand personality before anything is read.
Section headings. Clear hierarchy without competing with H1.
Lead paragraphs. Line height at 1.4x ratio - the minimum for comfortable reading on web.
General interface text. Standard readable size for SaaS products across all screen densities.
System first. Screens second.
Before designing a single screen, I built the complete design system. This was a deliberate decision - not a checkbox exercise. A system created before screens ensures every decision is consistent, developer-ready, and scalable.
for all spacing
categories
scale levels
documented
Developer-Ready Thinking
Every layer in every component is named. Not "Rectangle 24" - but btn-primary/hover, card-feature/default, nav-item/active. This bridges the gap between design and development without a lengthy handoff call.
I've converted my own designs to functioning websites. That experience - wondering what to name a div, feeling the friction of a poorly structured file - taught me that conversion is as important as designing. That thinking lives in every component I build.
Component States
Every interactive component was documented with states - not just the default appearance. Button hover, focus rings for WCAG accessibility, disabled states, and loading states for the primary CTA. Because a component without states isn't a component - it's a screenshot.
Six features, one panel - not six cards
The first version of this section did what most SaaS pages do: an icon, a label, one line, repeated six times in a grid. It's easy to build and easy to ignore. Nobody remembers a wall of icons.
So the feature list became a tabbed module instead - AI Chat Assistant, Ticket Management, Smart Suggestions, Customer History, Priority Alerts, Performance Overview - where each tab loads a real interface moment, not a caption. The visitor isn't told the AI Chat Assistant resolves tickets. They watch it happen: a customer's message, the AI's diagnosis, the action it took, the resolution rate it earned.
AI Chat Assistant
Connect your help docs once. HelpFlow learns them, then handles common questions automatically - day or night.
- 24/7 automated resolution
- Natural language understanding
- Automatic documentation sync
Why a tab bar, and why this order
The six tabs aren't alphabetical - they follow how a support lead's day actually runs: a ticket comes in and gets auto-resolved (AI Chat Assistant), the rest get triaged (Ticket Management), the agent gets a nudge on what to say next (Smart Suggestions), context loads automatically (Customer History), anything urgent jumps the queue (Priority Alerts), and the manager checks the numbers at the end of the week (Performance Overview). The order is the workflow, not a menu.
A default tab matters as much as the tabs themselves. AI Chat Assistant loads first because it's the single feature that justifies the product's core claim - resolving tickets before a human notices. Every other tab supports that promise; this one proves it.
Every section was built to earn the next scroll
A landing page is a conversation. Each section has one job - move the user one step closer to trust. I designed this page as a conversion funnel:
Dual CTA strategy: primary "Join Waitlist" for ready users, secondary "Watch a 90-sec Demo" for hesitant ones. The product mockup shows a real support moment - customer asks, AI resolves, status changes to Resolved. Cause and effect before the headline is even finished.
The tab order mirrors the actual support workflow, from AI Chat Assistant through to Performance Overview - see Feature Architecture. A visitor isn't scanning six icons; they're watching one real ticket get solved.
Three steps: Customer Asks → AI Responds → Issue Resolved. Makes the product feel simple before commitment. Reduces the cognitive barrier to signing up.
The gradient section - the warmest, most emotionally charged moment on the page - appears at the exact moment of decision. Cool and trustworthy throughout. Warm and exciting at conversion. That contrast is intentional storytelling.
Mobile - Not a Shrunk Desktop
At 375px, mobile wasn't treated as a collapsed version of desktop. The hero product mockup moves above the headline to lead with visual proof before text. The feature tabs collapse to a horizontally-scrollable strip instead of wrapping. Navigation condenses with the primary CTA always visible above the fold.
What I said I'd fix - and then fixed
Self-awareness is part of good design, but it means nothing if it stops at a bullet point. The first version of this case study flagged two gaps below as future work. Both were rebuilt into this version instead. Two open items remain, listed honestly.
The hero now shows one clear cause-and-effect moment at readable size - customer asks, AI diagnoses, status flips to Resolved - sitting beside the headline instead of shrunk beneath it. See section Overview.
The six-icon grid became a tabbed module with a real chat panel underneath. See section Feature Architecture for the reasoning behind the tab order.
CTA hover animation, smooth scroll between sections, a waitlist form submission success state. The page needs to feel alive - not just look right. Still open; needs a prototyping pass in Figma before it's real.
The purple gradient headline has under-gone a formal contrast ratio check. Visual choice vs accessibility requirement.
"Join 500+ teams" is a placeholder. Real logos, real testimonials, or a named person with a job title would turn a generic claim into earned credibility. Still open - this needs actual customers, not a design fix.
Design is chaotic - and that's more honest
Teaching design gave me deep theoretical foundations. But what I came looking for was the real thing - the deadlines, the tradeoffs, the iteration, the moment you ask "did we actually make an impact?" That chaos is more honest than any classroom exercise. And I'm ready for it.