+ 55 % performance compared to the previously implemented design
Challenge
Optimise login for acquisition journey, improve the various logins and reduce amount of login variations. There was 13 different login variations used on the website such as modals, mobile drawers, desktop header, opt in triggered modals, using methods such as standard login, Swedish BankID and Danish NemID.
Details
Target platforms: desktop, mobile, tablet
Target use cases: login using username/password, BankID or NemID
Brands: Unibet, Bingo.com, Bohemia, Highroller
Markets: All (Europe and Australia)
Research
Full UX process including use case analysis, information architecture and content strategy, use flows and interaction design was performed before starting visual design. Results from user research and login process evaluation show that there was 13 different login variations depending on user journey, all resulting in poor UX caused by inconsistent layout, interactions, content, structure and flows. The non-seamless experience made it difficult for the user to know what to expect throughout the journey. The research uncovered UI inconsistency in various places depending on device and product and issues for customers accessing the login on account pages and the login prompt via bet slip.
Team
UX researcher, UX lead, UI designer (myself)
Assignment and Goals
The goal was to cut down the amount of login variations from 13 into 3, across all devices, environments and products.
Use login modal whenever the login is the starting point – e.g. when the user selects login in the mobile header or for the products where login is required as the first step (like poker clients).
Note: No login drawer for mobile anymore.
Use login modal with message whenever there is a prompt for login as a prerequisite for continuing the task. This is when the user is exploring the service and at some point decides to for example place a bet or play for real in a casino game.
Add Touch ID as an option which the user can always select/un-select – whenever the device has the support.
Highlight the register option if the user hasn’t logged in before (cookied/un-cookied).
Starting point
In the implemented design there was two variations of the embedded header login (the main source of login in desktop browser version) depending on the market: one with input fields and one where the input fields were removed and replaced by a modal window. To make the login experience more consistent across all markets we decided to remove the input fields and use the login modal solution.
The header login on the Unibet site has a dark green background colour but the implemented login modals had a dark grey background. This solution disconnected the modals from the header login and could have made the user confused. There was a few other journeys, such as login-prompt while placing a bet, that launch a login modal in completely different design than the header login.
Solution
Knowing that we had limited resources of development hours to spend on this project I used the same design for both mobile and desktop/tablet and adjusted the size of the modal window adding extra padding and cropping the height. The design for desktop would be the same as the design for the tablets. Surprisingly there was no close button in modals in the implemented design which was added in the new design.
I wasn’t satisfied with the form field design in the Unibet brand manual so I made some exceptions to that. Since the design on the Unibet site is flat, I wanted to create some material design effects without using shadows or other clues typical for material design. I made the form fields darker than the background which makes them look like they are deeper than the background surface. I also made the buttons lighter than the background which makes them look like they are higher above than the background surface. I chose the colours and text sizes carefully with accessibility in mind.
Key chain icon on Apple devices might interfere with the show/hide icons if placed inline in the password input field. We looked into this and found out that the keychain icon has a default placing in the password input field which we could not change, and it happened to be the place we had chosen for the show/hide icons. We came up with a solution to this which was making the input field shorter in code so the keychain access icon is placed more to the left, but make the input field as wide as desired in design and put in the show icon to the right where we wanted it to be from the start. The input field would be coded narrower but look wider to the eye.
I also designed the login for Unibet’s white label brands Bingo.com, Bohemia and Highroller. The white label UI colours are designed so that they can be replaced by the colours in the UI kit for each brand, but I had made a few exceptions to the Unibet form field and button design. I had to control that the colours looked good in the white label designs and make some exceptions to them. The exceptions handoff to developers could look like this: Text colour: Unibet $Brand-5, Bohemia $main-11, font (600) instead of (500). The accessibility of the designs is very important so I made sure not to choose colours with low contrast or text that is too thin or small.
Rules
1. User should be able to close modal windows by pressing ESC key and by clicking outside the window (desktop and tablet).
2. Darken the main window when modal window opens (desktop and tablet).
3. Disable all main window functions when the modal window is open (desktop and tablet).
4. ‘Login’ or ‘Login to continue’ depending on user journey.
Outcome
We managed to cut down the amount of login variations from 13 to 3 which increases consistency and ease of use. There’s also 10 less login variations to keep up to date which gives devs and CMS team more time to do other things.
Usability testing
Usability testing of the new login suggestions was performed in June 2017. The goal was to compare 3 new login variations to the existing one and find the design that is the most self-explanatory and easiest to use. The users were asked to go through the following journeys: forgotten password, change login method, show/hide password and register.
Forgotten password: New design A performed 9 % better than the currently implemented solution.
Change login method: New design A performed 55 % better than the currently implemented solution.
Show password feature didn’t exist in the implemented design. Design A where the show/hide icon was placed below the password input field and design B where the show/hide icon was placed inline in the password input field both performed equally good (A 72% and B 69%).
Register: the implemented design performed well since the CTA was visible at all times. The new design A with a text link ‘Don’t have an account? Register’ performed slightly better (+3 %) than the bright yellow Register CTA button in design B which was surprising since the design of the button is the same as in the implemented design.
Login Optimisation for Bingo.com
Bingo.com is a Unibet White Label so colours and text attributes are easily replaced to match Bingo.com's branding. However, there are cases when this doesn't work perfectly and a colour check for a few screens is always made to assure that accessibility goals are met. In this case I had to adjust colours for the buttons on the first screen (Choose login method).
Login Optimisation for Bohemia
Also Bohemia is a Unibet White Label and the same colour check is always performed for Bohemia as for Bingo.com.
