CybSafe navigation

Client
CybSafe
Role
Product Designer
Timeframes
Dec 2022, Jun 2023 – Aug 2023

CybSafe helps security teams manage human cyber risk. After a successful Series B funding round in 2022, it saw a period exponential growth. That same growth was reflected in its product. But by May 2023, this had resulted in a chaotic, disjointed experience that was difficult to for its users to navigate.

I led an initiative to align CybSafe’s information architecture with how humans navigate the real world. Its first iteration was a redesign of the platforms main navigation, which saw a 78.5% adoption rate before its official launch.

Highlights

CybSafe's admin navigation. The left panel contains the top-level links and submenus. Inside the submenus are the second-level links. At the top of the main page is the page header, containing tabs that act as the third-level links.
Overview of the main navigation.
The admin side panel menu highlighted on the left side of the interface. It contains the navigations top-level links and submenus. The GUIDE submenu is open, revealing five second-level links. The top-level PHISH link is selected.
Admin side panel and submenus.
The section header highlighted at the top of the main page content. It contains the title of the section, 'Phishing simulations'. Under the title are the third-level navigation tabs, with 'Campaigns' being selected.
Section header and tabs.

How it went

📈 78.5% adoption

before its full roll-out

🌟 4 out of 5

average rating for ease of use

🚀 Successful launch

of CybSafe’s core products

❌ 5% opt-out rate

before its full roll-out

Process

Background

A cyber security startup

CybSafe is a human-risk management platform. This means that its built for security professionals to understand and control the human aspect of cyber security in their organisations. Traditionally, this involved assigning annual training to employees. However, CybSafe differentiated itself with its focus on improving security behaviours and quantifying risk.

An exciting time

After completing its series B funding round in 2022, CybSafe was on cloud nine. Riding the same high every that tech company did in the early 2020s, it went on to triple the size of its Product & Engineering team. This was to drive product growth, the value customers receive from it, and ultimately returns for investors.

A mind map showing the 'Product & Engineering' team branching out into six squads. Squads three to six are labelled as new.
CybSafe’s Product & Engineering team grew from two squads to six.

Who uses CybSafe

Being a B2B2C product, CybSafe has two primary user groups. This project focused on the admin experience.

🧑‍💻 Admins

Security professionals who use the admin panel to manage CybSafe for their organisations.

🧑 Users

Employees who interact with the CybSafe platform as decided by admin.

Problem

A sticky situation

It wasn’t long before I noticed a growing problem. Each product squad was laser focused on shipping new features within their respective areas. But we weren’t paying enough attention to how our work fit into the system as a whole. This resulted in:

🖨️

Duplicated work due to squads frequently reinventing the wheel that already existed elsewhere in the product.

🗺️

Overwhelming navigation because more and more new features were added to the admin menu.

⛓️‍💥

A disjointed admin experience because different features existed in silos despite being functionally interconnected.

The challenge

I identified this as a lack of systems thinking and process behind the information architecture (IA). Explaining this to the Product & Engineering team proved to be a challenge though. So first I needed to help them understand the problem and how these concepts could help address it.

Promote strong systems thinking and IA principles across the Prod & Eng team, gaining buy-in to embed them into the product development process.

Gaining buy-in

A refresher

To help make a case, I explored potential methods address the issues. Through this I learned of Object-Oriented UX (OOUX). This structures digital products around the ‘objects’ that users interact with and the relationships between them. I decided to move forward with OOUX because it addressed all of the issues. Its object-oriented programming roots would also resonate with our engineering-driven team.

✅

Reduces duplicated work by encouraging teams to reuse and build upon existing objects, rather than reinventing the wheel.

✅

Simplifies navigation by limiting its main items to the core objects that make up a system.

✅

Creates a holistic experience by surfacing the relationships between objects, enabling clear navigation paths.

Lunch-and-learn

I was conscious of putting all of my eggs in one basket. Luckily, CybSafe has several forums for people to share their expertise and domain knowledge. I chose to use a lunch-and-learn to introduce OOUX to the team, using it to explain the problems we were facing and how we could solve them.

A presentation slide showing an illustration of a café. Under the café are five blue cards reading 'Coffee', 'Menu', 'Register', 'Table', and 'Chair'.
Cafés are an example of how people use objects to navigate their environments.

The reception

The lunch-and-learn had an excellent turn out with almost the entire Product & Engineering team showing up. The presentation itself was well received and OOUX resonated enough that several people messaged me to express their interest.

“Would love to spend some time going through OOUX. I think this is going to be MEGA 🔥” — ELT member

Before we continued

Shortly after the lunch-and-learn, the business announced a change to its product strategy. Feature work was now even more of a priority to deliver new value to customers quickly. This impacted the initiative in a few ways:

🍽️

Redesigning the IA would have to wait in favour of the bigger priorities on our plates (new features).

🚚

Prioritising quick delivery meant squads had less time to figure out the perfect place for new features.

🧠

BUT squads were more mindful of where to place new features, which prevented the problem from getting worse.

In the meantime

A chance to up-skill

The lunch-and-learn was a moderate success, but there was much more for me to learn about OOUX. It would also be a while before IA became a priority. So I used this time to take the self-paced OOUX Masterclass. This would equip me with the necessary skills to lead any redesign of the navigation or IA when the time comes.

Interface for an online courses platform. One course, title 'The Object-Oriented UX Masterclass 2.0' is shown with a progress bar at 100%.
Photographic evidence that I completed the OOUX Masterclass.

Applying new skills

During the course, I applied my learnings by running hackday workshops with Researchers, PMs, and Engineers. Using interview transcripts and our domain knowledge, we identified core objects that formed admin mental models of the platform.

An online whiteboard with blue post-it notes on the left under 'Noun forage (from interview transcripts).' On the right, some notes are grouped, with all but one in each group turned grey.
A common method to identify objects is by consolidating the nouns that are frequently used to describe the system.

A new pricing model

The product's complexity was also causing challenges in the sales cycle. Many lost opportunities were because prospects wanted features from higher pricing tiers but didn’t want to pay for lower-tier features as well. To solve this, the Senior Leadership Team decided to relaunch CybSafe as three core products.

🧭

GUIDE provides personalised security awareness training & support to organisations.

🎣

PHISH helps security teams reduce phishing & ransomware risk to their organisations.

👋

RESPOND provides human risk management automations that are power by behaviour data integrations.

Project start

Surprise!

In June 2023, I got a message from my manager. I had been asked to lead a redesign of the platforms main navigation. I met with the key stakeholders (the Head of Design, 2 PMs and the CTO) to align on the project requirements. There were several needs that prompted it.

🚀

Facilitate CybSafe’s relaunch and sales by splitting up the current platform into the three core products.

🛠️

Simplify the main navigation which had become inundated with submenus, leading to customer complaints.

🏗️

Establish a clear process that guides product folks on where new features should land in the platform.

🗓️

End of September deadline to allow for a three month opt-in period before the full roll-out January.

The new challenge

Redesigning the main navigation was a good start but just the beginning. That said, restructuring the entire platform by September wasn’t realistic. So we agreed to allow for small structural changes as well. These, with the new navigation, would be a solid foundation for future IA improvements.

Redesign CybSafe’s main navigation to support its relaunch and improve its usability, while establishing a clear process for adding new features and a solid foundation for future IA improvements.

Deciding the structure

More workshops

As you might guess, I advocated for an object-first approach. So far, I had only worked with Product & Engineering folks. But there were also valuable insights in the GTM team, including former admins! With their help, I refined the nested object map to better align with admin mental models of the platform. This would help decide what items should be included in the navigation, how they should be grouped together, and where different objects could be cross-linked together.

The refined CybSafe object-relationship map. It shows the core objects as blue post-it notes along the top. They are listed again down the left side. At each intersection, more blue post-its are present where there are relationships between the two objects.
A key addition included where objects should be related to one another.

Exploration

Based on the refined object-map, I explored how the navigation could be restructured. I was aware that I had made a big personal commitment to OOUX. So I explored multiple approaches, including ideas from the rest of the team. This way, the final approach would be based on merit having been evaluated against other viable options. In the end, two gained the most traction with stakeholders.

Two mind maps for CybSafe's navigation. One, 'Core products,' groups items under GUIDE, PHISH, and RESPOND. The other, 'Object-oriented,' organizes the same items under Guidance, Phishing, and Automation.
Approach 1: Core products, Approach 2: Object-oriented

Where should analytics go?

There was one last decision. Object data was currently in reports, separate from where objects were configured. I proposed moving this data to the config pages, consolidating all object information in one place. The reports could then focus on broader analytics like risk and compliance. However, this required a deeper restructure beyond our agreed scope. Stakeholders were also influenced by how other B2B SaaS products handled data.

Two mind maps showing options for how the reports could be structured. One labelled 'All data in reports' has 11 items under 'Reports'. The other, labelled 'Object data with objects' has 6 under 'Reports'.
The final structure for reports compared to my object-oriented proposal.

The decision

Stakeholders loved the concept of OOUX, especially the idea of structuring navigation around nouns (objects) instead of verbs (actions). They also valued clear separation between core products to clarify where the features for each one were located. So we reached an agreement. We would move forward with the object-first approach, using core products as primary categories for each group of objects.

A mind map of the final navigation structure. The top level items are as follows: Dashboard, Reports, GUIDE, PHISH, RESPOND, Settings, and Resources. GUIDE, PHISH, RESPOND, and Settings each have 3 to 5 more items under them.
The final navigation structure.

Redesigning the navigation

Before: a slew of submenus

The original navigation consisted of two layers of submenus containing over 100 items, all within one side panel. This quickly became overwhelming, requiring a lot of cognitive effort to process. The restructure had already reduced the number of pages as much as possible. So I needed to find a way to make it easy to digest despite the number of items.

The old CybSafe navigation. All links are contained in the left side panel. The 'Improve behaviours' submenu is open, revealing 9 more items. Of those items, the 'Learning' submenu is also open, revealing 4 more items in the third-level.
The original admin menu.

After: One batch at a time

My redesign focused on using progressive disclosure to reduce cognitive load. The side panel remained, but now contained just the first and second level items. The third level items were moved to a ‘header’ component that persisted across all pages within a section. This gradually feeds information to admins in batches, rather than blasting them with everything at once.

The first iteration of CybSafe's new admin navigation.
Prototype for the new admin navigation.

Time to test!

How we tested it

Given the scale of the changes, testing was essential to identify and resolve any potential issues. Recruitment options were limited, so I leveraged CybSafe’s admin focus group to recruit three participants, and two more former admins internally. The test itself was divided into two parts.

🏛️

An interactive mind map of the proposed structure to make sure it aligned with admins’ expectations.

🗺️

A prototype of the new navigation to identify any usability issues that needed to be resolved.

Key findings

Overall, participants were positive about the updated structure and new navigation. However, there were a few pain points.

🏛️

All participants understood the new structure, successfully finding the data and features they use most often.

👍

The new navigation was considered an improvement though one participant commented on the ‘number of clicks’ being the same.

🤷

The 'People' settings were hard to find because participants expected them at the top level, not in the Settings submenu.

⚙️

Moving between reports and config pages was clunky because participants had to go through several navigation levels each time.

🙊

Most participants checked the product submenus first to find reports on specific objects (e.g. module completion).

The final version

From the test findings, I made some minor adjustments. I wanted to revisit moving object data to their config pages. At the very least, the findings would support this to be considered in the future. In the meantime, I added cross-links for more efficient pathways between reports and config pages.

The final version of the new navigation. The 'People' link has been moved from the settings submenu to the top-level. Next to the page header title, there is now a link to 'View reports'.
The final version of the new admin navigation.

Launch

A gradual roll-out

The project was completed on time in September, but the platforms official relaunch was the following January. This was intentional. New customers were already being sold the core products and so got the new navigation immediately. Existing customers had a three-month opt-in/out period to ease the transition and avoid workflow disruptions.

The CybSafe admin interface with a green banner. It says 'On Jan 12th 2024, we're updating the admin menu to make it easier to navigate CybSafe.' It includes a link to 'Find out more', and a call-to-action to 'Switch to new menu'. There is also an 'X' icon to close the banner.
Admins were prompted to adopt the new navigation.

Great results!

The new navigation was well received by admins. I was pleased to see that the majority adopted it during the opt-in period with only a few reverting, indicating a clear improvement to its usability. In January the rest of the customers were transitioned to the new navigation smoothly.

“I’m really enjoying the new admin view. Again, great kudos to the product team.” — Customer admin
📈 78.5% adoption

before its full roll-out

🌟 4 out of 5

average rating for ease of use

🚀 Successful launch

of CybSafe’s core products

❌ 5% opt-out rate

before its full roll-out

I didn’t want to gloss over the admins who reverted to the old navigation, so we reached out to understand why. The main reason was that they were already familiar with the current structure and could see there would be a learning curve. Based on their feedback, we adjusted help content to better highlight the changes to the structure before its full rollout.

An improved process

The project also improved how the product was built upon. There was now a framework for where new things should go, based on objects and what core product they were part of. To finish things off, I created guide to help the the team decide when to place new items within the new structure. This was very heavily based on the ‘SIP’ process in OOUX, however I added extra steps that were specific to CybSafe.

A flowchart that helps readers decide where, if at all, to place new features and capabilities in the new navigation structure.
The navigation flowchart provided a quick reference for where to add new features.

Retrospective

Overall, I was very happy to see my work well received. It was a valuable learning experience, where I developed unique skills in information architecture and systems thinking. The biggest challenge was actually making it happen. My main takeaways from the initiative were:

⚖️

Everyone has their own priorities and cannot be expected to adopt new processes unless it’s made easy for them.

💰

Projects are driven by business needs, like the relaunch. If it was clearer how IA and systems thinking benefit the business, I might have got buy-in sooner.

🏆

Take initiative! The project's success was largely because I saw a problem and took action. If I hadn’t or gave up, no one in the company would’ve had the skills to lead the navigation redesign.

Still more to do!

The navigation redesign had set a good foundation for further IA improvements. It clear that this was going to be a never-ending initiative rather than a one-and-done project. So I continued working towards it whenever there was an opportunity to do so.

✂️

Reduce complexity by collaborating with the rest of the team to prioritise what is truly necessary to include in platform, merging or retiring things where necessary.

🔗

Join the disjointed platform together by cross-linking related objects together and establishing clear user journeys for admins to achieve their goals.

🌐

Continue promoting OOUX to build and maintain strong IA and systems thinking principles across the Product & Engineering team.

Thanks for reading 🙏

Next project

CybSafe, Workshop modules
Samuel Faiers — Product Designer
Email
LinkedIn