UX/UI
Responsive Web
OpenText Webroot
I don't know how you got here but…
I don't know how you got here but…
Enhancing the cybersecurity training report
This case study is made for desktop mode.
This case study is made for desktop mode.
See you there!
Role
Interaction Design
Visual Design
Outcomes
93% user satisfaction
80% attractiveness score
85% overall performance
Team
1 Product Manager
1 User Researcher
2 Software Engineers
Duration
6 months
Product Background
What is a "campaign summary report"?
Who is it for?
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 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.
The Problem
IT admins are having a hard time reading and resolving campaign errors, often leading to frustration and delays in campaign progress for their clients.
The Solution
Resolve campaign delivery errors based on type.
Enhanced single-site reports display detailed delivery error types, offering actionable insights for IT admins. A support link is also available for resolving complex issues.
Resend campaign emails to multiple organizations at once.
The multi-site report provides IT admins with a unified view where they can identify campaign delivery errors across organizations and resend emails to affected clients.
Optimized PDF reports for simplified campaign progress communication.
IT admins can now easily communicate campaign progress with their clients by generating PDF versions directly matching the digital format from single-site report.
Process
Empathize
User Insights
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.
User Persona
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.
Analyze
Scroll inside the laptop to see the old design!
Old Design Problem Overview
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
Heuristics Evaluation
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.
5 - Severe Issue
Significant usability problem that needs to be addressed
4 - Major Issue
Important usability problem that needs to be addressed
3 - Moderate Issue
Some usability concerns, but nothing critical
2- Minor Issue
Slight usability concerns that may not need immediate attention
1 - No Issue
Follows the guidelines well with no usability concerns
Interact with the chart to view details!
Define
Key Challenges
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 (IT admins) 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.
Allowing complex data to be handled in a flexible manner without tool constraints.
Translating complex data into bite-sized information that is communicable for both MSPs and their clients.
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
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
Feedback
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
Phase 2 Design
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.
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.
PDF Report
Bridging the gap between digital and PDF reports.
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.
Conclusion
Learning to negotiate within a cross-functional team!
Leading the CSR project enabled me to gain a deeper understanding of the importance of collaboration with diverse stakeholders. I worked closely with product managers, software engineers, and UX researchers. The opportunity to collaborate with those who did not have the same expertise as me taught me how to communicate my designs effectively.
During my time at OpenText, I worked on a total of 4 projects. My achievements caught the attention of top executives, earning praise from the VP of Cybersecurity, VP of Engineering, and Director of UX!
Working on multiple projects at OpenText taught me to prioritize tasks, improving my project management skills. It also helped me better understand the challenges and opportunities of design leadership and the impact it can have on business.
