OpenText Webroot
Actionable insights for effective cybersecurity training
SAT campaign summary report
Overview
Webroot's Security Awareness Training(SAT) is designed to help small/medium business managed service providers(MSPs) and IT admins educate employees or clients on cybersecurity best practices by completing campaigns.
A campaign summary report is an essential tool for our core users, as it provides detailed insights into the effectiveness of the training campaigns they organize.
However, an improvement had to be made since user feedback indicated that the existing report design was difficult to interpret and a want for interactive features.
Project Scope
A revamped campaign summary report that offers MSPs and IT administrators easier error resolution and enhanced readability for analyzing training performance.
Role
UX Design
UI Design
Tools
Figma
Jira
Confluence
Team
1 Product Manager
1 User Researcher
2 Software Engineers
Duration
6 months
PRODUCT BACKGROUND
The campaign summary report is a feature provided as a part of Security Awareness Training (SAT) from Webroot that provides insights into the effectiveness of cybersecurity training campaigns and phishing simulations. Primary users of Webroot are managed service providers (MSPs) and IT admins who take care of IT for operations their clients. They are externally hired by mostly small to medium businesses who don't have their own IT department in their organizations.
Thus, it is MSPs' jobs to educate their clients on cybersecurity best practices.
THE PROBLEM
MSPs are having a hard time reading and resolving campaign errors, often leading to frustration and delays in campaign progress for their clients.
SOLUTION PREVIEW
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
PROCESS
EMPATHIZE
Listening to the voices of our users and being on their eye-level was crucial.
The project came to surface when my team was going over feedback they gathered from direct contact with customers. Most of the feedback had a similar theme, indicating many users were facing similar challenges. It became clear that their pain points needed to be addressed, and these user insights were a good starting point for us to discuss priorities. This gave us guidance on where to start for the revamp of the campaign summary report.
“I wish I could interact with the data more, like filtering results or drilling down into specifics.”
“I have to scroll through a lot of irrelevant details to find what I need. It’s not efficient.”
“I don't always get what's written in the table. It takes some time to absorb the info.”
Meet Alex, a 38-year old with 15 years of experience in cybersecurity.
Based on user insights, I created Alex, a fictional persona, that represents the core users of Webroot. Laying out and understanding Alex's needs and pain points allowed me to focus on the critical areas that required attention. This persona served as a key reference throughout the project, ensuring that every decision was made with a clear understanding of the users’ real-world challenges.
IT Manager
Chicago, IL
Background
Alex works as an MSP that provides IT services to small and medium-sized businesses. His primary responsibility is to oversee cybersecurity solutions for multiple clients, ensuring that their systems are protected against threats and compliant with industry regulations.
Pain Points
Difficulty in interpreting insights
Challenges in communicating complex data to clients
Time consuming security training analysis
Needs
Clear visualization of security metrics
Insights easy to communicate to non-technical clients
Identify security training success/fail rates
ANALYZE
Critiquing the existing design with a fresh set of eyes.
Before starting on this project, I was fairly new to the team and was working on another part of Webroot. However, redesigning SAT's campaign summary report became a top priority, and I was assigned to this as my first leading project. Since I was still familiarizing myself with the SAT section of Webroot, it was a perfect opportunity for someone like me to analyze and define the problems of the existing UI.
Problem 1
Lack of information hierarchy
Problem 2
Unclear data visualization
Problem 3
Poor table readability
Problem 4
Ineffective
layout
Doing a quick assessment before moving onto brainstorming!
To progress to the next step, I decided to assess the old design using a UX principle-based approach, incorporating both qualitative and quantitative evaluation.
I chose Jakob Nielsen’s 10 Usability Heuristics as the framework for this assessment. Given that my role was not centred on UX research, I was tasked with a general heuristic evaluation.
For the quantitative evaluation, I came up with a severity rating scale to rate each heuristic.
Significant usability problem that needs to be addressed
Important usability problem that needs to be addressed
Some usability concerns, but nothing critical
Slight usability concerns that may not need immediate attention
Follows the guidelines well with no usability concerns
DEFINE
What are the biggest challenges to solve and implement in Phase 1?
After analyzing the current single site training campaign, I developed a deeper understanding of users' challenges. I thought about how the existing design was impacting both our primary users (MSPs) and secondary users (clients), not just during their experience, but beyond it. On the surface, the issues seemed mostly superficial, but a more in-depth analysis revealed deeper problems affecting the tool’s overall usability and effectiveness. I then identified key challenges and prioritized them for the redesign.
Helping MSPs interpret important information in a short period of time.
Translating complex data into bite-sized information that is communicable for both MSPs and their clients.
Allowing complex data to be handled in a flexible manner without tool constraints.
Distinguishing important information from supporting content while keeping the design minimalistic.
PHASE 1 GOALS
Translating key challenges into project goals!
Since Webroot operates as a B2B platform, it was essential to establish project goals that aligned with our users' business objectives. After discussions with the product manager, we identified four key project goals, each derived from the major challenges we uncovered.
Enhance UI accessibility for information.
Simplify complex data for easy communication.
Increase flexibility in data handling and navigation.
Minimalistic design with a focus on key information.
DESIGN
Phase 1 design focused on bringing users major layout changes.
Here are the improvements I made:
Sankey Diagram
We chose the sankey diagram with labels that displays a tooltip of status definition upon hover.
Course Completion Table
The new table was given a search bar and filter, as well as the number of courses completed.
Thumbnail Size
The size of the thumbnail was significantly decreased to use space more efficiently and to put emphasis on primary elements.
Courses Layout
Originally a grid view with detailed description, courses section was minimized with a horizontal overflow.
ITERATE
Gaining insight from existing users to prepare for Phase 2.
When we released Phase 1, we already anticipated on working on Phase 2 right away, as we had received additional insights on what users wanted to see and use in the campaign summary report. Before delving right into Phase 2, the product manager reached out to users to receive feedback for Phase 1 to use as a guide for Phase 2. Through this, we identified several pain points from Phase 1.
Phase 1 Feedback:
“The Sankey diagram shows overall flow, but I need a more granular view to identify specific user issues.”
“The visual representation of errors could be more distinct. It's easy to miss issues like delivery errors, especially in a busy report.”
“I like how the two tables were combined into one, but I feel like it's missing important info like error details.”
Phase 2 Requests:
“Changes in this release was a level-up. Now, I want to see the same improvements in multi-site.”
“Bridge the gap between what I'm seeing on screen and what is being printed. There's a lot of discrepencies in the PDF version.”
"I want to be able to resolve issues directly from the report, without requiring support intervention."
SCOPING PHASE 2
Thanks to user feedback, the scope for Phase 2 was clear.
During our weekly Wednesday meeting, we learned that Phase 2 scope was bigger than Phase 1. The product manager discussed feature prioritization with the team, and this is what we decided to implement for Phase 2:
Independent error resolution flow
Delivery error acknowledgement feature
Re-send email feature
Multi-site report improvement to align with Single-site
PDF report redesign
To understand how users would navigate in the new design, I created a user flow.
New features and feature redesigns have been highligted!
Phase 2 introduced a significant number of enhancements compared to Phase 1.
Below are the before and after of existing features😎
Before
After
1
Header: Icons added for visual representation of each category. Purpose of the colour was to bring in more attention to the header content, as it was easily missed.
2
Data Visualization: Streamlined Sankey diagram colors to highlight errors (red), normal activity (blue), and completion (green). Introduced a segmented controller to switch between Sankey diagram and bar chart views, enhancing user flexibility.
3
Table: Replaced Course Completion Details with User Progress table by combining two tables into one. Users can now acknowledge and resolve errors, re-send emails, and track client activity in real-time with accurate timestamps. Expandable rows provide detailed insights.
Below are designs of additional features✨
Multi-site Report
Designing the multi-site report for consistency.
The multi-site report is a feature that helps users set up training campaigns for multiple organizations simultaneously. At its core, the feature is similar to a single site report, but it gives a high-level view of a campaign before getting into the nitty gritty.
After I redesigned the single-site report, the team recognized the need to improve the multi-site report to ensure a consistent user experience and eliminate any discrepancies.
PDF Report
Thinking of the user even after the experience ends.
The PDF report is an additional report that is often used when users want to share training progress insights directly with their clients (organizations).
My task for the PDF report redesign was to bridge the gap between the digital and printed (PDF) versions of the report, making sure that the users and their clients experience consistent communication regarding errors and training progress.
IMPLEMENT
After half a year of hard work, the project came to an end.
Check out the final design sectioned into four parts!
Resend emails with just a few clicks for multiple organizations at once.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Drill down into email delivery error specifics and resolve issues based on error type.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
View and print PDF reports with a consistent design as the digital version.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
REFLECTION
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.