Case study · SaaS

One Page, One Green Button: A SaaS Landing Page for SaaShut

A SaaS buyer decides fast and leaves faster. SaaShut’s landing page is built for that speed, with the product explained in the first screen, proof before the price, and one green button, try 14 days free, in view the whole way down. Every section serves the trial.

Client
SaaShut
Industry
SaaS, analytics
Audience
Founders and product teams
Scope
Landing page UX and UI design
The brief

Every Section on a Trial Page Answers to the Same Green Button.

The Problem

SaaS buyers arrive sceptical and leave fast. They need to understand what the product does, believe it works and see what it costs, usually in that order and usually in under a minute. A page that lists features and hopes for the best loses them somewhere between the hero and the pricing table.

The Goal

Design a single landing page that moves a first-time visitor to a free trial. Make the product obvious at a glance, put proof before the price, answer objections before the ask, and keep one clear action in view from the first screen to the last.

Who it’s for

SaaS founders and product teams selling to small and mid-sized businesses. Their buyers compare three tools in three tabs and pick the one that makes sense first.

The visual system

A Violet Page Where Only the Buttons Are Green.

Two colours do all the persuading. Violet carries the brand, from the hero wave to the closing band. Green is kept for anything a visitor can act on, so the eye learns in one screen where to click.

  • Violet#645CFCPrimary: hero and closing bands
  • Soft violet#827AFFHero shapes and highlights
  • Green#81D32DEvery button a visitor can act on
  • Light green#A0E756Pricing accents
  • Deep indigo#150D5DDark bands: figures and quotes
  • Navy#110A38Headings
  • Lavender#E7E5FFQuiet section grounds
Typeface

Inter

Inter, set heavy in the hero and plain everywhere else.

Never miss this beautiful SaaS web app.

First line, first screen.

The decisions

How the Design Solves It

Each choice removes one reason to leave before the trial.

One Action, Repeated

The same green button sits in the header, the hero, the pricing table and the closing band. Wherever a visitor decides, the next step is already in view.

Doubts Answered in Order

What it does, then proof, then people, then price, then objections. The page follows the order a buyer’s questions arrive in.

A Plan With a Default

Three tiers with the middle one marked. Buyers tend to want to be told which plan is theirs, and the monthly and yearly toggle shows the saving without a second table.

Trust in Layers

Figures, faces, quotes, brand logos and a live blog. No single proof point carries the page; together they make it hard to doubt.

The walkthrough

Eleven Sections, What It Does, Then Proof, Then Price

Pick a section to see it in the design and what a buyer learns there.

  1. A plain headline, one line of support and a single green button: Try 14 days free. The dashboard illustration explains the product before anyone reads a word.

  2. Three equal cards with an icon each. A visitor who only skims still leaves knowing the three things the product does well.

  3. An illustration of the product at work beside a short paragraph and a second chance to act, for the visitor who needed one more line.

  4. A dark band breaks the rhythm and puts five figures in circles. The change of colour marks the move from what it does to who uses it.

  5. Four faces with names and roles. Buyers trust a product more when they can see who builds it.

  6. One panel and one play button, for the visitor who would rather watch a short demo than read the rest of the page.

  7. Three plans side by side with a monthly and yearly toggle. The middle plan's button is the green one, so the comparison has a default answer.

  8. Quotes with names and photos on the dark ground, placed straight after the price, where doubt peaks.

  9. The common questions about trials, plans and billing, answered before the final ask instead of in a support ticket after it.

  10. A row of recognisable brand logos, then recent articles: two quiet signals that the company is established and active.

  11. The violet returns for the final band: a short question, the same green button, and a footer that keeps every route open.

Hero — Promise and one action

Want a landing page that keeps one next step in view?

Start a Project Like This
Your project

Two Ways We Can Build One Like This for You

For your client or for your own business, the thinking is the same. The route in is different.

For agencies

Pages Like This, Under Your Brand

We design and build to your client’s brief and hand it over as your work. Your client never hears our name.

  • Planned around your client’s buyer, section by section
  • Built in WordPress, ready for you to present
  • NDA on request, no contact with your client
For business owners

A Site Planned Around Your Buyer

We map the questions your customers ask before they buy, then design and build a WordPress site that answers them in order.

  • One clear action, in view from the first screen to the last
  • Proof and pricing placed where doubts arise
  • A site your team can update without us
More work

Other Sites We’ve Built

Let’s Talk About Your Project

We book a call to scope the work. You get a proposal to approve, and we begin.

Hafijur R, founder of Coderlift
Hafijur R Founder, Coderlift
Contact Form