Jason Shah

Kickstarter is another hot application that is on my radar (aside from Airbnb, which caused a firestorm of reaction in my last post). The Kickstarter team built a platform for individuals to raise funding for creative projects from anyone in the world. I love that the mission is inherently beneficial to the world. We live in an increasingly commercial and uncreative world (IMHO). A platform that lets anyone with a good idea (and the technology and wit to be successful on Kickstarter) build their dream is powerfully important and democratizing.

—

This post is incredibly long. Almost to a fault. Feel free to read the below bullets and skim all the bold text below, if that. There’s more richness in the details, but I’m just happy to have you here reading anything at all!

TLDR; 

• Create a simultaneous sense of trust and urgency to drive financial contributions
• Balance a refreshingly human personality with quantitative social proof to encourage involvement
• Reserve emphatic design for critical ‘inflection points’ to really make those elements punch hard

Please comment below and discuss/vote on Hacker News!

—

It democratizes the development of creative works. This means more unique products, artistic creations, and new media.

Anyway - enough with being a fanboy. Let’s learn.

Read this post if you want to pick up at least one way to improve the user experience of your app; hopefully you’ll come away with many more. I highlighted the most salient points to make skimming easy. Please share this article widely!

—

Recently, Kickstarter had its 3rd million dollar project (a click-and-point video game from Double Fine Studios in SF). In fact, it’s now past $2 million. That’s amazing. 

But could any ol’ site that allowed this platform functionality help this project do what it has done? Doubtful. And maybe even Kickstarter itself could not have done this without the recent press and word of mouth it is has generated. Indeed, IndieGoGo has existed for longer but hasn’t blown up like Kickstarter did recently. Either way, one thing is for sure:

Without an incredible user experience (driven also by a very compelling project and promotional campaign), it is highly unlikely people would willingly give their hard earned money away without immediately, or previously, receiving the actual good or service. 

Therefore, the question is, what can we learn from Kickstarter’s UX?

(Note to frequent readers and new ones alike: I’m adding an ‘Apply to Yourself’ section to various parts of the posts since I want to help people remember to apply these lessons to their own applications. These ‘Apply to Yourself’ sections will just ask you questions to frame the #UX lessons back into actionable introspection. And allow me to use hashtags #excessively.)

—

Most projects have some initial backers: family, friends, maybe even the Kickstarter team itself. These backers will promote for you: word of mouth or social media generally. Here are some tweets that were likely useful for this particular campaign run by Double Fine Studios:

Zoomed in on a couple of them -

(The point of this particular section is to drive home how Kickstarter is a platform VERY WELL positioned for viral sharing. Jump past it to focus only on the on-site UX).

Notice the second tweet (by @fortyseven). It appears that when you give on Kickstarter, you are encouraged to share on Twitter (and Facebook + other social networks in all likelihood). 

Some applications attempt to “bake social in” by pushing social sharing on users when doing so is not something a user wants to do. Almost always the successful instances of social sharing are when the application is enabling the user to build social capital.

• Pinterest - share it/Pin cool stuff and people think you’re cool/hip/knowledgable about a certain topic - I’ll take some of that!
• TechCrunch, blogs, and other media outlets - share it and you’re just helping expedite the spread of news and keeping your friends/followers in the loop. Plus you seem like the one who is up on the latest scoops - go you!
• EventBrite, MeetUp - share it and you’re just inviting others to this event and announcing your attendance in case a friend may be interested and could join you. If it turns out to be an awesome time, YOU were the one who made it happen.

In each case, sharing is good for the sharer AND the “sharee” (if you’ll excuse my made up language).

One of the beauties is that applications are serve as this new, neutral third party for bragging, and the way the share messages (e.g. tweets) are phrased makes it typically sound like you just had to click Tweet to broadcast this pseudo-bragging message. Had you typed out a bragging message yourself, that would be uncool. But Tweeting something that happens to promote you is … less bad, and in fact, borderline acceptable. Applications leverage this bragging to drive traffic to themselves.

For example, Klout lets you Tweet out when your Klout score goes up. The text of the default Tweet: My @Klout score is 46. I improved it by 1 point over the past day! http://klout.com/user/jasonyogeshshah/score-analysis?n=tw&v=daily_welcome

or the visual - 

But imagine if I crafted my own Tweet, unprompted by or promoted via Klout, and it was something like:

“Nice - my Klout score is now 46. That’s pretty awesome. I must be tweeting some really awesome content. Go me! I’m better than you”.

…that would be horrible. It would seem self-promoting, and I wouldn’t even send it out because it would make me look bad (and I don’t think I am that great.)

But in a weird way, when it strikes a balance between commercial and personable the way the Klout default tweet does two things:

• People know you didn’t write it, so they don’t fault you for the self promotion (because the message seems like it came from an application, not you. that’s the ‘commercial’ part)
• Even though you could be faulted for self promotion by even Tweeting it, people often take it as you just “participating” in these social networks and inviting others to do the same, rather than bragging hard.

This more positive perception of these standard messages that the application generates is key because it is more inviting than off-putting (when you craft your own boastful message). If it were offputting, people would have a negative association with YOU and the application.

-

In the case of Kickstarter, they let you brag about your altruism AND share pretty interesting, novel projects. Hooray - you’re a patron and a hipster! Either way, there’s clear motivation for you to share that you just supported an exciting project with a $50 contribution. Also, your friends/followers will discover otherwise unknown projects which are exciting to browse. So this passes my heuristic of social sharing needing to provide value to both the sharer and those being shared with in order for users to want to share content.

As I said, the point of this particular section is to drive home how Kickstarter is a platform VERY WELL positioned for viral sharing.

—

[Apply to Yourself: How can your application enable people to build social capital? Valuable info, engaging media, broadcast a message the user can’t broadcast themselves?]

—

(Jump here if you don’t care to read the section above on Kickstarter’s virality. If you read that section, and are just continuing on, you are officially awesome.)

Moving on, let’s check out the actual page that really clinches so many people.

You can visit it directly here - http://www.kickstarter.com/projects/66710809/double-fine-adventure?ref=live

Let’s move from top down -

Consider where your users came from and welcome them accordingly.

Kickstarter has users coming from the Kickstarter home page, other Kickstarter projects, their blog posts about popular projects, email links, Facebook likes, Tweets, etc. Each has their own unique context, and the message to a visitor could be tailored accordingly.

However, at a base line, Kickstarter always has this blue banner (see below) across the top of its pages and lets you get familiar with it as a platform. Given that most users may very well come from social networks (rather than directly to kickstarter.com) where they know their friend promoting the Kickstarter link better than Kickstarter itself, it’s important that Kickstarter gives the new visitor a chance to acquaint themselves with Kickstarter. Contributing money without understanding the platform facilitating a financial transaction is unlikely. One could argue that this banner and the ensuing overlay actually reduce bounces, increase time on page, and drive more contributions.

Notice a couple of things

• Personality - The “?!” ribbon. The fact that the ribbon (the darker blue) extends just below the top message element (the lighter blue). Each of these makes the site feel more human. It’s not a formal “About Kickstarter, Inc.:”, etc. and by a small design tactic, the ribbon running over the bottom of the larger horizontal blue element, this ribbon adds an imperfection that contributes more to perfection than anything else (?!). If that ribbon was the same height as the background on which it is set on, it would feel, well, artificial. Of course, it would look FINE. And to the not-so-savvy, it might look better. But these small quirks, similar to color gradients and patterns/noise on backgrounds, make things feel more real in today’s web app environment. Indeed, they model the real world in which things overlap, cross, run over, and more. Real ribbons fly imperfectly in the wind, not staying tied down to anything.
• Color Scheme - Without using too many colors or distracting from the main content, a calm blue with the yellow for ‘Learn More’ is inviting. Learn More uses a familiar color palette in that yellow text may often be linked as “Learn More” in a lot of web color schemes. If the ‘Learn More’ were green, for example, it may feel like that Green, which is more of a ‘Go!’, ‘Next step!’ type of color that is often associated with sign up or other more significant actions. Making this text an action color like a green would you to interact with the “Learn More” content rather than checking out the project right in front of you. Yellow is relatively neutral and not attention-seeking.

[Apply to Yourself: How can you tailor your app to engage traffic based on the referral URL/origin? See my post on ‘Targeted Requests for Social Sharing’ for more on this. I built a Javascript plugin for this; if anyone’s interested - email me.]

If providing “Learn More” info - do it ON the same page from which a user clicks the link. Don’t bounce a user elsewhere.

I can’t emphasize how supportive I am of overlays. A key difference from pop up boxes (a common, flawed analogy for overlays/light boxes) is that people may have OPTED IN to bringing up an overlay; popups were entirely unwanted (not to mention the content was often for a third party, and a spammy, seedy third party at that rather than the source being the very site that a user is currently on).

Check out their awesome overlay -

Zoomed in -

Treat the “Learn More” overlay like your once-in-a-lifetime chance to land a big client. Answer the major questions. Kill it with design. Evoke powerful emotion.

Here’s how they do it - 

• Crisp design - Professional-looking navy blue ribbon (consistent with the original on-page ribbon). Subtle dark grey outline around the white overlay. I have written before how design consistency->trust. The notion of ‘crisp’ is hard to nail. But this overlay just has it. Learn from it. I didn’t even read the non-bolded parts of this overlay, and I felt like I could trust Kickstarter…because the design is so kick-ass.
• Remind people of their childhood with color (or, evoke emotion by tapping into a known color palette) - How often do we see a rainbow of colors? People WANT to be creative. People WANT to be associated with creativity. This rainbow of font colors on the overlay - but used in a limited sense so as to not overwhelm the user - is deployed tactfully and like I said, in a limited fashion. It’s enough to stand out and remind me of coloring and crayons from being a kid when I still had time to be creative regularly. This evokes a real emotion in people, I think. Red/white/blue may make people living in the United States feel patriotism. A certain blue hue on white makes people think of Facebook and whatever association they have with Facebook. And so on. Leverage the right palettes to piggyback on existing emotional ties to colors.
• Brief text that answers the biggest questions. Four questions are answered in the overlay. You want to know what KS is, you want to know what it is disrupting (maybe not - but they answer that with #2), whether you’ll be charged if something doesn’t get produced, and who is behind these projects. They answer these questions - concisely and memorably.
  
  Also note language like “an independent creation of someone like you.” Someone like me? Wow. I want to be a part of this because I want to support people like me, or who I strive to be. And I want to aspire to be creative or scratch a creative itch my 9-to-5 desk job doesn’t let me scratch. Same logic goes for why people like to hire people like themselves. “Affirmation bias”. So if these people are LIKE ME, I want them to succeed. (It implies I will then succeed, since we’re similar!) So then how do I make them they succeed (so I can succeed)? I fund them (so it’s like funding myself). Whoa - there goes my wallet!
  
  [Apply to Yourself: Are there ways your app’s UX can make new visitors feel like your app is something they need to be a part of? A movement they don’t want to miss out on?]
   
• Make the next natural step be returning to the project page that the user was already on - and do not go down an FAQs rathole that is likely to cause them to bounce. Kickstarter could link to the full FAQs page from this “Learn More” overlay. Indeed, that almost seems natural or best practice, right? “Here’s a short form FAQs page…click through to see more!” It seems logical to do this. But rather, by NOT linking through to an FAQs page (where, in reality, people would likely bounce given two reasons: 1) that content (FAQs…*yawn*) is not as exciting as a product page 2) that content is not what the user intended to consume when they clicked through the project URL on a social network or elsewhere.
• Make the user thank you. Stick with me on this. I know it may sound bizarre but this is a subtle sign of brilliance from Kickstarter. You can close this overlay in 3 ways: 1) hit ESC 2) click the relatively subtle X button in the top right 3) click the most apparent element and the only linked element on the overlay that says “Thanks! All done” in the bottom left area.
  
  The third (“Thanks!”) is most prominent and IMHO most likely to be clicked based on styling and positioning (at the end of the content). There’s no guarantee that ESC will close the overlay (and non savvy users don’t know they can do this). It would be more physical work to mouse up to the rather hard to see X to close the overlay. So…you probably will hit the “Thanks!” In truth, we don’t know who is saying thanks. It probably is Kickstarter saying, “Thanks, all done now. Click to get back to the project”.
  
  But it also could be taken as the user sort of admitting a ‘thank you’, even if they wouldn’t have said it, “Thanks! All done reading your content and now I feel ready to check out this project and contribute!” is almost said for us. By this being the most prominent way to close the overlay, or just take ANY action since there aren’t other compelling elements with an ASK on the page besides that link, you’re almost forced into saying “Thanks!” without minding much. Indeed, clicking it made me sort of simulate in my head saying “Thank you!” I nearly mouthed at the screen “Thanks, all done!”. Weird, I know, I know. But psychology is weird, so roll with it. Your users mouth things at screens, too.
  
  Either way, “Thank you” is a positive phrase. Seeing it, saying it, clicking it, is good. And if you can sort of ‘trick’ a user into thanking YOU, then you’re ‘injecting them’ with a positive association towards you. And any action you want to get them to do is more likely thereafter.
  
  [Apply to Yourself: Is there a way your app can increase user happiness and get them to Thank You? Can you get a user to click “Thanks. Create my account now!” instead of “Submit”? Maybe that’s a start to boosting affinity. How else can you boost your app’s ‘brand affinity’?]

Open the funnel to almost any desirable action with an ironically selective set of options. (i.e. Many options for action; few elements)

Zoomed in - 

A few things done well here - 

• Appropriate logo/font. KICKSTARTER. It’s fun, it’s bold. Notice the “fun” comic sans-esque (or maybe not? anyone know what it is?) font. Notice the all caps. Notice the separation of “Kick” and “Starter” based on color. It makes it easier to remember the name IMHO, as well.
• The right color scheme. White background with the standard light blue links keeps this element from becoming too distracting.
• Evocative language. “Discover”. “Start”. These words could have been “Browse” and “Post”. But they are not! They are big words. Human words. Exciting words. ‘Discover’ blows ‘browse’ out of the water any day. ‘Discover’ is what you did when you were a kid who knew no boundaries and had never been let down by the world. Browse is what you do on your weekly grocery run. C’mon people! This stuff matters.
• Search enables freedom. I don’t know what I would look FOR on Kickstarter. Maybe I would type in “music” if I wanted to find an artist to support. Kickstarter’s element here doesn’t NEED a search bar. But they put it there any way because it is a “catch all” - no user can possibly come to this element and feel stumped, because when in doubt, we search. And when we have options, we don’t feel desperate. Desperation causes bounces, so cut that out, and you’re doing yourself a favor.
• Fade less important calls to action that a user will find any way if they really want to. Notice ‘Blog’ and ‘Help’ are present but in grey. ‘Sign up’ and ‘Login’ are in blue; those actions return more immediate benefit to Kickstarter as a platform, so they are emphasized visually. If someone wants to read the blog or get help, it’s there for them to find and click on.

OK, now we will finally get to the actual details of the project page beyond Kickstarter’s standard UI elements.

Make your main content stand out from adjacent element and make it POP!

Check this out - 

• The light brown background is off set from the adjacent white on the top and bottom; immediately stands out.
• Large hero text for the project name. (Pick yours carefully, Kickstarters!)
• Comprehensive but not distracting subtitle to convey the substance that catchy titles rarely convey. Just the hero text wouldn’t communicate what this project is about. You need that one liner. AngelList does this well, too.
• Ability to take action right away. Typically titles just catch our attention. We can’t take action. In hindsight, this is a little silly. The title, the single most attractive element (often), is one that we cannot interact with. Take titles on articles, for example. Imagine if you could just click on the title and it would share the article, or hovering brings up social share options (as it does some times). Or hovering on it gives you a pithy description of the post. Big, attractive elements catch users’ attention, so applications should do something with that once that attention is in our (the application’s) hands - and Kickstarter uses this prominent element for a place to ‘send message’, ‘remind me’ and tab through the home, updates, backers, and comments
• Makes the impersonal super personal. Surprise people with how open you are and they will love you. Notice the ‘Send Message’ functionality. What is this, Facebook!?  I can message this super awesome project?! The people behind it will read what I have to say? You’re not just trying to take my money without letting me ask questions? Nice. As far as I know, not even Kiva lets you communicate with the people you fund or maybe even a liaison if there are cultural/language/technological barriers to communicating with the borrowers. (I am a fan of Kiva - this is not criticizing them, but praising Kickstarter).
• Display a population when it exists; hide it when not. There’s a lot of activity on this Kickstarter page as we see in the tabs - 2 updates, 64250 backers, 5759 comments. Showing numbers, adjacent to page/section titles, (e.g. “Backers”) is a form of social proof/population that encourages activity and suggests legitimacy. 
• The tab interface makes the interaction cost seem low vs. being sent to different pages. Indeed, the tabs link to separate pages and does not load the content on-page using AJAX. But designing it as tabs makes the content seem more connected and fluid, and makes the user feel like they can click somewhat non-commitally (clicking and waiting for a page to load won’t be a pain).

Notice that for the ‘send message’ feature, when login or sign up is required, Kickstarter doesn’t bounce you to another page.

But more importantly, and uniquely, they also don’t just show a standard login or sign up overlay. They note which action you were trying to complete, to connect the need to login/sign up TO that action (see top of overlay). It makes me feel less hopeless in the way that a general sign up forced on me would make me feel hopeless. It’s also specific to the particular project. Good stuff. It also is probably a standard overlay BUT they just have a dynamic element there to keep it seeming unique and tailored to you. This means a low engineering cost but high interaction design pay off.

OK so back to the full page

Giant, attractive image. The value here is obvious. It’s engaging. Exciting. But more importantly, note what Kickstarter does not GET WRONG. They have the image set so that the whole thing fits ABOVE the fold. Letting someone get the whole picture is important IMHO. The effect of a powerful image is lost if browsers factor in and affect the emotion an image can otherwise evoke. Notice, too, that the image has text onset, so that the image itself continues to explain, or introduce, the project even if the visual itself is ambiguous. Perhaps an image with no text whatsoever would be similarly effective, or more visually powerful, but in this case where the project needs to be explained and the user comfortable with the people behind it, some explanatory words are totally fine.

Note - it’s actually NOT an image. It’s a video. So click as you may, and you’ll be greeted with a useful, punchy intro video to the project. People like clicking things. The less people click and get disappointed by a lack of a response - the better. So increase your page’s responses without cluttering things. Notice that the first time the page loads, I was given no indication that this was a video. Only after refreshing the page and clicking around the other tabs is the familiar ‘Play’ button centered in the media element. That is clever. See below.

There’s a clear trade off between how slick the image looks and *not* distracting it is, vs. getting the user to complete the action (which may be watching the video). It appears that Kickstarter, or the poster, is, by not emphasizing the video/its controls, optimizing for getting a user to navigate elsewhere on the page and consume textual information about the product — rather than having them sit and watch a video.

I wouldn’t be surprised if a high percentage of users who start watching a video actually bounce from pages unless it’s a really really engaging video. And if the volume control is up and they’re somewhere where they should not be watching a video, then they’ll definitely X out your window ASAP. So use video carefully, and perhaps expose the video controls when you anticipate the user wants to watch it, rather than by default. You may improve conversions and action taken on other content by de-emphasizing the video element.

It goes without saying that the thumbnail (or the default image of the video that a user sees if they do not watch it) should be chosen carefully. It should communicate what you want the video to communicate, in an image. Be careful when embedding a YouTube video on your site that you capture and display the best thumbnail possible - consider even A/B testing it you can with a success metric being 1) overall engagement 2) clicks on the video for starters.

Enable virality when virality is natural. Place social sharing functionality close to the content that will trigger the desire to share. It’s like selling gum and magazines at the checkout aisle: immediate gratification.

You can Like it. You can Tweet it. You can embed the content. You can copy/paste the URL. That’s cool. Notice how KS must know that these projects are often Liked at a very high rate, so displaying the number of Likes makes sense. However, the number of Tweets is not exposed. This could be for a variety of reasons. My gut says it’s not because they just don’t get a lot of tweets. It may be too much to show so many numbers in this element. It may just be by ‘accident’ or ‘just because’. Either way, something to note.

I wonder if soon you will be able to “Pin It”.

Observe how these share options are right below the hero media (the big media that occupies prime (screen) real estate). This is probably the element that evokes the most emotion and sense that this is something cool, so this is the best place to have someone share content. Similarly, this is why people place a ‘Share’ elements at the top and bottom of articles: either you read the headline and know this is something to share, or you made it to the bottom (clearly you found value in the article) and now want to share it with the world after vetting it as a high quality piece of content. It would be silly to interrupt the flow of an article and insert a tweet button after the first paragraph or something. That would be a suboptimal moment to present the share options. 

Social proof and traction displayed adjacent to the evocative image. Make ‘em feel, then seal the deal with data. Images and numbers are opposite in many respects. Kickstarter appeals to both your left and right brain with this one-two punch, so no matter who you are, either you’re pulled in by the image, or drawn in by how much traction this project has.

Cover all bases of proof that are relevant. Emphasize people before money. It’s about the people. Notice how the # of backers is shown above the # of dollars contributed. I think Kickstarter has to maintain an emphasis on the people - the ones building, the ones contributing, and the ones doing both. Money can be dirty. Being all about how much bling this project is accumulating would be wrong. So in 3 big numbers - with people being first - Kickstarter tells you how many people are in, how generous they’ve been and how much money this project has raised, and how much time you have left to get in on the project and be a part of this revolution. They simultaneously suggest legitimacy (with people and money), and create a sense of urgency (with the days left).

Let’s look a bit closer at this informational element - 

Let’s not ignore how they show how much the pledge goal was. By doing this, you either prove 1) this project is awesome because it exceeded the necessary amount 2) the visitor’s contribution is REALLY needed because the project is either ‘THIS CLOSE’ to getting funded, or it’s so miserably underfunded that you need to take pity and pitch in. No matter what, I want to give!

Moreover, there’s a very precise declaration of when the project will be funded. This helps further a sense of precision and legitimacy. And urgency. The dark grey ribbon is also a nice little design touch. Notice the ribbon theme - consistency. Trust.

Lastly, the large green ‘BACK THIS PROJECT’ is great. It stands out because that green is only otherwise used for the ‘STARTER’ in ‘KICKSTARTER’ so there are no adjacent elements with which this particular action button can be confused. On a deeper level, ‘Starter’ is then associated with this button as the only other element sharing this color. The button has baked into it meaningful action. When I clicked…I become a Starter. Yes. That’s what I want.

(And note the subtle, inset horizontal rule below this and the start of all the ‘rewards’. This is a necessary but non-obtrusive way to distinguish elements, without needing a separate background color or entirely different element. ).

If you’re asking for money, 1) always remind the visitor what they get 2) remind them as visually close to where they click to take action as possible.

A subtle point of UX brilliance here is placing the lowest viable contribution right below the button to contribute.

Zoomed in -

Note how they could have placed the largest amounts at the top for various strategic reasons, but placing the lowest initial contribution makes the barrier to contributing seem much lower than if the largest contribution level were what they emphasized in the UI. $15 makes me look at the green button and consider. Seeing $10,000 below that button would have made me bounce away.

Again, they leverage social proof by showing how many existing backers there are. Notice that they COULD link ‘Backers’ to the backers tab but they don’t do that. It would throw a distracting action link into the mix, so close to the contribution button, at that. It’s like asking people at a checkout line if they’re sure they don’t want to shop down the street instead.

Also note how there is an ‘Estimated Delivery’ date. It’s interesting that this element exists, and how it is worded is also of note. “Estimated delivery” is reserved for something that will get shipped to you or somehow physically presented to you when we shop online. Many items on Kickstarter may very well be digital, but using this language helps make the item feel more real and inspire a sense of confidence that your contribution will result in you really and actually getting something. It draws on the mental model of when we buy clothes or other items online and receive an email with an “Estimated Delivery”. Admittedly there’s some negative connotations with shipping, FedEx, USPS, etc. — but the benefit of making a potential contributor feel like something will ARRIVE outweighs the negative here.

Alternative phrasing could be “Estimated Availability” - which would make a user feel like they’d still have to ‘order’ the item when it becomes available - or “Will be ready by” - which commits too much to a hard date and doesn’t leverage a mental model for product ordering and delivery.

Note how some of the pledge levels even indicate being ‘Sold Out’ (see below). Talk about driving demand. Nothing like not being able to have something that makes people want in.

This idea can be leveraged in the sign up process with concepts like ‘Invitation Only’ Membership. Even today sites like Pinterest continue to use this tactic. Years ago Gmail did this via its initial beta roll out through which a Gmail beta invite was required from an existing member.

While Kickstarter legitimately has sold out of this contribution level, designers can conceptualize other ways to express high demand for a product that drive users to feel a desire to get in to be part of the in crowd. Kickstarter could have instead not shown when an item is sold out, or it could have not shown the “(0 of 900 remaining)”, or it could have faded out this element. But instead, Kickstarter deliberately promotes the fact that this project is so hot that it won’t even ALLOW you to give money to it (at a certain level). This drives a sense of legitimacy and urgency (to contribute at a different level before that runs out, too).

-

As for ‘About this Project’ - note that it doesn’t occupy the full width of the page, so that the elements with the different contribution levels is always in view, adjacent to the text and media content that is selling you on the project. This shortens the distance between appeal and action. Similar to impulse buys at the grocery store.

They have a range of text mixed with video and images. Good use of different media; provides the detail a user may want via text and the gripping, quick-glance sell that videos and pictures provide.

Notice how the text of this main element for ‘About this project’ is a lighter grey vs. the darker grey in the pledge element to the right. Distinguishing text via different font colors helps to make all of the text on the page less overwhelming than it may otherwise be. But yet the colors are not wildly different, so that a consistent color scheme remains and the page doesn’t denigrate into some sort of wild west of font colors.

Assume you scroll through everything, or just jump to the bottom. You will get to the FAQs. They’re especially well done for a few reasons.

Zoomed in - 

And after clicking on one question and expanding - 

Zoomed in - 

So a few things are done right -

• Keep the user on the page. Designers: Make your page expand elements before adding them, if you can do so gracefully. Even better than an overlay in this case (since the content doesn’t merit the space an overlay would take and for getting a Q answered, an overlay seems like an unpleasant experience) is the choice to expand content right in the same element.
• Use sideways and downward arrows to suggest that content can expand (look to the left of the “Q”). If the UI didn’t have these, I may not have believed I could click on an FAQ item without being transported elsewhere. Indicating how an element will behave is almost just as important as enabling that element’s behavior in the first place.
• Use a light but distinguishing background to offset the content and distinguish it from everything else - but don’t make it distracting.
• Indicate when the content was last updated. Clearly if I am reading the FAQs, and a specific answer (meaning I clicked to view the response), I care about the validity of the answers that are provided. Are they still accurate? Has something changed? Showing when this info was last updated helps to put a user at ease and believe that everything is accurate and that they can trust the response.

Bonus points - at the bottom of the page, there’s a cool effect. You can click an image of a scissor, and basically cut off the footer - see below for the series of images or check it out for yourself - http://www.kickstarter.com/projects/66710809/double-fine-adventure?ref=live.

 

—

No clicks - 

Clicked once -

Clicked twice - 

Clicked thrice - 

Some people may not appreciate it. But Kickstarter is for creatives. Paper, pencils, glue, scissors. It’s kind of a cool little interaction that makes someone smile a tad.

This sort of personality is huge in standing out in a sea of web apps that fail to be personable and ‘human’. Kudos, Kickstarter.

—

Wrap Up - 

Kickstarter has killed it. I can add criticism, and perhaps will do so in a follow up post. But on a high level they do a few key things - 

• Create a simultaneous sense of trust and urgency to drive financial contributions
• Balance a refreshingly human personality with quantitative social proof to encourage involvement
• Reserve emphatic design for critical ‘inflection points’ to really make those elements punch hard

I hope this post made you think.

What lessons do you plan to implement? What UX quirks did I miss? Did this UX really wow you, too?

Let’s discuss this in the comments and on Hacker News! GO.

EDIT -

This Tweet made my day today - pure awesome.

@FAKEGRIMLOCK @jasonyogeshshah @kickstarter I loved the article so much, that I am making it my first ever tweet.Thanks for sharing.

— Brian Gregozeski (@BrianGregozeski) February 29, 2012

Tweet Follow @jasonyogeshshah Vote on HN