SpinBot is one of the most popular free article spinning and paraphrasing tools on the web, used by millions of people every month.
The Challenge
Despite strong product-market fit, the existing website & product suite felt dated, lacked a cohesive visual system, and wasn't optimized for conversion or upselling QuillBot's broader product suite.
The old website was developed directly. For the redesign, there were no Figma design files available, and the existing website didn't follow any specific design system.
The Goal
Modernize the brand while keeping a similar design feel, improve conversion rates, create a seamless upsell path for QuillBot products, and deliver a developer-friendly, scalable design system.
What I Delivered
Timeline: 4 weeks from kickoff to final handoff.
13 fully responsive pages redesigned from the ground up, covering the core text spinner, paraphrasing tool, grammar checker, product pages, and supporting content pages. It's gonna be a long case study!
SpinBot Product Suite
Hundreds of components and building blocks organized into a complete Figma design system with a reusable component library. Every element is built for consistency and speed across current and future pages.
Full Project Preview in Figma
Smart variables and tokens that allow the entire theme to be swapped across all pages to match different product themes. This makes the system flexible enough to support SpinBot's ecosystem without having to rebuild from scratch.
Smart variables and tokens
A/B testing ready designs so the team can test variations on key pages and sections without needing new design work for each iteration.
Developer-friendly handoff with proper annotations, organized layers, named components, and clean frame structures. Engineers can pick up any page and build without a walkthrough.
A/B testing ready designs
Enterprise Design Approach
The redesign focused on three priorities:
Modernizing the brand — Stripped back the cluttered, text-heavy layout and replaced it with a clean, structured visual hierarchy that feels current and premium.
Improving conversion — Restructured page flows around clear CTAs, better feature communication, and strategic placement of social proof and testimonials.
Upselling QuillBot products — Integrated natural touchpoints throughout the experience to surface QuillBot's broader tool suite (grammar checker, AI chat, Chrome extension) without feeling forced.
Enterprise Design Approach
Dive Deep into Redesign: The Top 4 Pages
Page 1: Text Spinner / The Homepage
Text Spinner Hero
About SpinBot & Features
Client Testimonials
Web illustrations
Page 2: Paraphrasing Tool Page
Paraphrasing Tool Hero
How does it work
Features and modes of Paraphrasing tool
Paraphrasing Tool vs Paraphrasing BOT
Page 3: Grammar Checker Page
Grammar Checker Hero in Action
Benefits, Features & How to Use
Strategic CTA and FAQs for better SEO & CRO
Page 4: AI Summarizer Page
Summarizer Hero
About, How does it work and features of AI Summarizer
Benefits and Approach of AI Summarizer
Who can benefit from AI Summarizer Tool?
Do's & Don't of AI Summarizer Tool
The System
The Figma file includes a full variables section with color palettes, typography scales, spacing tokens, and component-level overrides. The design system is built so any designer or developer can extend it, theme it, or adapt it to new product lines with minimal effort.