Zapier
A landing page concept for Zapier’s AI story: one clear promise, real proof and a governed path from first automation to enterprise scale, designed in light and dark, on desktop and mobile.
ROLE
UI/UX Designer
TIMELINE
Concept Project
TOOLS
Figma
CLIENT
Zapier (concept)
Scroll to explore
2
Themes
Light and dark
2
Breakpoints
Desktop and mobile
12
Page sections
Hero to closing CTA
4
Animated carousels
Looping marquee rows
1
Landing page
One long scroll
01 / OVERVIEW
OVERVIEW
An AI automation page should sell control, not just capability.
Zapier’s page has to speak to builders who want MCP and SDK access and to leaders who need governance. This concept sets out one long page that leads with a single promise, shows the product doing real work, and closes with security and scale.
01
One clear promise
The hero states “Your tools. Your rules. Any AI.” and puts two sign-up paths and three proof numbers directly under it.
02
Show, don’t describe
Integration tiles, an MCP and SDK diagram and product screens explain the platform visually before any long copy.
03
Proof and control
Customer results, a large task counter and a governance and security section answer the question “can we trust it?”
02 / BRIEF AND ROLE
BRIEF AND ROLE
The brief: present Zapier’s AI platform to builders and to business leaders on one page.
The brief
Design a landing page that explains Zapier’s AI automation, its MCP and SDK offering and its enterprise governance, in the existing Zapier look, with light and dark themes.
My role
UI/UX designer. I designed the desktop landing page in both themes, the mobile layout and the animated carousels.
Scope
Desktop landing page in light and dark, a mobile version of both, and looping carousel components.
This is a design case study. Product names, copy and numbers come from Zapier’s public messaging.
03 / THE PAGE FLOW
THE PAGE FLOW
One long page, ordered from promise to proof to trust.
PAGE / HERO
Promise first
A headline, two sign-up buttons and three usage numbers open the page, with a tile picker for Claude, ChatGPT, Cursor and more below.
PAGE / FEATURES
A system, not a tool list
“Every team has AI. Now they need a System.” opens a grid of feature cards with product previews and clear calls to action.
PAGE / DIAGRAM
One diagram, one connection
Zapier MCP and SDK are shown as one secure connection for every AI surface, followed by four short proof points.
PAGE / RESULTS
Results as a number
A large task counter, a growth chart and four short claims replace paragraphs of copy in the dark results band.
04 / PRINCIPLES
PRINCIPLES
Four rules kept a dense AI product page clear and easy to scan.
01
One clear promise
The first screen says what Zapier does in one line and offers two ways to start.
02
Show, don’t describe
Tiles, diagrams and product screens carry the story, so the paragraphs can stay short.
03
Proof in the flow
Numbers, a customer story and real templates sit between the claims, not on a separate page.
04
Two themes, one system
Light and dark share the same layout, spacing and components. Only the colour tokens change.
05 / MOBILE EXPERIENCE
MOBILE EXPERIENCE
The same page in one column: scroll inside the phone and switch between light and dark.
Light modeDark mode
The same landing page in one column: promise, proof, diagrams, toolkit, testimonial, results and security. Light theme.The dark theme uses the same layout and content. Only the colour tokens change.
Scroll inside the phone. The navigation stays pinned at the top.
06 / DARK MODE
DARK MODE
Every section has a dark twin: the same layout with different tokens.
01
Same structure
Dark mode keeps every section, its order and its spacing from the light page.
02
Orange stays the accent
Buttons, key words and numbers keep the Zapier orange, so the brand reads the same in both themes.
03
Surfaces change
Cream backgrounds become near-black, and cards, dividers and diagrams are re-toned to match.
07 / LIGHT AND DARK
LIGHT AND DARK
The same sections in both themes, side by side.
DESKTOP / LIGHT AND DARK
Light / Features
Dark / Features
Light / Diagram
Dark / Diagram
08 / EVERY SECTION
EVERY SECTION
From the toolkit to the closing call to action, each block has one job.
Toolkit
Customer story
Results counter
Webinar promo
Real outcomes
Governance
Security
Closing CTA
09 / BRAND STYLE
BRAND STYLE
Zapier orange on warm neutrals, with a near-black ground for dark mode.
Orange
#FF4F00
Accent
Ink
#201515
Text and dark sections
Cream
#F8F4F0
Page background
Paper
#FFFEFB
Cards and hero
Stone
#ECEAE3
Lines and fills
Olive
#32372C
Feature band
Aa
Inter
Body text, navigation, buttons and labels. Headlines on the page use Degular Display, with Serrif for customer quotes.
10 / OUTCOMES
WHAT THIS SHOWS
A dense AI product page becomes one clear story in two themes.
This is a design case study of a Zapier landing page, not a shipped product. It shows how a complex offer can be structured, themed and adapted to mobile.
01
Information design
Twelve sections move from promise to proof to security without long copy.
02
Design systems
One set of tokens drives light and dark, so the two themes stay in step.
03
Responsive design
A single-column mobile layout keeps the same order in both themes.
04
Motion
Looping carousels add life to logo and use-case rows without hiding content.
