Untangling a very convoluted signup funnel with 50+ inputs
vienasaskaita.lt
Features guest marketing appearance by Rokas Medonis
Yeap thats right, 50+ inputs in a signup. VS is a service which aggregates its user’s utility bill with pretty much everything which is monthly bill or subscription. It involves phone, internet, kindergartens, trash disposal and it is constantly growing. Obviously setting it is a bit fiddly, and that is where me and Rokas came in to optimise the signup & onboarding experience. In terms of the team, my role was UX & UI design, Rokas consulted on those but his main emphasis was on marketing across multiple mediums and all the other staff was inhouse, meaning the dev’s and PO. In general it is an established product with tens of thousands of users, which clearly works and Just needs some tweaking. I’ll go out of the way to say that it is always exiting to work with something which really really works. Anyway, where did we start?
Where did we start?
Detecting problems
While my main focus was on the actual signup, landing was also the part of my job, so…
The landing
After spending some time with it and checking out the stats we combined a small list of ideas and problematic areas with the page.
- A complicated product like this needs perceived lightness of the ui so we decided to stick with a minimal typography based UI with some custom line illustration
- The actual copy doesn't explain what is the service. We need copy which captures the essence of the service
- There are too much CTA’s, buttons and text so the user has too many choices which do not necessarily add to the cause of explaining the service.
- All the cta’s are blending in since they are in brand colors. We need more disruptive CTA’s which stand out.
- Arbitrarily, flying numbers in the background look very 2005
Signup window
The fun part of the project is the huge signup funnel. On the course of its 4 steps the user has to enter private data and select all the utility services in use of the house. There is a massive number of utility providers and a similar amount of their combinations which can be mutually exclusive. The most unsettling part is that it is required to enter all the utility bill codes by hand before finishing the registration, which means physically going to that special drawer of the house to get them. Also it implies that you cannot register while you are out of your home which reduces the amount of people who potentially can make a successful registration. Some points about the state of the registration form.
- Step by step is actually good, but maybe requires some rearrangement.
- Lots of data which you need to finish before you get any value, requires searching physical things to finish the registration
- There is an optional field in the beginning
- The part where you actually select the utility service providers requires lots and lots of scrolling up and down forcing a user to hold some information in his head making the whole process very prone to errors
- Unclickable steps prevent the user from going back to fix an error ( there is a back button though ) which leads us to…
- Lack of summary ( as in a shop checkout ) in the end until you finish registraiton, which is scary since you dont know if you can fix it easily later when you are already inside the service
- Too many links and actions ( mostly ways to contact to report a problem/ ask a question ) which disract the user all over the place
- Although Im very pro text as interface ( hello @ medium) this one involves a lot of reading and reminds in a way of reading the very utility bill papers it ditched
Where did we get?
Addressing problems one by one
Well first of all we overhauled the landing page discarding everything which was irrelevant and made it more constant with the brand identity. We reduced the CTA’s to only two and added clear copy explaining what the service is about. With the actual signup we started with redistributing all the inputs in a way which is less annoying for the user. As an example we ask first and second names, password and the optional mobile number in the very end of the registration since they are not required before but take a lot of time. Before being prompted to enter them in the end user already had entered his/her address, email and filled an immense amount of data needed for the service so he/she already has some effort investment made. We also restructured the utility service select which uses the address to shrink the selection scope.
After all that the simplified user journey looked like this
Signup drawer ⥤ Service select ⇋ Summary/Password/name ⥤Voilà
And of course a gif is better than a thousand arrows:
Steps in-depth
Signup drawer
It’s used instead of a popup or a separate window so it’s not perceived as a separate step. Service provider and security logos are added to stress the secure nature of the service. Data security and National Bank control badges are added to emphasize the credibility of the service.
Clutter reduction in the service quiz part part
Upon acquiring the address in the first step backend feeds only the choices which are relevant for the user. Service providers are presented as logos rather than text so it’s way easier to identify them and just click the one you need ( with an option to skip ). Copy with a simple question is added so it is more clear what service is being selected, and the whole form is transformed to a quiz which is more playful and less confusing/stressful than a regular form. Furthermore, all the steps are clickable ( with hover animations to stress that ) so you can freely move across the steps of the quiz. And lastly, all the contact and legal info is moved to the bottom of the page and it’s visual stress removed so the users attention is concentrated where we want it to be as they do in eshop checkouts. Security badges are added to emphasize credibility.
User freedom to move around & summary/finish registration page
We analyzed all the possible combinations of data to be displayed and all the situations with the utility bill a user can have to create a labyrinth in which covers all the cases. In the end we added a summary page in which a user can see what he has selected, check it for errors and most importantly either remove unwanted options or go back and add additional data. Importantly we moved the part where the user has to enter the utility bill codes out of the signup and deeper within the service toward the checkout phase, since it involves physically going out and searching for papers. Without finishing the user registration it can result in failed registrations.
Results
We ended up with a significant reduction of failed registration and more services selected per user.
Contact me hi@alsoko.net
…or read about
