Grammarly
Business
Click-Through
Product Tour
As a Visual Designer, I developed the visual system and narrative flow for Grammarly’s interactive product tour.
The goal was to transform scattered sales and product messaging into a clear, story-driven SaaS experience — designed to scale across use cases while helping teams understand key features and communication workflows.
ROLE
Visual / UI Designer
TEAM
UX Designer, Associate Creative Director, Developers
TIMELINE
2022 · 3 months
TOOLS
Figma, Jira
AGENCY
Launch Interactive
THE CHALLENGE
High Context, Low Clarity
Enterprise buyers were being asked to commit to a demo before they understood how Grammarly Business actually worked. Sales relied on static decks and live calls to explain features — creating friction, inconsistency, and a bottleneck between interest and adoption.
BEFORE: EXPLANATION
AFTER: EXPERIENCE
↗ Hover the product visual to see the interaction
KEY INSIGHT
Guidance Beats Documentation
The problem wasn't missing information — it was that guidance lived outside the product. Users had to leave their workflow to learn the tool they were trying to use inside it.
The opportunity was to bring guidance into the product itself: contextual, embedded, and triggered by what users were actually doing.
SYSTEM DESIGN
One Component Kit. Every Tour.
The system was built on a shared component library — step widgets, clickable areas, and timeline scrubbers — each with consistent states, behaviors, and interaction patterns across every tour. Built to be contextual, not instructional. Embedded, not external.
New feature tours didn't need new patterns. They needed a place to plug in.
THE SOLUTION
A Context-Aware In-Product Guidance System
I designed a reusable tour framework that surfaced feature guidance at the moment of use — triggered by user intent, not a linear onboarding checklist.
OUTCOMES
Shipped. Still running.
Features shipped at launch
7
Live and still running
4yrs
Component kit behind every tour
1
The only guided tour Grammarly runs today.
Survived the rebrand to one Grammarly brand.
Shipped in 3 months, concept to launch.
DESIGN TRADEOFF
CHOSE
Modular
TRADED AWAY
over
Bespoke
A custom tour might look sharper for one feature, but the kit had to live for years and ship on someone else's deadline. Speed and consistency beat polish per surface.
