Rip-off Designing Series: The ADD Pattern in Registration Process of Social Sites

I'm probably saying this again and again, we will be creating the online registration/sign-up for @tweetitow to comply with twitter's new policy -- they now require 3rd-party applications to sign-up via their OAuth. Sorry, I do not know how to explain the details of it. But to give you a picture of it, once OAuth is implemented, your tweets will then have that 'via @tweetitow' instead of 'via API.'

In the designer world, I am not a DESIGNER. But this is internet, and I am a kindergarten kid so I can be what I want to be. So let's use our untapped talent, mimicking, copycatting how the pro's do it. =)

So I'm tackling the first part (because there will be other parts hopefully), which is, REGISTRATION (or some call it sign-up, create account or etc) to @tweetitow. I guess depending on how you look at it, the designing of landing page can also be the first step. But you can also argue that planning about the GOAL of your application is the first step. Or, building relationship with the community can also be the first. And, you can still argue, that there are still more firsts before those first steps. Have it your way, kindergartens. =)

<div style="width:425px" id="__ss_4374136"><strong style="display:block;margin:12px 0 4px">Rip-off Designing Series: The ADD Pattern in Registration Process of Social Sites</strong><div style="padding:5px 0 12px">View more presentations from Rose Buenconsejo.</div></div>

 

abtests.com and being a packrat

I had fun going through some 'case studies' posted on abtests.com site. It's the before and after site, and how the changes affect 'conversion' rate to their site. So following are quick stuff I learn from it, which I'm not sure if they really make sense:

  • FREE -- almost all samples showed that put FREE on your site, and it will surely drive up your conversion rate. It shows that being a free loader is something genetically ingrained to us, humans.
  • Bullet form -- is better than essay form. Probably, people can quickly scan if you put your points in bullets.
  • Video -- A demo video has higher conversion rate than using still pictures. Something new for me because I hate videos. I prefer still pictures.
  • RED -- using red for your submit/join button has more positive impact than using green.
  • 3D image -- has better impact than flat image

I did some quick rundown of @tweetitow 'workflow' and such, whatever term you call it. And, it looks like I packed it with all the features I can think of. It needs to be stripped off. Really, this is not my talent. The drafts all look painful.

<table style="width:auto;"><tr><td></td></tr><tr><td style="font-family:arial,sans-serif; font-size:11px; text-align:right">From Drop Box</td></tr></table>

Rip-off Designing for @tweetitow

We will soon implement the Twitter OAuth to @tweetitow so we need a new website for it with all the shiznits and the shiny-glimmering design. Since, we do not have someone who can design the website because we're too cheap and dirt poor, I have to trust my hidden talents. 

So this is how I came up with the soon new home page design of @tweetitow.

  • First, look at all the different websites, observe, and copy their 'design pattern' in a subtle manner. So my resources are the following social sites:
  • If you look at them, social sites or service sites, their home pages contain more or less the same elements:
    • There are the usual: Login button, About page, Contact Us, Help/FAQ, Blog. I think you call these 'footer.'
    • The SIGN UP/JOIN NOW/CREATE ACCOUNT button must be the biggest and most attractive element. That it will be the first to catch your attention. You must design it in a way that viewers are hypnotize to create an account.
    • Then there is the one-liner description about the product/service. It's usually a functional description of your product, but at the same time it must appeal to the emotions of the viewers. In short, you must have that one-liner cheesy feel good description about the product that your intended viewers can relate to. So if the LOUD signup button does not catches the attention of the viewers, the one-liner will be the back-up move.
    • Giving your viewer a peek into what they can expect from your web application. Twitter does it by displaying streams of tweets, and the faces of users. Others have the usual demo video -- boxee.net has a cute way of doing it but I'm not much fond of eye-candy websites. Others put headshots of their users. This will also serve as like the quick guide on how to use the application
    • I do not know what's the term for that, but you will sort of divide your page. Usually they will divide it into 4 -- upper/lower left, and upper/lower right. Anyway, I hope you get the picture. I believe that's how then you try to arrange the different elements in your page.
    • And, the most important is that the LOGIN/SIGNUP link/button must be somewhere on the upper right area of the page. I'm not sure what's the reason behind this. But we humans are already trained to look at that area if we want to log-in/signup so let's stick with that. If we are going to place it somewhere, viewers might need to invest time and effort to look for it that they'd rather click the X of the browser.
    • All in all the main story here is that do any thing to convince the viewer to create an account, and use your application.

From all the sites I look at, I really love the home page of Brightkite. I love the blend of color, and the cute illustrations. It looks fun, but not in a loud manner. 

Brihgtkite

So here is what I come up with after looking at the different sites. It's a far cry from brightkite, but I hope the story is there. I want it something funny. This is just a draft, and I'm showing it off to hopefully get comments from a more knowledgeable people.

Landingpage

I copy the design from: posterous, last.fm, and gowalla.

1

The other concept in my wonderful mind is something like with a touch of Pinoy. I want a colorful jeep with images of our Sto. Niño, then take it from there. So I wish someone can implement the following in a fun way. Picture here credit to .

Touchofpinoy

Or, if all things fail, let's do the minimalist way. Can you guess where I rip this off?

3

Ideas, concepts, and whatnots are all welcome!