Optimizing registrations: Taking a look at Picnik

July 13th, 2009

Topics: Methodology, Testing

A huge part of doing optimization well is knowing what to test (put garbage in, get garbage out), so keeping up with good design philosophy is extremely valuable.  While brushing up on web design, I came across a Smashing Magazine article on UI design trends by Janko Jovanovic.  He uses a lot of great examples of good design, some of which are perfect for illustrating some optimization options.

picnik_badge_180x60

With that in mind, I’m going to examine one of the sites mentioned and discuss the good, the bad and the testing opportunities I see.  The (lucky?) site I picked was Picnik, which has done a commendable job on their registration strategy.  (Also, like Widemile, they are a Seattle start-up.)  I only wish the site wasn’t flash based, which is more difficult to optimize.  Despite that, my thoughts on test variations and best practices are still applicable to it and any other registration campaigns.

Quick summary: Picnik is an online photo editing application.  You can upload photos and do easy photo editing all within the browser.  You can try out the app, even exporting and saving photos, without registration.

Let’s get started by checking out their form:

picnik

Although a bit busy, I like the way the form assists users.  It has a green highlight to for the selected field and dynamically pops up error messages (see the username alert below).  Additionally, it hides and locks the “again” fields until there is valid input in the corresponding field.

picnik2

One highlight is how this is a good example of when a lightbox/page overlay type form might be appropriate (note that behind the form is the page I was working on, which has been darkened).  Why is it appropriate?  Because this is the form that pops up after the user clicks “Register.”  It makes sense to be direct and reduce additional marketing if the user indicates they want to sign-up by clicking directly on the register button.

Is this right for your site/landing page/microsite?  It’s hard to say, but I would recommend testing it.  This would fall into the category of a funnel test because it eliminates a page in the registration funnel.  As long as your full page and lightbox form don’t have any glaring issues, you should quickly see the influence of whether a small and direct lightbox form works, or if a whole page with additional information is necessary.

In terms of testing this overlay form, there are a few big opportunities for improvement.

  • Testing title and intro copy. Use “free” in the headline and as the first word, e.g. “Free registration”, then list a few benefits rather than saying “All we need is a username, password, and email address.”
  • Eliminate typing passwords and emails twice. Test this to see if it has a negative impact on registrations and if it creates lot of nonstarters (people who register but never return to the app.)
  • Change the color of alerts to red instead of green because green is the site’s hyperlink color and also used for highlighting the selected field.
  • The button should stand out. Call to actions typically work better when they are a different color from the rest of the site.  The button copy should be amped up a bit to “Get Started Editing”, “Save your photos now” or something similar too.

So how does Picnik capture users that don’t click register directly?  They offer it after a photo is saved:

picnikfull

As you can see, this page has a lot more content than the lightbox form since its a full page.  It has the job of pushing someone into registering after having used the product.  This is a good technique (mentioned in Javanovic’s article), but there’s always the question of if you’re offering too much or too little.  Testing how much to offer would be a very interesting and fruitful optimization campaign.

Overall, I’m not a huge fan of this page, but I do like the approach.  It has continuity at the top, showing the actual photo edited, and the form and main registration benefit (“Want Picnik to keep a copy?”) are prominent.  Also, they have structured the page to prioritize their conversion goals, keeping the focus on registration but still advertising the opportunity for people to print their photos or sign up for premium service below.

Here are a few recommendations to improve this page:

  • What’s the clock icon for? Make the headline bigger or put in an informative image that will help encourage registration.
  • Make the bullet points more prominent. The bullets disappear once the form begins to be filled out, using the same alert and field revealing technique I described with the previous form.  I would make sure the bullets stay on the page.
  • Test all the copy.  It’s hard to know what feature is most important to users without testing.  Uploading more photos might be more appealing or saving their connections to Flickr and Facebook.
  • Change the buttons. “Close photo” and “Create my account” look the same, they should be differentiated to emphasize their individual actions.  With a primary call to action, it needs to stand out.  Also, I would make the “Close photo” and “Continue editing” buttons much smaller to discourage immediate attention and clicks on those buttons, the point being to drive people to read the registration benefit copy.

Optimizing for registration involves many steps, beyond just improving the registration pages.  You can delve into when to ask for registration, test the ROI of emphasizing different products and then executing  segmentation focused pages as well.  However the easiest returns will come from some simple fixes like I’ve discussed above.

I hope this was helfpul talking over a real example, let me know if you’d like me to do more of these and if there’s any great sites out there I should look at.

  • Peter

    Missing pictures in blog:
    I am on page “Optimizing registrations: Taking a look at Picnik”, but except for the top image

    picnik_badge_180x60.gif

    the other pictures are blank, e.g.:
    picnikfull-450×277.png

    This is on page:

    http://blogs.webtrends.com/optimization/2009/07/13/optimizing-registrations-how-to-increase-sign-ups-leads-sales-picnik/

  • http://webdesignfromscratch.com/ Ben Hunt

    I’d say all those things have worked for me over the years.

    The law of Be-Do-Have is at work here. You have to *be* the kind of designer someone trusts. Treat them as though you already have the perfect designer/client relationship, and then you do what you need to do, the trust comes, and then you have what you created.

    Note: Must make our About page more personal.

  • Pingback: Linkdump: free vs fee, and the experience of trial software | blago.telexer

  • http://www.widemile.com Billy

    Thanks Austin. More complicated/expensive products with longer sales cycles face a few additional challenges. The two most common challenges that I see are knowing how much information to provide on the page and controlling the quality of leads.

    You can help find answers to the first problem by testing the amount of information you provide, e.g. a long page vs. a short page vs. a microsite. The second can be addressed by the language of your page, which helps users self-filter them out from buying your product or submitting their information as a lead, or you can ask for extra information in your lead gen forms and filter yourselves. Both have conversion rate consequences but will improve lead quality. Testing the right balance of those are key.

    There’s a lot more to this topic though, so if I sense enough interest, I’ll try to write about it.

    -Billy

  • Austin

    Great post. I’m curious on what your thoughts on for websites that are more business centric with signup flows that are more involved, products that aren’t free, and audiences that may need to learn a lot more about a product before being funneled into a signup process.