When we decided to overhaul the UX and UI of our iOS and Android apps at Vonage R&D Center in Israel, it was very clear to me what screen should be worked on first. Yes, you guessed correctly , I wanted to start from the very beginning — the login screen. In this article, I would like share with you the process of changing the UX of the Android log in screen.
Our login screen hasn’t changed since I joined the company, two years ago, and pre-overhaul it looked like this:
The colours and UI of the screen clearly had to change, because we were aiming for a younger, and more enjoyable vibe — it’s not shocking news that B2B applications can and should be as enjoyable as B2C products. We do spend most of our hours at work, after all. Still, it was more important for me to start with the UX.
The first thing I did was go to AppSee and check how many users we had for the lower resolution phones. I found that around 20% of our users had xhdpi phones, with around 6% using resolution lower than 540×960. When I ran the app on my personal device — a Nexus 5, and raised the keypad, the login screen looked like this:
Then, I went to the cool wall of mobile devices we have in the office, and found the smallest one we had — The Moto G.
When the app opened on the Moto G, the ‘Forgot Password’ and ‘Login’ buttons were completely hidden by the keypad, and the second input field was half covered as well, making it all too easy to tap on a prediction on the keypad instead of tapping on the field to make it focused.
A user who wants to log into the app on a low-res, small device would have to lower and bring up the keypad several times in order to be able to fill in both fields and tap the ‘Login’ button. They would need an extra tap to lower the keypad to tap on the ‘Forgot Password’ button. Something had to change, and I had to get to the bottom of the issue.
At some point, I wanted to find some inspiration, and so I went to Dribbble. But while there were many shots with cool animations, and pretty UI, most of the shots didn’t have the keypad open (perhaps the username and password were typed in using the user’s mind power) and even more shots had the login screen show in the newest, coolest mobile devices. Taking into account an open keypad, and a smaller device, broke these designs.