The Art of the Sign Up Page

Web 2.0 “sign up” page

For those following “web 2.0”, the initial sign up page has become virtually synonymous with launching web application (especially for betas). As I have been working on the marketing for Plaid, I have been studying the art of the sign up page.

I have reviewed dozens of sign up pages. Though, I am missing one critical piece to my analysis; I have no insider information on the conversion rates of any of these pages; I will share my findings. But right now here is what I have learned. You can see if I eat my own dog food with the new Plaid sign up page or read about How I Designed the Plaid Sign Up Page.

8 sign up pages

 

Freshbooks | Backpack | Dropsend | Vyew

  

Blinksale | Remember the Milk | Scrapblog | Crazy Egg

I selected these sites because I thought they were well done and were subscription based, productivity applications. Other applications I reviewed included: 30boxes, Blogger, del.icio.us, Flock, Give Meaning, Kiko, My Pick List, Titlez, CRM from Zoho, Zopa, Second Site, LinkedIn, Box.net, Vyew, and Cork'd.

What elements make up a sign up page?

The best place to start is to list all of the elements that compose a sign up page:

• Logo
• Elevator pitch
• Description copy
• List of key features
• List of key benefits
• Call to action
• Testimonials
• Tours
• Examples of who is using the application
• Screen shots
• Life-style images
• Link to more information (price, login, about, blog, terms, privacy)

Some sign up pages inlcude all of these elements (i.e. Backpack and Remember the Milk) and others include just a few (Vyew and Kiko). To determine what element drive conversions, I looked at 37Signal's heat map of their Backpack sign up page (see above right image). Couple take-aways include:

• Prospective users should be offered a "tour" (This might be worth another study. I plan to create screencasts for this purpose.)
• Existing users expect a link to the login page

What is your elevator pitch? Is your application described in one sentence?

The elevator pitch is important because:

• You have literally seconds to tell people about your site
• Most people are unfamiliar with web applications (as opposed to desktop applications)
• Your "brand" is unknown

Here are the elevator pitches I admired:

• Freshbooks - The fastest way to invoice your clients
• Dropsend - Want to email large files? We've got the answer.
• Vyew - Always-On Collaboration and Free Web Conferencing
• Blinksale - The easiest way to send invoices online
• Remember the Milk - The best way to manage your tasks.
• Backpack - Collect, organize and get things done
• Scrapblog - Create a world for your pictures
• Crazy Egg - track, evaluate and improve your site

Elevator pitch take aways

• Well placed at the top, centered and in sans serif font
• Describe the single key-feature of the application (Freshbooks and Dropsend) or the single key-benefit (Backpack and Scrapblog)

For Plaid, I settled on "Manage relationships and get things done" as my elevator pitch.

Supporting copy

Does the page have a single message that supports your elevator pitch?

I think the best example is found on the Crazy Egg sign up page:

• Tag-line: "visualize your visitors" which is used by the logo and in the page title
• Elevator pitch (feature-based): "track, evaluate, and improve your site"
• Description (benefit-based): "Get a clear picture of where your visitors are clicking and enhance your site's results."
• Key features: "Crazy Egg makes it easy to:" followed by a bulleted list.
• It also includes screenshots (which nicely uses the lightbox affect), links to a demo, testimonials and prices.

Is your copy compelling to your audience?

Basically, how does your copy address the specific pain points for your audience. With Crazy Egg, the pain point is that without this kind of heat map, it is impossible to measure how or whether a design change is an improvement. The question is whether your copy emotionally connects with your user so that they want to sign up.

For us, we are selling Plaid to people who generally do not use church management software. So I need to show that Plaid understands exactly what stresses they experience leading a week to week ministry.

Do you use bulleted lists? Do you use subheadings? Is your copy easy to process?

This is pretty basic copy for the web kind of stuff. But important questions never-the-less. All the examples I show do a great job of chunking their copy so its scanable and quickly read.

Call to action

The great thing about designing a "sign up" page is that you really do have one, measurable goal. Does it convert visitors into signed up users of your product?

• Have you included a single, strong call-to-action?
• Is it clear what benefit your user will get from “signing up”?
• Have you repeated your offer more than once? Above the fold? Below the fold?

In reality, a sign up page could have three goals:

1. A visitor signs up with your service by filling out the registration form
2. A visitor takes the tour (which should end up with them signing up)
3. A registered user finds the login screen

These are all easily tracked and measured using most analytics packages. As Plaid moves towards a full-launch, I will share my findings and any tweaks along the way.

Design of the sign up button

In my opinion, this is the weakest point of almost every sign up page I reviewed: the placement, color and design of the sign up link.

• Backpack, Blinksale, delicious, Freshbooks, Give Meaning,  - links with and without underline
• Blogger, Cork'd, Firefox, Flock, Mint, Remember the Milk, Vyew - red, orange, green, blue, grey buttons
• Dropsend - ad-like image
• Joyent - headline with an arrow icon
• Kiko and Scrapblog - sign up form on page

Call to action take aways

• With the few exceptions, sign up forms are not part of the "sign up page".
• You can debate that they should always thus be "links". I prefer a button over a link because it provides a larger area for users to click.
• It should also say "Sign Up" no other labels seemed to be used.

For Plaid, I settled on a sort of an orange speech bubble with a underlined link. On hover it changes from orange to blue. The placement and design of this button will be one of the things continue to refine and work on.

 Visual design

This is the part I made the mistake of trying to do first. When it is actually, what you should design last. Here are some questions I asked of the designs:

• Is your type easy to read?
• Do all buttons look “clickable”?
• Are you speaking visually to your audience?
• Does your imagery reflect the end benefit?
• Does the overall look reflect your brand?

For Plaid, I used much of the same design elements I created for the application.

28 comments | Dec 22, 17:16 | by Tim Bednar plaid tips

If you enjoyed this article, Subscribe to Turtle Interactive by Email and get more like this sent directly to your inbox. Or hire Tim Bednar for your next project.