Online security for the masses — a UX case study – UX Collective

Leaving The Nest of General Assembly to work on a prototype with real clients.

TL;DR: Scroll to my video at the end of this article, so I can give you a tour of our Password Management App prototype!

Project Summary

Synopsis

For our final group project at General Assembly, we got to work on a project in the real world. Our clients were Nettoken, a London startup; out of Innovation RCA in Battersea, London. They run an identity management platform that encourages users to have more security awareness online. Providing them with a visual overview of their current digital footprint. This helps users organise and file their own website accounts, while also managing the security of their passwords.

With a beta web app established, it was our task to develop an accompanying mobile prototype. During a two-week design sprint, we had to transfer their desktop app’s logic and language, into a tested i0S minimal viable product.

My role

My work ethic in any group is to do my best in providing for the team what is missing. Filling in the gaps at any given time. Because of this, my role was diverse; from supporting research tasks to also assisting in the final development. We all followed the British Design Council’s Double Diamond process: Discover, Define, Develop & Deliver.

Key deliverables

Experience map

User flows and wireframes

Mood board

Brand position

Design Studio

Style guide

High fidelity digital prototype tested with multiple users

Presentation to the clients

Results

•Successful redesign and integration of mobile app to web app: By understanding users psychological behaviour towards mobile functionality; in relation to online security. Then implementing these findings through consistent usability testing; while incorporating the brand’s identity.

•Generated effective features to keep users proactive when maintaining their digital footprint: By translating effectively important security issues, in a more accessible and less abstract manner. This assured and built an ongoing trust with the user.

•Nettoken plan to implement our app designs in early 2019: Our time efficiency, allowed as to give our clients more than they asked for; by completing the prototype and also developing stretch goals. These provided extra user findings and beneficial app features for Nettoken.

Some of my early ideations/wireframes inspired by Nettoken’s logo.

Discovery Phase

Mobile First

Nettoken’s web app did not follow the ‘Mobile first’ approach, so we knew from the start the translation would be a challenge. The web app scanned your email inbox for old site accounts, retrieved and then grouped them into categories conveniently in one place where they could be organised. It also gave users the ability to assign secure passwords to each site account. Storing passwords in the app allowed it to autofill logins as users browsed online. So how do we incorporate all this in a mobile app?

Getting A Feel For The Market

We first began researching on a range of password management apps currently in the market (See Competitive above). We also looked for influences outside this field to cater to Nettoken’s wider vision. This consisted of apps that excelled in organising files on small screens. High-security field apps who had a user-friendly approach also were taken into consideration (See Comparative above).

User Interviews

Nettoken had already given to us invaluable insights on their user demographic. So we complimented their quantitative findings by seeking qualitative insights in our user interviews.

.

Compiling user findings and searching for trends from user interviews.

“I know I shouldn’t do this but I have basically 2 passwords that I use everywhere” — Justin

We discovered whenever users tried to log into sites, they would usually have 2–3 passwords in mind. Then they would try each one via a process of elimination until eventually, one allowed them access.

Other behaviour included a designated password hierarchy: “Harder to crack” passwords would be assigned to high-end security accounts, and simpler for the more spontaneous one-off encounters — such a scenario is portrayed in our experience map below.

Most user practices had good security intentions, but their actions still did not prevent them from online vulnerability. With a lack of password variation for a multitude of sites, one hack could easily breach the majority of their defences.

Oddly, users would give their details to Google Chrome’s browser, but not when asked for details from other sites. This seemed contradictory at first until we understood these choices were not for aiding security but more for saving time. We concluded that users sought time-saving convenience over personal security.

Defining Phase

Persona

These key findings defined an archetypal personality who we named Becky. She encapsulated the user demographic of Nettoken’s typical user. I’ve illustrated her here in the outcome statement below:

1 Scenario 2 Problem 3 Solution 4 Outcome

Translation Challenges

Our users felt the functionality of organising multiple folders on a smaller mobile screen, had the potential to be less appealing. Users organised larger caches on their desktop, their mobile was more for just checking the data. It was, however, at the heart of Nettoken’s service, and therefore a user need that we still needed to translate.

Design Studio

It was essential for us to keep our clients in the loop, and it was also important we got their input based on our findings. So we set up a Design Studio at their headquarters.

Presenting to the clients.

We discussed scenarios inspired by the main tasks Becky would likely take with our app. We asked for Nettoken to ideate and sketch potential wireframes with us. Some of the results can be seen here:

These ideations explored these following key functionalities:

Viewing/editing individual and grouped site accounts.

Alternative ways to search for accounts.

An accessible way to automatically scan the user’s inbox.

Ability to edit settings based on inbox scan.

Searching for successful designs to incorporate into our user flows.

Identifying User Flows

The workshop was extremely informative and proved to be a great baseline for us to translate those key functionalities into these 3 key user flows:

Developing Phase

Paper Prototype

The first usability pain point we discovered was the wording ‘Scan Email’ (See below). It wasn’t clear to users what that exactly entailed. On the same pop-up menu ‘Add Account’ also raised similar concerns.

We also only had three screens for the inbox scan process. This wasn’t enough to make users feel secure or in control. It was too little too soon. Users wanted more information before giving away their details.

Once inbox was scanned users saw this screen (A). They had an option here to scroll vertically to see the grouped categories, or horizontally to see the assigned site accountants individually. Users liked that this screen (B) allowed them to move an account to another group. This page (C ) was also welcomed, knowing it would help them manually edit their individual accounts. This page (D) represented an overall summary of the accounts details.

Adapting Typography

We chose Nettoken’s desktop typeface Abel (A), to incorporate into our digital development. But users found it hard to read the main copy on a smaller screen. So we replaced it with Roboto (B), this had a similar flare but was more readable for body text. We kept Abel for headings where visibility was less constrained.

We then replaced ‘Scan Email’ with the more descriptive ‘Import from email inbox’ in the navigation drawer (C ). Users understood now more its relevance, but still expected a more thorough explanation.

So the drawer was replaced with this explanation page, explaining how the process would benefit the user (D). This screen (E) asks the user for their email details for inbox authorisation. We a final assurance to keep the user in control, just before the scan launches (F).

Once users had committed to the scan launch, they were next informed with the numerical amount (A). Then in the Import Preview (B) users had the option to choose whether to import the site accounts or not.

User feedback made us understand the importance of implementing these assurances. Without them, users were hesitant in giving their inbox details for the scan launch.

We consistently made digital iterations after feedback from our usability tests.

Users at first perceived asking for their details, as an invasion of privacy, but by our final tests, they saw it instead as being a benefit for it. We had eventually regained our users trust near the end of our prototype development.

Stretch Goals

With all features the client asked for complete, we began a stretch goal workshop to see if we could push things further. Allowing users to choose when the scan launched gave back users a sense of control. However, many also asked for this option to allow them to also select certain site accounts. Rather than the all or nothing.

Independent choice flow

We did a round of testings and iterations on the feature (See GIF and A below). Its functionality proved to be favourable for the user.

We also thought of ways to organise content on the main category page by incorporating an Analytical view. This organised categories based on pre-set taxonomies in tabs e.g. quality of passwords saved (B), personal information stored on sites (C).

Alternative Analytics View

Security Notifications

This notification feature would inform the user while a security threat took place (A), making the notion of being hacked seem less abstract. Being notified also in real-time during a hack would also make the user more proactive to stop it. This feature could also be a convenient money saver i.e.notifying users before a free trial subscription ends (B).

Security Assistant

Our findings showed us the functionality of our prototype was lacking some personality. So I looked back at Nettoken’s desktop app and discovered a chatbox assistant; being portrayed as a watchdog. This watchdog was a playful way to charm and aid users at the same time. We all felt this could also be incorporated within our app. It would be a great way to introduce a security relevant feature that catered to Nettoken’s user demographic.

Using mascots for online inbox accounts or security-based companies has worked in the past (See MailChimp, TunnelBear etc). It’s a user-friendly and accessible way to entice trust in the user. In a security field, this trust is a fundamental necessity.

Ideations to get a feel for the watchdog

The dog also synced well with Nettoken’s brand identity because the character already featured on their web app and explainer video. However, whether it would be beneficial to the overall user experience relied upon how the character was portrayed. An addition like this has the power to make or break an app. It had the potential for user advantages but could also provoke questions around the app’s overall authenticity.

A necessity of the dogs’ portrayal, was that it at least acted as a loyal assistant towards user needs. Giving daily tips to the user to be more proactive with their online security. Unfortunately, we had no time to do tests on the above functionalities, but Nettoken received the ideas all very positively.

Outcome

Looking Back

We had completed the 2-week design sprint. We gave our clients what they expected and more. With more time, it would have been great to of done some more usability tests on the stretch goal features.

This project was full of insights and an education on so many levels. We all seem to pay little attention to our online security, yet it’s not blind ignorance that prevents us from taking more responsibility. It’s more, we just don’t understand the dangers themselves. In this clickbait society, we rarely see the hacker bogeyman playing for keeps.

Nettoken’s tenacity to make a difference in a field was very inspiring. Strong user-based products that have the strength to better our society — Nettoken are a fine example of this. Collaborating with people who share the same vision, makes all the hard work so much more satisfying.

Nettoken were impressed with how we handled the final prototype design and how committed we were in keeping to their brand’s identity. They plan to implement our findings and features in early 2019.

Below is a video showcasing the final demo of our group prototype accompanied by my running commentary:

If you enjoyed reading this or checking out the video, follow me here! Or let’s grab a coffee together when you’re next free; you can find me here: