ROLE: UX / UI Designer (2017 – 2020) at HealthQ
PROJECT: ONBOARDING SERVICE
TOOLS: Sketch, Invision, Craft
Update 10 June 2020:
I removed all branding and wording related to any partners on this post as the project was not launched yet, we were going to launch it in March, but then lockdown & Covid-19 happened. The project is now live and you can read more about it on the 1Life Insurance website. All of this was made possible by a lot of hard-working people at LifeQ, Samsung & 1Life, I’m honoured to have had the opportunity to work with all of you!
Mobile first Web App (We started off with Bootstrap for the first few iterations, in the end we decided to move everything over to Material (for web).)
In October 2018 there was an urgent need for an onboarding service. We did not have a lot of time. The onboarding service was needed to seamlessly happen between a few different applications. This whole process had to happen without the user knowing that they are being redirected elsewhere.
Me and one of the developers sat down and had a bit of a discussion of how we could possibly do this.
This is a very high level flow that we quickly came up with. I just did a quick drawing of what we did on the whiteboard in Sketch for reference.
Then I went and did some research. I looked at what is out there and tested out some different onboarding flows to get an idea of what we can do, what works well, but most importantly what has the best experience for the user. This also gives me an idea of what does not work well, I add this to my list of things to look out for & NOT do.
Airbnb
Gmail
I also looked at a few banks, their sign up process and compared the banks to some of the medical insurance companies.
For the first iteration we had about two weeks. I did some wireframes. I’m not going to show all of the wireframes, just a few to give you an idea. I created a prototype using Craft and Invision to test out these wireframes.
These are just a few of the screens. There was quite a few more flows. This is just some of the Sign up flow, we also required flows for users returning, error states, etc. We also had to decide how we would handle do the validation once a user has signed up. How the process will work to validate and activate the new accounts. What would be the most secure way for the user to sign up, but also the most efficient and user-friendly route.
Some of the screens that were the designed with a fake brand for the first iteration. This design is still based on Bootstrap. I created the fake logo, colour scheme, text styles etc.
We rolled out the onboarding service for testing purposes with the fake brand. I then did a case study on what we have done to see how we can improve the flow & refine it, also taking into account the feedback that we received from the testing.
What is the main goal of this screen? To get users to sign up with little to no friction – aka make it as simple and easy as possible for a user to sign up.
Form validation, when is the right time?
According to Luke Wroblewski’s research: the right time to inform about the success/failure of provided data is right after the user has submitted the information. Inline form validation that immediately informs users about the correctness of provided data results in an increase in the conversion rate.
At the moment we only display validation error messages after the user has pressed the “Sign up” button. According to research it is a better experience for the user to know immediately what went wrong. I do realise that we do not have client-side validation at the moment. Maybe we should do some user testing and see how users feel when trying to sign up in this way. (*After some testing we added client-side validation.) We do show validation after the button has been pressed, so we do inform the user of what went wrong. It should not cause too much friction / frustration for the user. See suggested screens with validation & the “Sign up” button disabled below.
SIGN UP SCREEN – Focusing on the Password input
3 Rules to consider when it comes to a password field.(There are more, but these are the most vital.)
https://conversionxl.com/blog/password-ux/
https://www.nngroup.com/articles/password-creation/
1. Limit requirements and make them visible (YES! We do this, with the “Your password must be 10-20 characters long.”) Simple, clear expectations from the beginning mean fewer errors.
2. Allow password unmasking
We do not do this at the moment & I quite struggled with such a long password on my phone to get it right when I had to confirm my password.
3. Show a strength indicator
The two screens on the right are just some suggestions of how we can perhaps improve our ‘password creation’ experience for the user. We can remove the ‘Confirm password’ fields. We can add a show / hide password icon. We can add a strength indicator. I also think perhaps it would be better to rename the “Password” field on the Sign up screen to “Create password”.
Device-specific unmasking best practices:
- On desktop, mask passwords by default, but add a “Show” option so that people can remember the password and check their work.
- On mobile, unmask passwords by default, but add a “Hide” option. It’s especially hard to type a complex, secure password on mobile.
- Unmasking passwords on mobile is not really hurting security very much. Mobile keyboards indicate exactly which letters were typed, anyway.
We relooked the whole service we build and after taking into account the feedback we received after testing we decided to use Material.
The new updated flow for the 1st time user.
Some of the screen designs after Material Design has been implemented.
Please note that I have created a fake brand, Mountain Trail Insurance, we used this for testing purposes.
We also implemented client-side form validation with the server-side validation to help ease the process for the user.
