Onboarding #30: Blendle
Pew pew! I’ve finished my little quest: 30 onboardings! This is the final post. I started this project to learn more about onboardings. To see what people make, write down some comments and take what I’ve learned and pour it into Blendle.
Last month, we have rebuilt our signup and onboarding process from scratch. The hard thing about focussing on a signup and onboarding process is that people only see it once. It is obviously difficult to have our current fans test the new signup (they are not the target anyway). It makes it an unpopular thing to focus on, and a little unrewarding too. This week, we released a new way of recommending an article. Far more visible, WAY smaller in terms of development, but so much more fun to use day by day. However, your signup might be the single most important thing to get right, because it is the only way to get new users and it is their first experience with your product.
Oh and by the way: I’m working on a post which summarizes what I’ve learned from the other products.
So, let’s see what we came up with at Blendle.
Home page
The place where you end up if you happen to browse to blendle.com. We took some inspiration from the Flipboard iPad app. The feeling we want you to get is “Ah, I know these newspapers! Let’s click one and see what happens.”
This is different from how most other products are doing their signup. We postpone collecting real information from our users as long as possible. I still have mixed feelings about this: on the one hand this makes signing up great, because you get to do fun stuff first. On the other hand: we won’t get your email address until late in the game. This means we can’t convince you to try again if something goes wrong in the first 3 screens. 3 screens is a lot. We’re looking closely at the stats to see if this works or if we have to revert to a more traditional process.
After clicking at least one cover or scrolling around a bit, a button to continue to the next step is displayed. We talked about this a lot. Should the button be displayed above the fold all the time? Do we want users to have to scroll down themselves and see all the covers we selected? This felt good, because this way users have to interact with the page first before seeing the “out”.
It is not required to select any number of items to continue. We care a lot about animations. Selecting a new publication is the very first interaction with Blendle and each click should be a little party.
Pick channels
We have a group of around 40 users who we call “curators”. These users select and post their favorite articles to a set of channels you can follow. There is so much content and channels are a great way to get an interesting timeline.
The hard thing: how to communicate what kind of content will be posted in each channel? A user is not interested in the name of the channel, but wants to see great articles. Should we show the names of curators? Should we show the most recent post for each channel? We ended up with a simple solution: just show the names of the channels, surprise users with a great timeline and see what happens.
Each channel has its own color in Blendle. This detail is visible on hover and on following a channel.
Just like with the previous step, it is not required to select a minimum number of channels to continue.
About Blendle
This is perhaps the most debated screen. It moved from the beginning to the end of the process. It was removed and added again. For now it is positioned just before a real account is created (before this, everything is only stored in the client). Because we took a different direction (no landing page which tells you what Blendle is and how the real product looks), we felt that a page which explains things a little is needed.
I think I have what should be called “the developers disease”: everything you look at can be improved. Especially when you have parked it for a week and look at it again. Some things I’d like to change:
- On scrolling or clicking somewhere on the page, the “continue” button should pop up. The same way as the first page.
- All the way down, we tell you that you’ll receive €2,50 for free. I like to experiment with moving this thing to the top of the page and see how people react to this.
- I like to conduct more user studies and ask what people think is their first impression of this step: is it clear what you should do as a user? I’m sure we can improve this.
Enter your email address
We hate boring forms. This form is inspired by Typeform. Large fields, one field per page. Clearly explained what you need to do. Friendly Blendle-branded language.
This page also contains the sign in with Facebook button. Clicking this button skips the next steps and takes you to the “connect your social accounts” screen right away.
Pressing “Enter” will take you to the next field, which works great.
Enter your first name
In our communication, we like to address you with your first name. This comes with a cost, because we have to collect this from you. Before we released this, we tried splitting your name automatically. Obviously without much success.
Enter your last name
And we need your last name as well, to make sure others can identify you.
Pick a password
For the password field, we decided to ditch the confirm password input. A password strength indicator is integrated in the field, but except for the password length there are no restrictions on the password.
Improvements: it might be good to help the user to create a stronger password if the user needs help.
Connect Facebook or Twitter
Blendle is way more fun when following friends or people you already follow in Twitter. In this step you are able to connect those with a single click.
Check your email
Because we pass you some free credit, we need to add a way to prevent lots of duplicate accounts. As I’m writing this, I think we can be more creative here. In all other onboardings, I found that this confirmation step is never fun and can go wrong in so many different ways: entering your wrong email address, emails ending up in spam folders, emails ending up unreadable, links in emails not being clickable, not working confirmation links, expired confirmation links. The list of loopholes and bugs goes on and on. And yes we all had those.
Confirmation email
This is the email we send you to activate your account. Remember the thing about each click being a party? We’re not there yet :)
It is a clear email though. It does what it needs to do: it has the link in both button and copy-paste form. It has a way to get in touch with us. We don’t use noreply@blendle.com because that sucks. It scales nicely to mobile. Want to build a great product? Get good with email. I’m trying to get better at it every day.
Account is being set up-animation
This is just because we like animations so much.
Welcome at Blendle dialog
After the animation is completed, you’ll see this dialog which confirms that you completed everything and that your free credit is ready to go.
You’ll receive a welcome email after confirming your account, which contains about the same information.
Acknowledgments because they are cool
We have a very interesting approach for new features, which could be a whole different post. Keywords: Jort, Marten, Alexander, Invision, emails. We had fun.
Development by Jorik and Jesse. Don’t forget our QA grandmaster: Jelmer and everyone else who contributed with testing and reporting issues.
Proud to ship stuff like this with these guys.