←Go back
Spring 2023, UK

CybrHub - SAAS Platform Design

7 minute reading time

Duration

Feb - April 2023

Role

Product & UI/UX Designer

Scope

Product design
Product strategy
Interaction design
Visual design
Prototyping

Tools

Figma
Illustrator
After Effect
CyberHub empowers businesses and organisations with essential knowledge training and advanced tools to counter cyber threats, risk monitoring, and detection solutions effectively
● Brief
Develop a comprehensive platform for CybrHub to enhance organisational safety through cybersecurity training for staff, simulated threat testing, and real-time threat detection and reporting. This platform will also include a revamped onboarding experience and will assist CybrHub in constructing a robust security network for the organisation.
● Objective
We aim to refresh CyberHub's visual brand identity to enhance its usability, flexibility, and scalability. Additionally, this update will ensure a consistent visual language is maintained across all user’s interactions.

Scenario 1

Security Training Managers

Scenario 2

Company Executives

Scenario 3

IT and Cyber Security Professionals

Scenario 4

Employees Undergoing Training
● Phase

1. Recognise

Understand the internal needs and clarify user needs through questionnaire

Collaborate on data structuring with the product owner and data engineer

2. Research

Execute competitor analysis

Share the discovery with internals members

3. Research & Define

Consolidate the needs and efforts

Clarified the issues

Define product goal for V.1

4. Prototype

Established user flow design, wireframe, and mockup design

5. Test

Run user testing and adjust the design mockup

6. Develop & Launch

Developed and launch V1.0

7. Reflect

Analysed the patterns

● User journey mapping
After interviewing users, we created a journey map to help businesses identify improvements and enhance onboarding experiences. Emphasising user emotions and pain points is key to a positive experience. Regular updates to the map, informed by user feedback and analytics, optimise onboarding and boost user satisfaction and retention.
● User voice

“As someone without a background in cyber security, I find it somewhat difficult to comprehend the jargon and functions provided by this platform."

"As a newcomer, there appears to be no introductory process to acquaint me with the basic usage of this platform."

"Wouldn't it be advantageous to have a mobile version, thereby making it easier to view and utilise?"

● Define
We categorised these findings into 4 main issues we had to improve
● Objective

Lower the onboarding gate

Add onboard steps for the platform

Enhance the visual consistency of platform and product

Acquire more user loyalty and interaction

Lower the dropout rate

● Ideate
Based on the pain points we discovered in the research and questionnaire, we are starting a new journey to add onboarding steps and introduce our platform's four primary features: online cybersecurity module training for organisational staff, threat detection and reporting, management tools, and in-depth analysis capabilities.
Onboarding flowchart
Onboarding steps
Information structure for SAAS platform
Login & onboarding
Main Dashboard

The Dashboard section provides a comprehensive view of an organisation's security posture. This includes User Behaviour Analytics and real-time Threat Alerts.

Couch
Report
Prototyping
Mobile APP
Prototyping
● Reflect & take away

I had fun designing this project. Cybersecurity is a vast field, and I admit there's still a lot more to add and improve on in this project. However, the product was ambitious in its outcomes.

We offered features and tried to develop them on a tech stack that was advanced for our engineering capacity at that time. We were able to create the extension functions, but their performance faltered after a few pages. It's important to remember that not everything you design will make it into production, and that's okay. Take all the learnings you can!