Back

Building a Cybersecurity Tool that Unlocks Potential

The challenge

When I first joined Magnetic Rock, Potential existed purely as an idea — a concept for a product that could assess an individual’s hidden aptitude and skills, and help cyber administrators match candidates to roles within the cyber security industry.

The challenge was to take that idea from concept to reality: a live, responsive, device-agnostic product, supported by a robust design system and an accompanying product landing page.

Potential would serve two distinct user personas — candidates and academy administrators.

• For candidates, the goal was to create an engaging, seamless experience across multiple assessments — from role-finding tests to aptitude and skills evaluations.
• For administrators, the focus was on building an insights dashboard that allowed them to interpret results quickly and identify talent that may have been overlooked.

My approach

Research and Discovery

The first step was understanding our users. I collaborated closely with our Product Owner, Lead UX Researcher, and Chief Creative Officer — who also had deep market knowledge and investor insight — to define our user personas and goals.

We held customer workshops with SANS and their academy administrators — our first major client group — to uncover their workflows, challenges, and motivations. This informed the creation of early user need statements and personas that grounded every design decision moving forward.

To understand candidates’ expectations, we ran paid user trials using subsets of assessment questions. This allowed us to observe behaviour, monitor completion times, and identify friction points that could inform improvements to the overall flow.

I also worked with our Product Manager to review early Jira stories and prioritise features for version one. At this point, no design system or front-end developer existed, so I made it a strategic goal to build both. I also defined the requirements for hiring a front-end developer — ensuring experience with Storybook and Chromatic, which would become integral to our workflow.

Define

Once the product goals and user needs were clear, I established a design strategy and set of guiding principles that would shape every decision:

• Intuitive and familiar
• Beautiful in simplicity
• Inclusive to all
• Consistent and honest
• Make thoughtful design a priority

These principles set a high standard for user experience while maintaining approachability and clarity.

I also introduced a user-centred Jira template, where each story included a User Need Statement and scenario context. This ensured that everyone — from product to engineering — understood the purpose behind each feature. It also encouraged open collaboration during sprint refinements, aligning design, business, and user goals seamlessly.

Building the Design System

To ensure scalability and consistency, I led the creation of a modular design system using Atomic Design principles. Given tight timelines, I focused on building only what was necessary for version one — for example, button components in a single style, without unnecessary states or variations. This pragmatic approach kept development efficient while maintaining a clear visual language.

The design system comprised:

• A component library (buttons, inputs, forms, alerts)
• A style library (colour, typography, spacing)
• A visualisation library (data cards, progress meters, dashboards)

Each component was designed in Figma, then developed in Storybook and tested visually through Chromatic, ensuring complete parity between design and code. The result was a single source of truth that all teams could work from — reducing inconsistencies and enabling faster iteration.

Design and Collaboration

I began the design process by mapping all key user flows in Whimsical. At this stage, visual polish wasn’t the focus — clarity and collaboration were. To make discussions efficient, I introduced a colour-coded annotation system to guide conversations and highlight specific types of feedback:

• 🟡 Yellow: post-v1 ideas
• 💗 Pink: engineering notes
• 🔵 Blue: general design comments
• 🔴 Red: open questions requiring resolution

This structure helped streamline communication across UX, design, and development, while making every decision traceable and transparent.

Once the flows were validated, I moved into high-fidelity design in Figma. As Potential was built to be fully responsive, I created designs for multiple breakpoints — from mobile to large desktop layouts.

Working with our Front-End Developer, we adopted CSS container queries, allowing the interface to adapt to its content rather than rigid device breakpoints. This “content-out” philosophy prioritised information hierarchy and usability over arbitrary resolution constraints, making the product feel natural and fluid across screens.

From Design to Development

Collaboration between design and engineering was embedded into every sprint.

Each Jira story included all relevant assets — user flows, acceptance criteria, and annotated Figma links — ensuring developers had full context before beginning work. Regular design reviews and refinement sessions kept everyone aligned and allowed feedback to flow freely.

We integrated Storybook and Chromatic builds with Slack, so the team received notifications whenever new UI builds were ready to review. This rapid feedback loop helped maintain design quality, visual consistency, and development velocity.

Outcome

In just a few months, Potential evolved from an abstract idea into a fully functional, customer-ready product. The experience now feels intuitive, inclusive, and tailored to both administrators and candidates.

Administrators benefit from clear, actionable insights and can easily interpret complex data through a clean, consistent visual language. Candidates experience a frictionless, engaging assessment flow that guides them smoothly from start to finish.

The design system we built has since become a foundational framework for Magnetic Rock — supporting the development of new products with efficiency and consistency. It ensures every new interface maintains accessibility, clarity, and brand cohesion without sacrificing flexibility.