Liveblogging Designing the First Fifteen Minutes
by Facebook Design on Saturday, March 13, 2010 at 1:29pm
Rob Goodlatte is a product designer at Facebook who worked for over a year on the new user experience. Daniel Burka was formerly the Creative Director at Digg, and is now at Tinyspeck making a game called Glitch.
Daniel: Here's an awesome thing that happened to me recently--I got a dog. At the time, I was at Digg, and Digg was a very dog-friendly office. This was great until i realized that getting to the office from my house with a dog was not easy. So, I decided to get a dog accessory called a 'car', particular a mini. I went to a car dealership with my girlfriend, and the whole new car-buying experience was really interesting to me.
The first thing that happens when you walk into a dealership is that there's a woman who greets you and recognizes you're a new car buyer. She connects you with a salesperson who is similar to you (young guy around my age). 3 minutes later, we had a key. Their goal was to get you into a car as quickly as possible. Just before you start the car, the salesperson tells me about a 'top secret compartment.' This is amazing! I know a friend who got a mini because of this cool 'top secret compartment.' Driving someone else's car is fun because you can drive it like an asshole. The salesperson in the back seat makes reference to the Italian Job, and I'm feeling pretty good.
Back at the dealership, there are a bunch of fun brochures about the mini, and it's cool how similar the people in the brochures are to me. But then we go to the office, and the salesperson asks me a lot of personal question--how much do i make? What do i do? This is when the experience starts to go sour.
Eventually, the salesperson has to go talk to his manager to 'negotiate a price', and while he's away negotiating, that's when I decide to leave the dealership.
We as designers are very attuned to bad user experiences. For example the experience at the Bart station totally sucks. But designers shouldn't throw stones at glasses houses. We have our own problems.
Rob: Generally, we designers are designing for ourselves. We take this to heart at Facebook, because we religiously use our own product. But this philosophy falls flat for the new user experience because we're only a new user once. This is especially true for social networks. We can't go back and feel what it's like to discover and become friends with a new group of people for the first time.
The approach we take is to design with empathy. But this isn't easy, because there's a massive gap and many of your assumptions are wrong.
Here's an example: recently blog site ReadWriteWeb posted an article about Facebook. They got a thousand comments saying stuff like 'what the hell? we want the old facebook back!" People actually thought read write web WAS facebook! They thought we had redesigned our site and made a red header and rebranded our name. While it's easy to dismiss these people, we have to put ourselves in their shoes.
Daniel: Many websites right now describe what your site does, and try to get you to hit the 'get started' button. This just isn't compelling. At Digg, we at least show you the articles before bombing you with a registration form. At Glitch, we got to rethink this. The first thing we do is let you choose your character. Easy and fun. Afterwards, you name it, and then we show you the character as we ask you for some personal information.
Geni does this very well--it's a genealogical website. You add your name first, then your parents names, and by that point you have a family tree. There's a button at the top that says 'save and continue' and now I've done something worth saving.
The idea of saving your progress is so important. Jobspice is another example. It's a resume-building application, but it doesn't try to market to you. Immediately, you start using their application to create your resume. Only when you hit save do you get prompted to create an account.
This won't work for everything, but another strategy is to prove that what's over the 'registration wall' is worth registering for. Gowalla is an example that has, on their front page, simple and easy-to-explain illustrations of their value proposition.
Rob: Try to figure out what the 'ah-ha' moment is in the new user experience. Last year, we brought in some users to test our registration flow. The tests were going all right until we got a woman who had the worst experience. Everything that went wrong did. She got a tough captcha, had trouble logging into her webmail account, and got error after error when filling out the forms.
But then something awesome happened. She got asked some basic information about where she went to high school, and in the next screen, her face just lights up because she saw someone she recognized as a suggestion. As a result, we designed an entire roadmap around that ah-ha moment.
Nowadays, we let people continue with the new user flow even if they haven't confirmed their e-mail yet, so they can get to the ah-ha moment sooner. This boosted registration by 5%, which is phenomenal.
Another ongoing test is to eliminate everything before the a-ha moment. Just type in your e-mail and we'll try to show you people you could be connected to. This way, you don't lose the people who would otherwise be frustrated by having to go and confirm the account.
A third thing we've done is to get friends to suggest actions that help a new user progress through Facebook. An example is suggesting friends and/or profile pictures for a new user. Today, we pump 4 million friend suggestions per day.
The feedback cycle for getting a user from new user to very engaged and active user is important, but a lot of this hearkens from game design. Game design is really advanced in this respect. The game Spore is a great example. in the beginning, you just eat things and grow, and try not to get eaten. It's very simple. If you succeed, you got to the next level which is more sophisticated, with more options and more rewards.
Mint.com has an example of this feedback cycle. As you type in the fields in their registration form, there's instantaneous feedback of whether the field you just filled out was 'ok' or had an error. The game Bejeweled Blitz is another example. As you're doing well, there's just a ton of visual feedback flashing on the screen on how you're doing, like 'good' and 'excellent.'
At Facebook, the high-level feedback cycle is around sharing. You post stuff, you get comments and likes from friends, and this drives you to post and share even more stuff.
Daniel: Make user education an experience, not something they have to read out of a textbook. The Windows XP tour is an outdated model--you install Windows you go through a wizard that tells you what Windows XP can do, instead of having you actually do it yourself.
Here's an example of the quests UI interface from Glitch. You can't just tell users to do 'anything.' You have to answer the question of 'what kind of anything can I do?' That's why the quests UI is effective in guiding you towards a direction.
LinkedIn has an example of these 'quests.' Once you sign in, there's a progress bar. Then, they tell you that if you complete a series of tasks (like adding a picture, adding a recommendation), you get more percentage points for your progress bar. In the process of doing these quests, you learn how to use the product.
Yammer is yet another example. After you log in, there is a 'to-do' checklist at the bottom of the page. Doing those things teaches you what you should be using Yammer for.
Games do a great job of doing this. They teach you controls as part of the gameplay--the first thing is always 'go left,' or 'go right' and try it out. In Super Mario Galaxy, the first task is to jump over ten bunnies, which is fun. You don't even realize you're being taught because you're so immersed in it.
Tumblr has used some of the above game mechanics. They teach you step by step--first, name your blog. Next, try posting a quote and then post a photo. Bam--now go and check out your blog--you have one!
Back at Digg, we thought it was obvious what 'digging' meant. It was ubiquitous. But we ran some user tests, and we realized new users had no idea what these digg numbers referred to. Then we mocked up a version with a small thumbs-up icon next to the 'Digg' action link. This had a significant increase in the number of people who Digged stories, because they now understood what it did.
Rob: Here are the key takeaways from our talk:
- see your new user experience with fresh eyes--watch new user tests.
- get newcomers invested right away into your product
- discover your 'aha moment' and get to it quickly
- Set small goals that expand into larger ones.
You can check out the slides from this presentation at Daniel Burka's slideshare.
Liveblogged by Julie
Daniel: Here's an awesome thing that happened to me recently--I got a dog. At the time, I was at Digg, and Digg was a very dog-friendly office. This was great until i realized that getting to the office from my house with a dog was not easy. So, I decided to get a dog accessory called a 'car', particular a mini. I went to a car dealership with my girlfriend, and the whole new car-buying experience was really interesting to me.
The first thing that happens when you walk into a dealership is that there's a woman who greets you and recognizes you're a new car buyer. She connects you with a salesperson who is similar to you (young guy around my age). 3 minutes later, we had a key. Their goal was to get you into a car as quickly as possible. Just before you start the car, the salesperson tells me about a 'top secret compartment.' This is amazing! I know a friend who got a mini because of this cool 'top secret compartment.' Driving someone else's car is fun because you can drive it like an asshole. The salesperson in the back seat makes reference to the Italian Job, and I'm feeling pretty good.
Back at the dealership, there are a bunch of fun brochures about the mini, and it's cool how similar the people in the brochures are to me. But then we go to the office, and the salesperson asks me a lot of personal question--how much do i make? What do i do? This is when the experience starts to go sour.
Eventually, the salesperson has to go talk to his manager to 'negotiate a price', and while he's away negotiating, that's when I decide to leave the dealership.
We as designers are very attuned to bad user experiences. For example the experience at the Bart station totally sucks. But designers shouldn't throw stones at glasses houses. We have our own problems.
Rob: Generally, we designers are designing for ourselves. We take this to heart at Facebook, because we religiously use our own product. But this philosophy falls flat for the new user experience because we're only a new user once. This is especially true for social networks. We can't go back and feel what it's like to discover and become friends with a new group of people for the first time.
The approach we take is to design with empathy. But this isn't easy, because there's a massive gap and many of your assumptions are wrong.
Here's an example: recently blog site ReadWriteWeb posted an article about Facebook. They got a thousand comments saying stuff like 'what the hell? we want the old facebook back!" People actually thought read write web WAS facebook! They thought we had redesigned our site and made a red header and rebranded our name. While it's easy to dismiss these people, we have to put ourselves in their shoes.
Daniel: Many websites right now describe what your site does, and try to get you to hit the 'get started' button. This just isn't compelling. At Digg, we at least show you the articles before bombing you with a registration form. At Glitch, we got to rethink this. The first thing we do is let you choose your character. Easy and fun. Afterwards, you name it, and then we show you the character as we ask you for some personal information.
Geni does this very well--it's a genealogical website. You add your name first, then your parents names, and by that point you have a family tree. There's a button at the top that says 'save and continue' and now I've done something worth saving.
The idea of saving your progress is so important. Jobspice is another example. It's a resume-building application, but it doesn't try to market to you. Immediately, you start using their application to create your resume. Only when you hit save do you get prompted to create an account.
This won't work for everything, but another strategy is to prove that what's over the 'registration wall' is worth registering for. Gowalla is an example that has, on their front page, simple and easy-to-explain illustrations of their value proposition.
Rob: Try to figure out what the 'ah-ha' moment is in the new user experience. Last year, we brought in some users to test our registration flow. The tests were going all right until we got a woman who had the worst experience. Everything that went wrong did. She got a tough captcha, had trouble logging into her webmail account, and got error after error when filling out the forms.
But then something awesome happened. She got asked some basic information about where she went to high school, and in the next screen, her face just lights up because she saw someone she recognized as a suggestion. As a result, we designed an entire roadmap around that ah-ha moment.
Nowadays, we let people continue with the new user flow even if they haven't confirmed their e-mail yet, so they can get to the ah-ha moment sooner. This boosted registration by 5%, which is phenomenal.
Another ongoing test is to eliminate everything before the a-ha moment. Just type in your e-mail and we'll try to show you people you could be connected to. This way, you don't lose the people who would otherwise be frustrated by having to go and confirm the account.
A third thing we've done is to get friends to suggest actions that help a new user progress through Facebook. An example is suggesting friends and/or profile pictures for a new user. Today, we pump 4 million friend suggestions per day.
The feedback cycle for getting a user from new user to very engaged and active user is important, but a lot of this hearkens from game design. Game design is really advanced in this respect. The game Spore is a great example. in the beginning, you just eat things and grow, and try not to get eaten. It's very simple. If you succeed, you got to the next level which is more sophisticated, with more options and more rewards.
Mint.com has an example of this feedback cycle. As you type in the fields in their registration form, there's instantaneous feedback of whether the field you just filled out was 'ok' or had an error. The game Bejeweled Blitz is another example. As you're doing well, there's just a ton of visual feedback flashing on the screen on how you're doing, like 'good' and 'excellent.'
At Facebook, the high-level feedback cycle is around sharing. You post stuff, you get comments and likes from friends, and this drives you to post and share even more stuff.
Daniel: Make user education an experience, not something they have to read out of a textbook. The Windows XP tour is an outdated model--you install Windows you go through a wizard that tells you what Windows XP can do, instead of having you actually do it yourself.
Here's an example of the quests UI interface from Glitch. You can't just tell users to do 'anything.' You have to answer the question of 'what kind of anything can I do?' That's why the quests UI is effective in guiding you towards a direction.
LinkedIn has an example of these 'quests.' Once you sign in, there's a progress bar. Then, they tell you that if you complete a series of tasks (like adding a picture, adding a recommendation), you get more percentage points for your progress bar. In the process of doing these quests, you learn how to use the product.
Yammer is yet another example. After you log in, there is a 'to-do' checklist at the bottom of the page. Doing those things teaches you what you should be using Yammer for.
Games do a great job of doing this. They teach you controls as part of the gameplay--the first thing is always 'go left,' or 'go right' and try it out. In Super Mario Galaxy, the first task is to jump over ten bunnies, which is fun. You don't even realize you're being taught because you're so immersed in it.
Tumblr has used some of the above game mechanics. They teach you step by step--first, name your blog. Next, try posting a quote and then post a photo. Bam--now go and check out your blog--you have one!
Back at Digg, we thought it was obvious what 'digging' meant. It was ubiquitous. But we ran some user tests, and we realized new users had no idea what these digg numbers referred to. Then we mocked up a version with a small thumbs-up icon next to the 'Digg' action link. This had a significant increase in the number of people who Digged stories, because they now understood what it did.
Rob: Here are the key takeaways from our talk:
- see your new user experience with fresh eyes--watch new user tests.
- get newcomers invested right away into your product
- discover your 'aha moment' and get to it quickly
- Set small goals that expand into larger ones.
You can check out the slides from this presentation at Daniel Burka's slideshare.
Liveblogged by Julie


