UX Case Study: Designing a Password Management App for Mobile
My roles: User Researcher, UX Designer, Illustrator, Facilitator.
Overview
A typical email address in the UK is linked to 118 online accounts, all full of personal information. Think you could remember how many accounts you’ve ever registered for? How many of those accounts have the same exact password? Is that even a good system?
Enter Nettoken, a London startup out of Innovation RCA in Battersea. This online app scans your email inbox for old accounts, amasses them in one place and helps you assign new, more secure passwords to them. Once set up, the idea is that you log into the Nettoken app which autofills passwords in your browser using QR code scan and fingerprint (or facial) verification. This push toward biometric verification and away from a master password is partly what differentiates Nettoken from other password managers like Dashlane, 1Password and Last Pass. Also setting them apart is their focus on a well-drawn vision of a world where people are fully aware of their digital footprint and are able to regain control of their online self.
Brief
At the time of this project, Nettoken had a beta MVP of their web app available for a limited user-base and were pushing toward a mobile app launch for early 2019. For our final project on the immersive General Assembly UX Design course, myself and 3 other designers were tasked with building this new mobile app from with prescribed features and a great user experience.
Challenges
- Which features should we include and test in the mobile app? Weaving a set of compelling user flows through the prescribed list of features provided by the client would be an interesting challenge.
- Security vs convenience: in the password management space, security is obviously paramount but no one likes being told how to act; we knew we had to strike a balance here.
- Information architecture: how best to arrange 100s of items on a small screen, whether that be lists, groups, categories etc.
- Facilitating; this was my first experience as team facilitator in a UX project — could I keep the deliverables on track? Ensure the team worked cohesively? Would I be a steady hand on the tiller or a madman in the control room? Time would tell.
Discover
Market research from the client plus an initial proto persona workshop with them helped define our user demographic: 20–40, digitally aware with disposable income) but to achieve a more rounded view of the users and their attitudes/behaviours we needed a package of more qualitative data from which to draw and, most importantly for UX, empathise. For this, we conducted 12 user interviews. We also conducted competitive and comparative analysis to get a feel for the landscape.
Define
We gathered our user insights together and began looking for trends in the research. We used an affinity map to zero in on these patterns.
After synthesising out research in this way, we were able to deduce some useful key findings:
- Users generally lack an idea of what could happen to them if one of their accounts gets hacked; they also lack awareness of the scenarios which could lead to a data breach.
- Most users have 3 passwords or less that they use for contemporary accounts, some have 1 ‘impenetrable’ one, which only needs to be taken once by a hacker to render all other accounts with that password insecure.
- Users don’t like organising data on mobile — based on our discussions around Google Drive and Drop Box, mobile is used to check or update data caches but not to make structural changes.
- Convenience beats security: users would rather be less secure than have to deal with, for example, 2 factor authentication to access an account.
From these findings, plus our demographic, we were able to generate a primary persona and storyboard to represent this package of research:
Develop
In order to design a user experience, we needed to choose some key flows. The client had specified a list of features they wanted included in the app, so the trick was to drop as many of these as possible into our flows plus any others we deemed essential whilst keeping the scope of the project within realistic limits. We created a feature-prioritisation chart and designated a ‘Goldilocks Zone’ (outlined in red, below) which was not too time-consuming and not too unnecessary. Although it was not on the client’s list, we decided that the email scan feature was such a powerful moment in the user experience that we had to included it in the functionality from the beginning.
Having decided on features, we workshopped some flows that would be most essential to our persona Becky and settled on:
1 Adding an account manually
2 Adding accounts through email inbox scan
3 Changing the password for an account
Prototypes
We then ideated these key flows in a workshop to create a paper prototype. An ideation workshop we conducted with the client was extremely informative here — whiteboards and A3 paper were valuable allies in this session.
We began usability testing the wireframe flows in paper before progressing to low-fidelity, then mid-fidelity and finally high-fidelity. At each round we were able to collect our notes and again synthesise our findings to iterate the user experience, making improvements at every stage.
In the image below You will see below the home screen from paper to high-fidelity. Usability tests suggested that the Abel font Nettoken used on their web app was less readable on a small screen, so we swapped main body text for Roboto instead.
We were also able to slip the search button up next to the ‘add account’ button. The ‘scan QR code’ shortcut button for logging into the desktop app was confusing to people so we moved it into the ‘desktop’ area of the app, where it would ultimately be used.
For adding accounts, we began with a drawer that slid up from the bottom of the screen once users pressed the “+” button in the top right. However, due to some ambiguity over the meaning if “import from email inbox” and “import from file” we changed this for it’s own screen. Users reacted well to this, reporting feeling well-oriented and informed during the adding process.
Users were most anxious about the email scan flow since it involved handing your email login and password over to the app. After a few iterations, we spread the information more clearly over several screens giving users more control at each stage. Moreover, having duplicated the copy in Nettoken’s web app email scan, tests showed the need for some changes in copy, for example the term ‘temporary access’ worried users and needed to be more defined, so we specified “access to your inbox will expire as soon as the scan is complete”. We also added the dog illustration found in the explainer video on Nettoken’s web app to add character and reinforce brand identity.
Outcome
Below is a video demo on our final prototype of login, email scan and manually adding an account. The Nettoken founders were particularly happy with the layout of the accounts page and the adherence to the Nettoken brand, look and feel.
The three key flows were iterated three times and while there is a good amount left to design and test, this seemed to be a good initial scouting of the mobile app for Nettoken, who informed us they will be implementing elements from our design early in 2019 when they build the app themselves.
Stretch Goals
By combining day 2 and 3 or the second week of the sprint, we hit high-fidelity a day earlier than originally planned and so had room to set ourselves some stretch goals.
Based on user research findings, the client brief and the material from the client design studio we had facilitated, we ideated in a workshop of our own with the use of many whiteboards and scraps of paper.
The two ideas we developed were inspired by the need to reach out to users and raise their awareness of security issues. The Security Notifications feature would deliver realtime alerts to users’ landing page about threats which may affect their accounts. This could include recent hacks, data breaches and even short trials that are about to run out and begin charging the users.
The Security Assistant: Netty the Watchdog is a less urgent form of security feature — this character is a memorable, brand-reinforcing character which lives in the accounts section of the app (and can be turned on or off) and offers useful a bit-by-bit approach to account security in the form of tips and wizards to change old passwords or strengthen weak passwords.
Conclusion
This project was an important lesson in user sensitivity toward matters of security — there was a delicate balance between a user flow which gave users the feeling of security and one in which users felt pushed around. Also surprising is how we take for granted the security measures and coping mechanisms that we have engrained in our behaviour — lack of awareness over passwords and the relative security of multiple accounts is clearly something users will only have to engage with more in the future.
If we had more time it would have been great to tweak the visual design and develop the extra features a little more but for a 2 week design sprint to build this from scratch, myself and my team all found it enlightening and enjoyable working so closely with Nettoken on this project and feel happy with the work we delivered.
