PRINCIPAL PRODUCT DESIGNER
RE-INVENTING CYBER RANGE,
A CYBER SECURITY LEARNING PLATFORM
This is the story of Cyber Range, a learning platform for students, IT professionals and existing cyber security experts interested in developing cyber security skills. The story covers major design decisions and product transformations over the course of 3 years during a complete design overhaul and implementation.
As the first designer on the product team, I divided my attention between developing the product design strategy and executing on it, educating the team on user centric design and contributing to a team culture based on collaboration, transparency and conversation.
In this case study, you will see examples of personas, workflow diagrams, mockups, interactive prototypes, and before-and-after screenshots of the same interface.
STARTING FROM SCRATCH
I joined Field Effect soon after the pandemic started and I was fully remote for all 3 years, visiting the Ottawa office from time to time. User experience design was new to the company. The goal set for product designers was to shape the design strategy of the 3 existing products to make them more appealing to users and increase sales.
I was the first designer of the Cyber Range team. When I joined, there were two old versions of the product, both missing functionality that users needed. There were very few customers, who used the product infrequently, and when they did, they found it hard to find what they needed and understand how it worked.
The product owner was also the team manager and part-time sales engineer. His vision was to build the product from scratch, with a React frontend, in a way that would attract more customers. My role was to take this vision, build and own the design strategy and a process, and work with the team that was under construction, to make it happen. Lofty, but any designer who reads this knows that this type of design challenge is very rewarding, so I was completely up for it.
INITIAL DISCOVERY Summer-Fall 2020
I started with: a lofty goal, no product requirements, a very loose roadmap and an open disclosure of the product owner that he didn't understand UX, but he was open to learning. I kicked off the project with a few discovery activities.
Heuristic Analysis | Interviews and Observation Sessions | Personas | Workflow Diagrams | Usage Scenarios | Areas of Focus | Product Roadmap
At the end of my discovery phase, I identified 6 areas of focus and 3 primary personas. In collaboration with the product owner, we decided to start the redesign of the product with the Student and the Instructor workflows.
FIRST REACT RELEASE Fall 2021
Student and Instructor Workflows
Cyber Range was being re-invented from its product focus to workflow, interaction and interface design. I conducted in-depth interviews and observation sessions with students and instructors and collected their stories in use cases and personas.
With a new product came a new look, voice and tone. I collaborated with the designer who was working on the new design system and with the creative marketing team who was responsible for establishing the new brand, voice and tone of the product.
The timeline was ambitious and for a while, I had 3 designers working under my leadership. I planned the work, broke it down in tasks assigned to each designer based on skills and experience, and coordinated the work to ensure that deadlines were met. I wrote epics and user stories with acceptance criteria. I initiated a bug triage meeting and a series of Agile ceremonies for the team to engage in. I initiated, created and delivered product demos to customers internal stakeholders to showcase the work of the Cyber Range team, show progress and celebrate success.
Example of a user story
User Experience Design
After the initial audit of the existing functionality, notes from observation sessions and user feedback, I started mapping out the user requirements for students and the instructors. The user requirements were translated into elegant design solutions documented in Figma mockups, interactive prototypes, epics and user stories. Old and new were coming together in a brand new, re-invented Cyber Range product that was tailored to student and instructor needs.
A few examples of the old interface with its known pain points and how they were addressed with the new solutions:
Old Active "Runs" of Courses and Exercises
New Active "Instances" of All Types of Learning Material
Old Course and Exercises Catalogs
New Learning Catalog Listing All Types of Learning Material
New Course Creation Wizard
Example of a Voice-Over Interactive Prototype Linked to a User Story
SECOND REACT RELEASE Winter 2022
New Information Architecture and Navigation System
The two old products, each with its own navigation system and information architecture, were brought together in new, re-invented Cyber Range organized in multiple workspaces for students, instructors, and learning material authors. The new navigation system reveals the relevant menu items for the type of user who is logged in.
After conducting usability testing with multiple interactive prototypes exploring different navigation structures and colour schemes, the most well received was a top navigation consisting of a menu bar and tabs. The colour scheme is using a bold, dark gray to anchor the page at the top and a cyan colour from the new Cyber Range logo to show the selected menu item.
THIRD REACT RELEASE Fall 2022
Capture the Flag Events
The next candidate for the Cyber Range transformation was a product module for organizing and hosting Capture the Flag events for multiple participating teams. The new functionality was used for the 2023 and the 2024 Cyber Titan Competition.
The design challenge consisted of creating two different interfaces, one for the participant and one for the facilitator. My design approach was to include design elements and widgets that update live to create an atmosphere appropriate for a competition and provide live, relevant information to both the participants and the facilitator during the event. This was accomplished by designing and implementing an event banner that displayed the status before, during and after the competition. A live scoreboard and activity feed provided additional information during the game. The end of the game was marked with a dynamic message announcing the winning teams.
This functionality was tested extensively to ensure that up to 100 people can participate in an event simultaneously and utilize the virtual machines set up for each environment. The Cyber Titan event was a success.
Participant's Workspace Game On
Facilitator's Monitoring Page
This is an example of the moment when the facilitator created the new event environment and the virtual machines that are part of the environment are being provisioned. Participants cannot yet access this environment.
Banners
A few examples of the status displayed on the event banner for the participant
FOURTH REACT RELEASE Winter 2023
New, remastered Virtual Infrastructure functionality
Another primary persona identified early on in the initial discovery phase was the content author. The content for Cyber Range consists of courses, assignments, scenarios, and games that students utilize to learn and practice cyber security skills. The content authors are highly technical professionals who build complex environments populated with virtual machines that students can use to solve the problems that are part of the activity. In order for the content authors to set up these complex environments in the old product, they needed to use other software in conjunction with Cyber Range. This was a nuisance for many reasons, including inconsistency in interface and terminology and license issues to name a few.
I continued to own the user experience, being the sole designer on the product. This is probably the release of the product where I was the most creative, although it was the most technical functionality. Creativity was required because the functionality was scattered between multiple products and the flow was very cumbersome, but users had embraced it since they were in the product every day. They had bent their workflow to fit the way the product worked and they had accepted it as it was.
Instead of trying to discover what didn't work, I started asking them what would take for them to do their work faster. This question opened up their minds and they were able to show me the parts of their workflow that was significantly slow because of how the product worked. Through many observation sessions and discussions, I was able to get into their heads and understand what was important to them as technical content authors. It was a steep learning curve for me too because I didn't know much about virtual machines and all the technical terminology that they were using.
In the end, I was able to imagine a way to simplify their workflow and propose a very new way of approaching their work. I took a risk and had many reviews with the product owner and with the users themselves to define and refine the new design concept. I built a Figma prototype and tested it with users who had an overwhelmingly positive reaction to my concept design proposal. They found it easier, simpler and more straightforward, with the functionality that they actually needed all available in Cyber Range.
To accomplish this design vision, I had to go through a rigorous prioritization process along with the product owner and split it in multiple mini releases.
New Cyber Range Template Wizard
A complex workflow reduced to a 3-step wizard with all the instructions and automatic checks required to prevent users from setting up an environment that may later fail.
This was a significant improvement that flagged issues prior to the environment being created and it eliminated a lot of unnecessary failed environments that cluttered the old interface.
Cyber Range Templates
One of the most time consuming pain points in the old product was the lack of search capabilities and not enough information displayed up-front about Cyber Range templates.
Part of the solution was to design, prototype and conduct usability testing for a robust search that gives users meaningful criteria to search templates. The developers pushed back on the robust search originally, but when they saw the overwhelming positive feedback from users, the team rallied around this solution and implemented it in incremental releases. The design went through multiple iterations based on user feedback and the final implementation was very well received and adopted by content authors.
Virtual Machine Snapshot Page
The most important new feature of this page is the search that addresses one of the biggest time consuming pain points from the old product. Users did not have enough information about each virtual machine snapshot, which led often to the creation of a new one to make sure that the snapshot had all the necessary data, users and software packages installed on it. The consequence was a cluttered interface, with tens of snapshots that had identical names and often identical content, and that nobody every cleaned up.
The new solution provides a reliable search, valuable up-front information about each snapshot, notes that users can add to specify what is important about each snapshot. Snapshots that belong to the same virtual machine are organized in collapsible/expandable sections and each snapshot that is linked to a Cyber Range template, provides a link directly to this template. This way is it very obvious at a glance, which snapshot is linked to a template, and which one isn't, leaving no room for doubt. The new solution checks for duplicate names and flags it to the user.
