All work

Landing page

Redesigned around one prompt

Redesigned See.io hero on a dark background with faint circuit lines: the headline Turn an idea into a live website with live website in purple, a prompt box with a send button, and three example chips.

See.io turns a sentence into a live website. I redesigned its landing page so the first thing you see is the thing you do: type your idea.

Redesign

Overview

What it is
An AI website builder: describe the site you want and it designs, builds and publishes it, with every change saved as a version.
What I did
Redesigned the landing page end to end. The live hero crammed the prompt, chips, a large button, steps and a preview into one screen; I gave each its own section and left the hero one job.

What wasn’t working

  1. 01

    A headline you can’t read

    “see your portfolio live” is set with overlapping, scrambled letters, so the one line that should carry the promise reads as noise.

  2. 02

    Everything in the first screen

    Prompt, four suggestion chips, a full-width gradient button, three steps and a product preview all compete before you scroll.

  3. 03

    Proof that’s too dim to prove anything

    Example sites are small, dark thumbnails, and much of the supporting copy is small grey text on near-black.

  4. 04

    Dense pricing and FAQ

    Pricing is a paragraph beside a split panel, and the FAQ is a two-column grid of eight questions that’s hard to read in order.

The live See.io landing page, full length: animated headline, prompt with chips and a large gradient button, a preview window, small example thumbnails, a pricing paragraph and a two-column FAQ.
The redesigned See.io landing page, full length: centred headline with a single prompt box, a three-step section, a browser-frame showcase, three feature cards, one pricing card, a single-column FAQ and a closing prompt box.
Switch pages, then scroll inside the frame.Scroll inside the frame: both pages move together, so each section lines up with its counterpart.

Key decisions

Close-up of the hero: the headline, a short subline, a prompt box with a purple send button inside it, and three example chips attached underneath.

01/05One input, one action

The send button lives inside the prompt and three example chips hang off it, so there’s no separate button to hunt for and no blank-page problem. Purple lands only on “live website”, the promise.

An earlier hero direction: the same headline over a purple glow, with an empty prompt box and a text-only example underneath.

02/05The direction I moved away from

An earlier version used a purple glow and an empty prompt with a text example. I chose clickable chips over the text example because a chip is one click to try, and the circuit lines hint at “building” without glowing over the input.

From idea to live website in minutes: three cards numbered 1 to 3, Describe your idea, Watch it come to life and Go live, each with a small UI illustration.

03/05Three steps, three pictures

The steps moved out of the hero into their own section. Each gets a small illustration of the actual moment, and a numbered badge so the order is obvious at a glance.

Three feature cards: Chat edits real code with a chat input, See changes go live with a Deploying tag, and Nothing you can’t undo with a version history list.

04/05Features shown as product moments

Each card illustrates the claim it makes: the chat box, the deploy tag, the version history. The headline sets a grey first line against a white second line, a pattern repeated on every section.

Pricing: one card with what you get on the left and $9.99/MO, no card required, cancel anytime and a Build my site button on the right.

05/05Pricing as one card

What you get on the left, the price and the button on the right, with two worries (a card up front, cancelling) answered under the price. The page then closes with the same prompt box as the hero, so the last action is the first one you learned.

What I’d test next

  1. 01Prompt submissions with the example chips against an empty prompt.
  2. 02Whether the showcase carousel gets clicked, or a static grid of examples does better.
  3. 03Which FAQ items get opened, to decide what should move into the page itself.

Design & Developed by Rohit aka Negativ