Cisco Systems Network Security
A design of the Secure Workload Reporting Dashboard
Role
User Research, Ideation, Wireframing, Data Visualization, Prototyping
Team
Apurva Chhajed (Senior UX/UI Designer), Feixing Tuang(Design Manager)
Timeline
June 2022 - August 2022 (12 week project)
Tools
Figma, Miro
Project Brief
During my internship with Cisco Systems in summer 2022, I was assigned to collaborate with the secure workload team to ideate and design the reporting dashboard on the secure workload platform. This was a project the team was asked to complete by the product manager, and was decided to be a perfect opportunity for me as an intern to tackle.
During my 12-week internship I was able to learn the secure workload platform and it’s capabilities by speaking to user researchers, technical writers, fellow designers, engineers, and the product manager. This highly collaborative environment allowed me to ideate, design, prototype, and present my final design of the reporting dashboard to the stakeholders by the end of my internship.
The Problem
Based on user research conduced by the research team within Cisco Secure Workload, the users of Secure Workload mainly monitors 5 key workflows on Secure Workload, which are scattered across the platform. Users of Cisco Secure Workload are not able to view condensed information and take appropriate actions to resolve issues with these 5 key workflows of the workspace overview, Agents, Connectors, External Orchestrators, and Clusters. If there are any security issues regarding any of these key workflows, the technical users of the product would have no choice but to go through each of the key workflows scattered across the platform to check and resolve ongoing security issues. This leads to the inefficiency of use of the Cisco Secure Workload platform.
Context: What is Cisco Secure Workload?
Cisco Secure Workload is a Saas (Software as a Service) platform within Cisco Network Security. In this platform, technical users such as security analysts or network administrators can view any anomalies within their network and quickly remediate these threats to keep their systems safe. Secure Workload protects all of the applications that power the business’s that utilize the platform with zero trust micro-segmentation across any environment.
A design challenge emerged…
How might we create a more efficient way for the users of Cisco Secure Workload to resolve any ongoing security issues on the platform without having to check each key workflow page ?
The Solution
To solve this ongoing issue with the user, the Cisco Secure Workload Reporting Dashboard will be produced and will summarize the status of workflows on Secure Workload that highlights the 5 key workflows and allow users to take necessary actions to quickly solve anomalies in their networks. This dashboard will include an overview page of security data of each workflow and a sub category navigation bar that better displays all of the data necessary for the users to view.
My Responsibilities
While I had access to contact all stakeholders for this product, I was mainly responsible for the UX design in the information architecture + hierarchy of the dashboard and in making sure that all of the information being displayed is maximized in ease of usability and consolidated accurately for the end-users. My other responsibilities were:
Research: The Cisco Secure Workload team has many user researchers that had already conducted the user research for the reporting dashboard before I joined the team. I spoke to many different researchers and got all of the data needed to conduct my own research based on the information provided to me. I conducted an affinity map and created user journeys for the various end users to fully empathize before design explorations.
Ideation: With all of the different data being displayed on the dashboard, I made sure to research on data visualization and use the correct charts for each of the data. I also got ample feedback from senior designers and engineers on the type of charts used for specific data in the roles and operators.
Visual Design: Using Cisco’s Atomic Design system, I aligned with the company’s standards in color, font choice, and charts used for data visualization.
Wireframing: After ideation and maximizing the correct charts for data visualization from the Atomic Design System, I created 7 versions of wireframes before landing on the final design of information hierarchy.
Reporting Dashboard Capabilities From Product Manager
In my first meeting with the product manager for the project, I was given this initial excel spreadsheet containing all of the various roles and operators that will be displayed on the dashboard.
The roles which are the overview page, agents, connectors, external orchestrators, and cluster are all of the different tabs that will be on the dashboard main page. Inside of these roles are their operators, which will be displayed when the tabs are clicked on the navigation bar within the dashboard.
For example, in the agents health the user can view operators within this tab such as the agent type, agent state of inactive vs. active, if the agent is operational or non-operational, and so on. This goes the same for all of the roles.
Site Map Overview of Reporting Dashboard Capabilities
Before any ideation began, I wanted to organize the given excel spreadsheet into a site map containing the different buckets of roles and operators. To do this, I reached out and set up a meeting with a technical writer and engineer to sort the excel spreadsheet into an organized layout that would be understandable to the end user.
This is an example of the site map overview page where information on the workspaces needing attention, risks, and traffic will be displayed. Along with the data correlating to these 3 summaries of each role in the capabilities page.
User Personas
Cisco Secure Workload has many incredibly talented user researchers who collaborated with me throughout this entire project. They gave me valuable information about the end-users, the product as a whole, and critiques on my design explorations. This past year, the user research team conducted heavy research on the end-users of Secure Workload and curated 5 different personas that use the product, which are Cam (Chief Information Security), Sam(Security Analyst), Remi(Incident Responder), Kit(Network Administrator), and Nik(IT Administrator).
Being handed pages of information for each of the personas, it made it much easier to understand the end-users along with their pain points, goals, needs, and wants.
User Journey
To further understand and empathize with the user, I created 2 journey maps for personas Sam and Nik. I chose to create journey maps for these users because when speaking to stakeholders, all stated that the Network Administrator and the Security Analyst would be heavy users of the reporting dashboard when needing to resolve data conflicts in their network.
Affinity Mapping
After conducting research on the users for Cisco Secure Workload and creation of their user persona cards + journey maps, I wanted to correlate themes before the design exploration phase. This affinity map consisted of 3 parts using Miro post-it notes.
Part 1: Gathering data from the persona cards provided by the user researchers of 5 main users of the secure workload dashboard: Remi, Nik, Sam, Kit, and Cam.
Part 2: Grouping the data based on themes and insights from all the users. This process gave me a much more clear idea on how I can approach the design explorations and what was truly important for the users.
Part 3: After grouping all of the themes from steps 1 and 2, I ideated 4 main pain points that needed to be solved for the user. These 4 main points were what I wanted to focus the design directives on throughout the multiple iterations of wireframes.
Understanding Data Types
Data visualization is a crucial component in this project and understanding how to display the data for the end-user was something I wanted to fully understand before ideation. I conducted heavy research on data types alongside the excel spreadsheet given to me by the product manager and site map. I also set up meetings with my design manager who was a master of data visualization and organized the different roles/operators within their perspective data types when visualized. I concluded on utilizing a bar/double bar graph, pie charts, donut charts, and line charts. I also have various lists within the dashboard for summaries.
Initial Sketches
Before wireframing on Figma, I wanted to sketch out the layout of each data being displayed. Throughout this process I continued my research on data visualization within information architecture in order to have an accurate display of the data that will be helpful to the users. I met with my design manager and the product manager throughout this process for feedback on the hierarchy of the multiple pages.
Iterations + Final Design
There were a total of 7 versions of the dashboard before the final version that I handed over to the product manager by the end of my internship. Below, I will display the first iteration that leda to the final version and explain the changes throughout the process. In between each version, there were many conversations within myself, engineers, the product manager, my design manager, researchers, and technical writers.
In this iteration, I added the key themes/findings I had from the affinity map of the user pain points and needs.
Each of the main 3 overview data sets are separated into their own categories of policy needing attention, risks, and traffic summary. This was organized alongside an engineer for the product.
I added customizable tabs for each data set by enabling the user to collapse or raise each set. They are able to view what they need without being overwhelmed by the rest of the data.
There is an added notification bell at the top of the page to notify users of important changes in data.
To save real-estate on the page, I also added a tab within the traffic summary enable for the user to switch through highly utilized policies and consumers + providers.
There is also a “+” symbol at the bottom of the page enable to further customize the dashboard for the user. They are able to add data points from other parts of the dashboard such as what is within agents, connectors, external orchestrator, and cluster.
There are 5 different users and they all view different data sets. My thought process to add this feature is for each to have their own saved overview of the dashboard. For example, the network administrator will have different prioritized data sets than the security analyst.
In the second tab beside the overview called “health”, I added the data sets of agents, connectors, and external orchestrators.
Each data set is collapsable as well, on this page it was much more important to make the data collapsable since there are many that the user is viewing. One of the pain points of the users was being overwhelmed with data, and by being collapsable, the data is much easier to digest and understand.
There are still data points that need to be added to this iteration, and as meetings go on with the stakeholders the more data sets that needed to be added.
This made me realize that these data points cannot all be displayed in one tab.
During a meeting I requested to add a tab for each of the key workflows, and all stakeholders agreed.
Version 1.0 (Overview)
Version 1.0 (All Key Workflows)
Final Version (Overview)
Final Version (Agent)
Final Version (Connector)
Final Version (External Orchestrator)
Final Version (Cluster)
After many meetings with stakeholders, many interactive elements had to be removed from the dashboard such as the collapsable features or adding/removing data sets. There were many constraints, design critiques, and data given to me that I had to be altered before the final design.
In this version, the data points are color coded blue and red to indicate which data points needs the most attention. They are also in order of severity.
I have added a “Generate PDF Report” at the top of the page enable for the user to have freedom in having physical copies of any specific time they input on the time range.
The time range can also be changed to view data from the past and compare with the new data set.
In the final iteration, each key workflow now has their own tabs on the navigation bar at the top of the page.
In the agents page, I sampled the hover state for each of the different data points on the pie charts. The user does not have to click on each chart to learn more about what is causing the changes in data. They simply can hover over the data point.
In the list of agent interfaces, I added a hyperlink to each item on the list in order to be linked to the agent needing attention and solve any technical issues with the interfaces that were not labeled.
The connectors page had many additions in the data sets from version while, there were also many removed from this page from speaking to stakeholders.
The list of connectors will be displayed on the top right, due to importance in hierarchy. They are hyperlinked to the connectors full informational page as well.
The active vs. inactive states contains a drop-down where the names of the connectors are. This specific data set needed to be shown for each specific connector, unlike the rest of the data set which are overviews. Adding a drop-down saved real-estate on the page and will make it easier for the user to view each data set.
The list of external orchestrator are shown on top for hierarchy of the data sets. It is also hyperlinked for users to see full details of the external orchestrator. The connection status is also added and color coded red/green for successful and unsuccessful connection status.
The current utilization vs. scale number is a double bar graph to make it easy for the user to glance and see which data points need attention. If the 2 points are too close too each other or too far, it is very visible to see.
The cluster page had the most changes in data. There are data points, even after my internships, the engineers were adding more and more to this page.
The processing time + end-to-end log were most valuable in the cluster, which is why they are placed on top. End users want to see this first.
The current utilization vs. scale number and resource utilization both have equal importance, which is why they are placed next to one another.
There were 2 lists that were added, which were the service status and cluster summary report.
Reflections
This internship was a monumental moment for me as a designer, and made my love for design and data visualization grow even more. I was able to cross collaborate with an incredibly talented team with Secure Workload and work on a real-life project that will be used by highly technical users.
The lessons I learned through solving this complex problem in collaboration with technical writers, developers, designers, and the product manager is something I will value forever. I not only learned valuable lessons in design, but also on how product teams work from ideation to dev-handoff.