The Market Gap
Designers, PMs, and developers building SaaS products spend 10+ hours per week doing competitive UX research by hand. They crawl through dozens of apps, take screenshots themselves, save links in random folders, and lose half of it before the project is over. By the time they're looking at a blank canvas, their reference material is scattered across 6 browser tabs, 3 Figma frames, and a WhatsApp message to themselves.
The existing resources don't solve this. Mobbin is mobile-first. Lyssna is a user testing platform, not a reference library. Dribbble is unstructured inspiration with no search worth using. There was no purpose-built, properly structured SaaS UI research library — organised by app, by page type, with context and evaluation built in.
SaaS Boat is the thing I needed while doing my own design work and couldn't find anywhere.
"If you're designing a pricing page, the existing options are: Google Images, a random Dribbble search, or spending 3 hours clicking through apps you already use. None of those are a research workflow."
— The gap SaaS Boat was built to closeWhat SaaS Boat Is
A subscription SaaS product — a curated, searchable design research library built specifically for people building SaaS products. The library contains structured, tagged reference material across six distinct surfaces, all connected by a single design system and a custom WordPress backend.
3,661 screenshots from 258+ real SaaS products, organised by app and page type. Browse by category (Login, Dashboard, Pricing, Empty State) or by product.
412 structured flow diagrams — visual breakdowns of how each app works end to end, not just what individual screens look like.
821 structured UX critiques — Nielsen's 10 heuristics applied to real SaaS products. Not opinions: a systematic, repeatable framework for every app.
Side-by-side comparison of any two SaaS products in the library — screenshots, flows, and evaluations in a unified split view.
Surface the entire library inside Figma. Browse, search, and insert reference screenshots directly into design files. Free tier: 20 inserts/month.
Conversion-optimised landing page and a 20-post SEO content strategy targeting high-intent keywords across SaaS design topics.
The Design Challenge
Most products have one or two core surfaces. SaaS Boat has six — each with a different user intent, information density, and access model. The design challenge wasn't "what should this look like?" — it was "how do you make six fundamentally different tools feel like one product?"
One design system, six contexts
The same component tokens needed to work in a high-density browse grid, a focused flow diagram viewer, a structured critique layout, and a side-by-side compare tool. Chrome had to stay minimal so the content — the screenshots — could be the visual experience.
Access gating without friction
Every surface had a different free/paid boundary. The library shows thumbnails to free users, blurs detail. The Figma plugin limits inserts. Each gate had to feel like a natural moment, not a paywall slam.
Information architecture at scale
3,661 screenshots across 258 apps with tags, page types, and categories — organised so any designer can find what they need in under 30 seconds. That required designing the taxonomy before touching the UI.
Designing for designers under scrutiny
The audience uses design tools daily and evaluates UX professionally. Every spacing decision, every hover state, every empty state is noticed. The product is under a microscope in a way most SaaS products aren't.
The Design System
The product runs on WordPress + Salient + WPBakery — not a typical design system environment. The challenge was building a rigorous, scalable visual language on top of a CMS stack. Everything that follows was built from token decisions first, not the other way around.
Warm off-white base (#F4F2EF) instead of clinical white — the UI recedes so the screenshot content advances. Brand blue (#0996F0) is used sparingly: CTAs, accents, Figma plugin branding. Near-black (#161514) for body text, slightly warmer than pure black.
Instrument Serif + Manrope is a deliberate editorial pairing — Serif for major headings signals depth and authority, Manrope's geometric clarity handles all functional UI text without competing.
The motion language is intentional and restrained: gentle line-reveal-by-space headline animations, subtle fade-from-bottom scroll reveals. The site feels alive without competing with the actual content. Pill buttons have a small arrow-circle animation on hover. Card radius is 15px throughout. Frosted glass nav on scroll. Every decision was about surface quality, not decoration.
The Access Model
Freemium design is a conversion problem that looks like a pricing problem. The goal wasn't just to define tiers — it was to engineer the moment a free user becomes a paying user, and to make the Figma plugin the place where that upgrade happens most naturally.
| Tier | Screenshot library | Figma plugin | Flows + Heuristics | Price |
|---|---|---|---|---|
| Explorer (Free) | Limited browsing | 20 inserts/month | Preview only | $0 |
| Officer | Full access, all filters | Unlimited inserts | Full access | $39 / month |
| Captain | Full access, all filters | Unlimited inserts | Full access | $390 / year |
The Figma plugin is the distribution flywheel
Bringing the library inside Figma is a product strategy, not just a feature. The upgrade prompt appears at the point of maximum pain — when a designer is actively designing and hits the 20-insert limit. That's the moment when $39/month is an easy yes. The plugin also has a shared token pool for free-tier access management, backed by the custom WordPress REST API (saasboat/v3). Submitted to Figma Community for broad top-of-funnel distribution.
Multi-Surface Design Decisions
Each surface required independent information architecture decisions — what to show at a glance, what lives behind a click, how to handle access states, and how to make the page-type taxonomy scannable.
Screenshot Library — density vs context
The core tension: show as many screenshots as possible (density), or show enough context per screenshot that it's actually useful (labels, page type, app name, date). The solution was a masonry-style grid with fixed card height — thumbnail large enough to scan at a glance, app name + page type always visible, full view on click with related screenshots from the same app alongside. Filter by page type and app category in the sidebar, collapse to full-screen on mobile.
User Flow Diagrams — a visual language from scratch
There was no standard format for showing "how an app works" as a design artefact. I designed a consistent visual grammar: each flow starts with a trigger (entry point), flows through named screens with connecting arrows, and annotates decision points and alternate paths. Every diagram follows the same layout rules — left to right, grouped by feature area, colour-coded by flow type. This consistency is what makes 412 diagrams from 258 different apps feel like one coherent library rather than 412 one-off sketches.
Heuristic Evaluations — structured critique as a product
821 heuristic evaluations following Nielsen's 10 heuristics — but the format was the design problem. Each evaluation needed to be scannable (which heuristics fail?), skimmable (what's the severity?), and deep enough to be actually useful in a design review. The solution was a structured card format: heuristic name, pass/fail indicator, severity score (1–4), annotated screenshot, and a single-sentence actionable finding. The same format for every app. Evaluations are generated from a structured Claude prompt with JSON output, then imported to WordPress via the custom API.
Compare Tool — /compare
Side-by-side comparison of any two SaaS products — screenshots, flow diagrams, and heuristic scores in a split layout. The key design decision was a synchronised scroll mode: scrolling both panels simultaneously for screenshot comparison, independent scroll for flows and evaluations. Shareable URLs encode both app selections so links can be sent directly.
Marketing site — conversion before aesthetics
The landing page is structured as a conversion funnel: problem statement → library size → social proof → tier table → Figma plugin demo → CTA. Every section answers a different objection a designer would have before signing up. The visual tone is deliberately calm and editorial — not a loud SaaS startup page — because the audience trusts restraint more than noise. Free sign-up is the primary CTA; the upgrade prompt lives inside the product.
Content Production as a Design Problem
A library is only valuable if the content inside it is structured, consistent, and actually good. With 3,661 screenshots across 258 apps, the question wasn't "how do I design the UI?" — it was "how do I design the system that produces the content at scale without it becoming inconsistent?"
The real product is the content production system
Anyone can build a screenshot library. The moat is the consistency, structure, and quality of what's inside it — and that requires designing the tools that produce the content, not just the UI that displays it.
Chrome Inspector Extension
Custom Chrome extension for capturing screenshots directly from any live SaaS app. Full-page, region, and element-level capture. Automatic app detection from URL patterns. One-click publish to WordPress via the REST API with pre-filled page type and app tag. Without this tool, every screenshot would be a manual 5-step process.
Heuristic Evaluation Framework
A structured prompt framework for evaluating any SaaS app against all 10 Nielsen heuristics. Outputs structured JSON (heuristic, severity, finding, annotated screenshot reference) that imports directly into WordPress via the custom API. What would take a UX researcher 4–6 hours per app takes 20 minutes with consistent quality.
Automation Pipeline
Node.js scripts for batch-posting apps, screenshots, diagrams, and heuristic evaluations at scale. That's how 3,661 screenshots and 821 evaluations were ingested without creating a manually maintained database. Each script follows the REST API schema for the relevant content type.
Technical Architecture
The backend is a custom WordPress plugin suite — 12 plugins built from scratch on top of a Salient/WPBakery base. The frontend talks to a custom REST API. The Figma plugin and Chrome extension are separate clients against the same API.
12 custom WordPress plugins
boat_screenshot, boat_diagram, boat_heuristic, boat_animation, boat_note, boat_interface, boat_compare, boat_collections, boat_navigation, boat_tracker, core hub, and REST API handler. Each plugin owns its content type, REST endpoints, and admin UI.
Payment → access pipeline
Gumroad handles payment processing. On successful purchase, Gumroad webhooks trigger WordPress account activation and role assignment (Officer / Captain). Figma plugin uses a shared token pool with per-user quotas for free-tier access management.
Distribution Strategy
Building a product no one finds is wasted work. Distribution was treated as a design problem from the start — not an afterthought once the product was done.
Figma Community — top-of-funnel at the point of use
The Figma plugin isn't just a feature — it's a distribution channel. Figma Community shows the plugin to designers who are already in their design workflow looking for tools. Every designer who installs the free plugin is a potential paid subscriber, and the upgrade prompt appears at the exact moment they need more inserts.
SEO content — 20 posts targeting intent keywords
20 blog posts live targeting high-intent SaaS design research keywords. The content strategy prioritises navigational and research intent over broad awareness — people searching "SaaS dashboard design examples" or "heuristic evaluation template" are already in the problem space SaaS Boat solves.
| Target keyword | Monthly searches | Intent |
|---|---|---|
| saas dashboard design examples | 1,200/mo | Research |
| saas onboarding UI patterns | 880/mo | Research |
| heuristic evaluation template SaaS | 620/mo | High intent |
| saas pricing page examples | 950/mo | Research |
| SaaS empty state design | 440/mo | Research |
| ui component library for SaaS | 400/mo | High intent |
Product Hunt launch — planned
Product Hunt launch planned as a concentrated traffic spike to drive initial reviews and word-of-mouth. The marketing page and onboarding flow were designed with the PH audience in mind — clear value proposition in the first 10 seconds, frictionless free sign-up, Figma plugin install as the first activation action.
Current Status & Outcomes
The product is live at saasboat.com, actively growing toward its first 100 paying customers. The Figma plugin has been submitted to Figma Community. SEO content is indexing. The automation pipeline means the library grows faster than it could be maintained manually — which was the point from the start.
Learnings
Designing the content system is the product. Any developer can build a screenshot library. The thing that makes SaaS Boat defensible isn't the UI — it's the structured, consistent, high-quality content inside it, and the Chrome extension, heuristic framework, and automation pipeline that produce it at scale. Design thinking applied to content production, not just interface design.
Distribution has to be designed, not bolted on. The Figma plugin is a product decision that doubles as a distribution channel. Building the library inside the tool designers already use — rather than asking them to open a browser tab — changes the acquisition economics entirely. The best moment to show an upgrade prompt is when someone is already working.
Solo doesn't mean slow — it means the right bets matter more. Every hour spent on a surface that doesn't contribute to conversion or content quality is a strategic mistake when you're operating alone. Prioritising the screenshot library and Figma plugin over more niche features (animations, open graph) was the right call — they're where the value is clearest to the user.
Consistency is a competitive moat, not just a design principle. When every heuristic evaluation follows the same structure, every flow diagram uses the same visual grammar, and every screenshot is tagged and labelled the same way — the library becomes genuinely usable for research, not just browsing. That consistency is hard to replicate fast, even with more resources.
Designing for designers under scrutiny sharpens everything. When your audience evaluates UX professionally, every empty state, every error message, every hover behaviour gets noticed. That pressure raised the quality of every decision — not because I was trying to impress, but because the feedback loop is faster and more articulate than any other audience I've designed for.