The first time that someone comes to your website is like a high school dance at the gym. You want that hottie who you have been thinking about all year to be attracted to you and join you on the dance floor . You want to show them what you are all about: how you aren't just about the MC Hammer pants and bikini top you are wearing (dating myself much?) - and you have the moves to prove it. This dance is just the beginning - you really want to go steady, but you have to start somewhere, right?
About 40-60% of users who sign up for a free trial of your software will use it once and then never come back.
When designing the on-boarding experience, we have a few goals:
- We should make a positive user experience where the visitor learns something within minutes of interacting
- We should have the user take some action which results in signing up for a Webmaker account
- We should give the user a clear and compelling reason to return.
Deeply inspired by the theory of Hanging Out, Messing Around and Geeking Out: Kids Living and Learning with New Media, I started to think about what a low bar way might be to get people to dance with me. The idea is that there is a progression and/or just different ways that a site visitor might interact with the site. I wanted to create an experience for the user, that will allow them to walk away having seen a little bit of code, had the a ha! moment, the realization that there is so much to learn about the way that the web is crafted - and most importantly: that remixing the web is an approachable challenge. According to this chart below, we could argue that most of our site visitors are at the beginning of the customer awareness journey.
Start from the beginning --- err where is that exactly?
I started by doing an exploratory sketch - asking where might users first see/ interact with the Goggles on Webmaker? I see 5 main areas of contact:
- Via the not-yet-existing "Join Webmaker" button user flow
- Within the Goggles interface upon activating the bookmarklet
For this heartbeat (and the build sprint after) we decided to focus on number 1 via 2 (Join Webmaker user flow via the landing page) as the goal for the first quarter is to improve our conversion of visitors to Webmaker.org into makers.
Think through the user flow
With a clear scope, I took a stab at thinking through potential user flows (ahem,dance moves). What interactions might I be able to design that could help the user gain an understanding of the awesome potential of Webmaker and come away with learning a little bit about making things on the web within the first few minutes of their site visit? On a traditional site, this is where I would do a product tour - to tell the visitor about all the bells and whistles. But, let's remember, we are at a high school dance. We don't want to just tell that hottie about how great we are, we want them to hold our hand and dance with us. So what exactly is our dance? It's an introduction to the site through an interactive tinkering activity.
I had some experience tackling this user experience challenge a few months back when I designed the Maker Party snippet for the Firefox about page. Here, we were trying to coax visitors to the About Page to sign up for Webmaker AND ... (the cooler part) expose them to a little bit of code through modeling a playful interaction that they in turn would emulate. We found this approach to be successful. I personally user tested the page with a variety of site visitors in the Hive Learning Network and found that the animated modeling of the CSS value being typed acted as I would as a teacher in a classroom, or a friend showing someone how to approach the problem, asking the friend to try it out themselves. This approach could easily translate to an activity on the landing page where we show a visitor how to edit some playfully placed text using the X-Ray Goggles.
Approach 1: Modeling
Modeling tries to emulate the way you might teach this in a classroom environment - you show the actions that you want the learner to emulate. See complete mockup here.
I also tackled this challenge of getting a user to dabble with new information and content in the weather activity experiment for the Hour of Code. Here, I thought about how I like to follow recipes and get feedback as I do each each step in a staged progression. (This would be like... someone teaching you how to do the macarena step by step at the dance)
Approach 2: Stage Progression
The staged progression allows the user to read, and then asks them to try it out, providing little tips along the way. See complete mockup here.
After getting some feedback from my colleagues and a few user testers I am leaning towards a hybrid approach - where you might model for them at each "step."
Next up: enticing your friend to get on the dance floor
All of the user flows and interaction designs are a good exercise, but if the icebreaker prompt isn't enticing, then it's no good. So - I did a few iterations:
Name tag fill in the blank --- this could somehow tie in to the sign up flow.
Venn Diagrams - probably too designerdy but I couldn't help myself.
Fill in the blank - I <3 webmaking.="">
Fill in the blank - attempt 2. I like this one the most at the moment because it has a focal point, and it feels a bit disruptive, like Webmaker itself.
Next up: Finding those dancing shoes.
To get to an interactive prototype, we need to:
- Design the hybrid interaction design (modeling + staged progression)
- Choose a direction and then work on the UI elements
- Wordsmith the copy.
- User test with real humans!
Designing an on-boarding is like asking someone to the dance floor ----testing if your pits stink and all, so I would love to hear any thoughts if I've got any moves.
