Registration flowMobile UX/UI case study

Getting users to register on a digital service is the previous step to any conversion process. It is more than this as today’s digital economy is mainly relying on users’ data to monetize traffic a website is receiving. If a user comes by a product but just leaves without registering, he likely becomes a lost customer forever, no matter how many retargeting campaigns he will see and how they are done (banners, emailing solutions). His data cannot be monetized in any way.

A company I worked for had a digital service for many years, available on desktops, tablets and smartphones. The last mobile website version has been launched for more than a year. It performed fine on successful registrations for few months compared to the previous version of the landing page. Then, the registrations rate quickly eroded. Only 7% of users who were visiting the landing page performed a successful registration. Traffic was coming from various sources like display campaigns, SEA campaigns or affiliation and traffic sources and volume didn’t change while the registrations rate went down.

I was overseeing the creative team for the traffic monetization department. We did not work on product, only on marketing tools to monetize traffic. Our good performing landing pages for this product were having a registrations rate from 13 to 15%, far better than the product landing page managed by the product team. So, we were asked to recast the product landing page, using what we know from our daily job to get the registrations rate back on track.

Original Product Landing Page

The product landing page was not following the same path. To access the registration form, users had to scroll several screens, unless they tapped one of the two CTAs displayed while they were scrolling. The full form was displayed at once spread over several screen heights. It was made of classical input fields, select fields and checkbox, and users needed to fill 6 different fields before being able to register. Nothing was there to involve users as soon as possible in the registration process. Once on the form, users could scroll back to the top of the page, reducing the chance they would start the registration process.

Also, almost 1% of users were trying to register but failed to do it. It could be the result of technical issues or wrong UX. This number needed to shrink.

Original landing page wireframe

Original landing page wireframe
User needs to scroll two and a half screens to access the whole form.

Bringing Marketing Expertise To Product

For the marketing department, we were producing a lot of different landing pages as they wanted to test new conversion funnels. Their UI and UX could vary a lot from one to another. But there was a common ground for all them: we were going straight to the point with the user. Get registered now!

This was even truer for mobile traffic where our main concern was to get the registration CTAs always visible on the first screen. Users didn’t need to scroll to register, just a tap and they were directly moved into the registration process. Same for the registration form, it should be fully visible without scrolling.

We decided to start from scratch. Nothing from the previous product landing page would be used. It would concern the UI and UX, the page structure, the page content, the registration flow, only product’s logo and identity would be kept.

The first principle was to make the landing page fit on one single vertical mobile screen, from the smallest resolution to any bigger one. The idea was that users shouldn’t have to scroll to perform any action or access any content.

The second principle was to make the whole page as the registration form. No extra content, product features and so on. The whole page area would be the form. The content would be the UI and vice versa.

The third principle was to do what we called a multi-step form. It’s basically a wizard but with only one single action to perform on each step, if possible a no-brainer one, which would get the user involved in the registration process as soon as possible.

The last principle was to put the user immediately in the registration flow on first page rendering. No CTA to access the form. A user redirected to this page was technically a user already in the registration process.

New landing page wireframe

New landing page wireframe
The whole page is the form, except for the header.

To Simplify Actions

Following these 4 principles, we tried to reduce the number of actions a user should perform to fill a field when possible. For select fields, usually involving a tap, a scroll, a tap to pick the right value and a tap to validate it, we reduced this process to a single tap.For text fields, zip field and birthdate field, we kept it the classical way as it is not possible to know what value a user will fill for those.

Product team wanted to add some more fields into the registration process. These extra fields were usually displayed to the user after he completed the landing page registration, lengthening the process before being able to convert. Most of these were select fields up to four different values. We ended up with four different step UIs, one for zip code field, one for double choice select field, one for quadruple choice select field and one for text/birthdate inputs.

For select fields, we splitted the screen into equal size areas based on the number of available choices. The user just had to tap the area matching the choice he wanted to pick. Above these areas, we put the field label at the center of the screen that the user knows what he is asked to perform.

For the zip code, we kept a classic input field, pre-filled and editable, as the digital service relies a lot on users’ geolocation.

For the nickname, email address, password and birthdate fields, we kept all of them together on the very last step of the registration process. With the extra information the user is asked to provide and the 6 entries of the current form, we felt it would add too many steps if these fields were splitted on their very own step.

New landing page zip code field wireframe

New landing page
Zip code field UI.

New landing page double choice UI wireframe

New landing page
Double choice select field UI.

New landing page quadrule choice UI wireframe

New landing page
Quadruple choice select field UI.

New landing page classic form wireframe

New landing page
Last step UI presenting a classic form.

The New Registration UX

With these four different UIs, covering all information the user was asked to give, we ended with a 8 steps flow. 7 of these steps could be performed by the user with a single tap.

For 6 of them (step 1 and from step 3 to 7), the whole content area is tappable, splitted per available choice. This way, the action becomes easy to perform. The tap validates the input value and moves the user to next step. The tap areas are pretty big, easing user’s action even on large screens.

For the second step, zip code field, the user can edit the value as a normal input field then moves to next step or just tap the CTA if the pre-filled value is good.

For the last step, the user must fill the fields in a more classical way and must validate by tapping a CTA. On any step, the user can go to previous step to enter a new value using the back arrow in the header.

The very first step automatically appears after a splash screen animation of 2 seconds, asking user to do a simple binary choice. So, the user is right away in the registration process. Tapping on one of these two choices involves him in the registration process from the very beginning. With double and quadruple choice UIs, the user is not feeling like he is filling a classic form. Each new step he completes involves him deeper in the registration process without having a real awareness of it. Only the second step and last step remind him he is on a registration process. The most difficult task the user is asked to perform is presented to him at the end, once his involvement in the process is to its maximum.

New landing page form navigation wireframe

New landing page
Form navigation UX between steps (shortened version).

Error Management

On an error management level, this UI implies that mistakes done by users are greatly reduced. 6 out 8 steps cannot generate errors. They are using the double and quadruple choice UIs. The usual actions a user performs on a select field are condensed and avoid any submission with no value for the input. Displaying the step is focusing on the field, tapping is selecting and validating the value at once. For zip code step and the last step with the 4 inputs user must fill, errors can happen and are managed the usual way, displaying the proper error message related to the specific input.

Error message on last page wireframe

New landing page
Error message on last step.

Hamburger Menu

As our plan was to get the page's content as only the form, all non-form content from original homepage was moved and hidden into the menu. Login, FAQ, Terms & Conditions and so on. Users could still access this content as before but it wouldn't visually turn them from the registration process.

Also, if a user starts to navigate in the hamburger's entries and content, if he comes back to the registration flow, it shouldn't break the process. We didn't want to lose track of his progress and forcing him to start from the beginning again. We made it so that when the user closes the menu after navigating through extra-content, he lands on the last active registration step he previously was in.

Hamburger menu navigation wireframe

New landing page
Accessing the menu content doesn't break the registration flow.

A/B Test Results

Once the new page was ready, product team and BI department started to do some A/B tests to compare performances of the original and the new pages.

After a month of testing, results were really significant. New page was performing a lot better than the original one. For a same volume of traffic, registrations rate went up from 7% to 12.1% of visitors registering on the website.

Old page registration rate

7%

18523

12.1%

18302

New page registration rate

Number of visitors

Registrations

Failed registrations rate went from 11.3% to 4.6%, comparing failed registrations to the number of registration tries. The latter almost doubled on the new page compared to the old one.

Old page registration fail rate

11.3%

100%

4.6%

100%

New page registration fail rate

Registration tries

Failed registrations

The new page outperformed the old one about all KPIs. Registration rate increased by 72.8%. Absolute registered users number increased by 70% and registration fail rate decreased by 59.3%.

72.8%

Registration rate increase

70%

Registered users number increase

59.3%

Registration fail rate decrease