Hut Six - Security Information Awareness Training

The Client

Hut Six provide B2B information security awareness training and phishing email simulation services for businesses via a software as a service (SaaS) platform. Trading for over 3 years, they have a market validated product deployed live with ~15,000 users across the globe.

The Brief

The client required:

• A general study of their web app UX

• A breakdown of their current user interface to understand the most important actions on screen and how well they are presented to the user

• This could potentially lead to a new front-end design for the application

1. Discover

User interviews

We began by conducting interviews with the client’s current users, in order to get a deeper understanding of their potential motivations or issues with the software.

“the service is very informative — it not only addresses security issues from a work perspective, but also from a personal one as well”

Overall, feedback was extremely positive — though a few common pain points did start to arise. These were centred around the somewhat awkward navigation, and the difficulty of the initial setup process for first time users.

Surveys

Direct competitor analysis was difficult, as business security training is often gated and uses proprietary software. Instead, we chose to focus on conducting indirect analyses of other general online learning providers in order to discover more about their Information Architecture. How were things organised, labelled and navigated through on their sites?

The results were interesting — they showed an overwhelming amount of people still prefer to learn on desktop, despite the prevalence of mobile. Also, when it came to their favourite aspect of the provider, users largely rated ease of use over cost, or even the course material itself.

User Testing

We also needed to understand how easy the current product was to use for people with no prior experience of it.

The users’ task was simply to ‘Add a new staff member to the system, and assign them their first lesson.’

We noted:

• Users often clicked away from the correct screen after not seeing the required button to proceed

• All testees eventually requested guidance on how to proceed

Some patterns we found in the feedback included:

• The order of operations not feeling intuitive

• Users would have liked a signposting/ onboarding feature

• There was a lack of icon clarity/ meaning

2. Define

Persona

So now that we have an understanding of our issues, we need someone to design a solution for. Again based on research findings, we created the persona of Nick, who would enable us to validate any ideas about users and their needs going forward.

Nick needs a straightforward way to ensure all staff have access to high quality, interactive online security training

That is to say, how easily can he go from a brand-new user of the software, to quickly and comfortably assigning both staff groups and training, and start making sense of the results.

How Might We..?

With this problem statement in mind, we drew up some “How Might We” questions as a framework to brainstorm potential solutions. Some HMWs included:

How might we…

• Restructure Management pages to be as intuitive as possible?

• Allocate a User to a Course in as few ‘clicks’ as possible?

• Help users to understand how the current system works so that they can perform the task they need to more effectively?

3. Develop

Ideation

Wanting to involve the clients in the brainstorming process (it is their product after all…), we invited them to a Design Studio session. Often, this is the simplest, most powerful (and lowest cost!) way to generate potential solutions.

We also used the meeting as an opportunity to involve the client in a feature prioritisation session whereby they could help inform us about which aspects of their product they feel are most important, and which new feature ideas they might consider implementing.

We can see that taking a lesson is obviously one of the most important features, but as the implementation of the tutorials rarely came up as a pain point, this could remain largely untouched in terms of functionality.

Features that were labelled as a priority included:

• Add a user to a staff group

• Scheduling a tutorial

• Viewing group and individual training metrics

Navigation

With one of the main pain points being the complex structure of the program, it was important to map out potential solutions to the navigation.

Card sorting was used to help us understand how users interpret and categorize the content. From this, were able to produce a modified menu and navigational layout that better suits the user’s mental models.

Wireframes

With the new layout arranged, we first made some slight tweaks to the way in which the User Interface was presented.

Presently, the sidebar uses a drop-down style layout, which on smaller viewports caused the bottom of the nav bar to fall off the screen. Our implementation uses a horizontal slide, so that menu information was never moved or lost.

The layout of management pages was updated to include the most important buttons clearly labelled and persistently displayed at the top of the page. This would eliminate any ambiguity from the current system of icon buttons, which were unclear and sometimes even performed different functions depending on the page.

Another important aspect from the research findings that we needed to tackle was the idea that, as a new user, there was a lack of visual direction. In this case, we found enhancing the user experience to be as simple as introducing an empty state screen, encouraging the user to interact with the product and offer guidance as to what each page was for.

4. Deliver

Prototype

I put the hi-fidelity, clickable prototype together using Figma, to allow for native animation transitions. We felt these would be important, particularly when demonstrating aspects such as the new slide-out navigation bar.

Now, from the moment the user first logs in, they are greeted with our new dashboard design, which allows for the admins to see at-a-glance, real-time visualisations of the company’s Key Performance Indicators.

Here, the card-style layout also indicates to the user that each of these sections can be interacted with, and clicking on any of these snapshots will take them to the relevant main page of that section without having to even use the nav bar.

We also mocked up a Results page in order to demonstrate how metrics might be displayed, or how key pieces of information could be shown to the administrator as a way for them to quickly be able to make informed decisions on how to keep their company secure.

Conclusion

Despite the challenge of a somewhat uncharted territory for us (B2B), and a timescale of barely 3 weeks, we successfully implemented multiple enhancements to the product that the client found extremely valuable, such as:

• A simpler onboarding process for new users

• Refined site navigation

• An administrators’ dashboard allowing for real-time, at-a-glance visualisations of the company’s Key Performance Indicators

Next Steps

• Consider the implementation of other features (such as Phishing Simulation) as the business scales

• Adding more breakpoints for responsive viewing

• Testing, testing and more testing