Improving the busuu Sign Up flow

In early 2016, shortly after I joined busuu, we embarked on a massive redesign starting with our mobile apps. This included a UI refresh and rethinking parts of the UX.

We were well aware of UI and UX flaws across the app, it wasn’t delivering the best experience for our users. One area we knew needed improvement was the experience and interface of the sign up / log in flows. We had insight into the problems from user data which told us that these screens were not performing as well as they could. So it seemed like a logical place to kick off the redesign especially since we would be affecting the first impressions of new users.

Choosing a language

The user initially selects which language to learn. In the old design we displayed 4 large flags to represent the most popular languages with a ‘more’ button to access the full list of languages.

The idea of showing the most learned / most popular languages first was a sound idea but hiding the rest had some obvious problems.

• It increased the number of taps to actually select a language.
• You had no idea what languages were available until you tap the ‘more’ icon.
• It made the sign up flow non-linear. A clean sign up process is about going to point A to point B in just a few steps.

Besides this, some other issues were highlighted

• The large flags, while visually appealing, were counter intuitive. Languages are not represented by flags and in fact a lot of countries speak more than one language. Using flags is fine, but visually, the flags should not be overpowering the language names.
• By choosing a language from the first page you are taken to the sign up form, but selecting a language from the ‘more’ screen presented you with a mysterious ‘continue’ button at the bottom to confirm your choice.
• For a returning user, asking which language they’d like to learn in huge text is pointless and in fact confused people.

The First Iteration

It didn’t take long to realise we could solve all the problems by merely using a list. With a list, we could show the most popular languages at the top, keep everything on one page and keep the flow linear. And, of course, we also removed that rogue ‘continue’ button.

After the first iteration of the list 2 things became clear. We had 12 languages available to learn and on a 4.7" display, 7 or 8 languages were on the screen at any one time. Scrolling the list down just a few items to reach the end gave the impression the list was really short.

The stumpy list was literally undermining the content of the app before even selecting one. Yes, we could bump up the height of the table cells but did we really want to, considering the cells themselves only contained one line of content?

The other point was about the visual style: with this iteration the personality of the page had been more or less drained away completely.

The Second Iteration

So I gave the page its blue back (with a shameless gradient) and dropped the list into its own independently scrollable panel. Now the list FEELS long and the personality was not lost from the original design.

On the left: Intro screen. On the right: Language selection

I also added the previously mentioned intro screen which serves two purposes:

• For returning users, we shouldn’t be asking them which language they’d like to learn as this actually led to people trying to log in by tapping on the flags. So showing an intro screen gives you two starting options based on whether or not you have an existing account.
• We would have an intro screen to quickly describe what the app does.

Signing Up

Once you’ve chosen which language you’d like to learn, you are then asked for your name, email address and to choose a password, or alternatively to sign up with your Facebook or Google account. Pretty standard.

At first glance this screen seemed fine, maybe a tweak here and there to improve the visual style but that’s it, right? Actually no, this screen had some problems with users accidentally tapping the connect buttons when trying to type in the text fields. The thing was that the keyboard was half covering these buttons on smaller devices so if my name contains any letters from the top row of keys, I’m at risk of accidentally tapping these buttons. This was frustrating and a deal breaker for people who had just downloaded the app.

iPhone 5 keyboard overlapping buttons

So there were two issues I wanted to rectify here. The fact that users were tapping on the wrong things by accident and to properly focus in on the sign up form when it’s in use.

The first idea was to simply move the whole view up when you open the keyboard but the powers that be (hi Antoine!) wanted the email sign up to be the alternative method rather than connect with Facebook or Google being the alternative method. Following this we decided to move the buttons to the top of the page. A little tinkering later…

So finally the changes that were made were:

• The back button was replaced by a close button since the view was being presented from the bottom of the screen and the back icon didn’t match the transition.
• The Facebook and Google buttons were moved to the top.
• A separator was added between the buttons and the sign up form to visually separate them from one another while grouping the buttons together.
• The sign up button was shown in an obviously disabled state until the form was in use.

Together, these points solved the problems outlined on this page. But there still remained the question, what happens when you tap the form? With a sign up button at the bottom the keyboard would undoubtedly overlap it on smaller devices.

Nope, what’s this up my sleeve? Boom!