Network Traffic for Juniper Security Director
Security Director (SD) was a product that provided Software-as-a-service (SaaS) security policy management and control for on-premises infrastructure. SD was a newly proposed product at the time which would unite two current products and the command line interface under one consistent design which would also dictate a new design system.
PRODUCT DESCRIPTION
Network Administrators needed to quickly view and troubleshoot networking issues. The current method for traffic monitoring and troubleshooting required vast technical knowledge and expertise in CLI coding in order to understand issues and take action. The Network Traffic feature allowed users to view network traffic from maps, graphs, and grids and then quickly troubleshoot issues by blocking or throttling applications, network users, and source and destination countries . This product was to use AI to edit the policies for users based on their intentions.
PROBLEM TO SOLVE
Convert CLI scripts into a visually interactive experience which Is easy to use and not require any coding by the Network Admin. There was no design system, but design work done for this feature and others would be used to help create it.
Time line | 10 months for iterative design work and usability studies
SOLUTION
I was one of 4 product designers working on multiple features for the new product. Although we were all working on our own features, we had to sync up constantly since we were also creating a new design system. For this feature I started by doing some initial research and then led some brainstorming sessions with others to finalize the workflows and create innovative solutions. I iterated on designs before and after the usability testing. I also documented how the components worked for the design system.
MY RESPONSIBILITIES
TEAM
Product Designer
Product Manager
Visual Designer
UX Researcher
Engineering team
Balsamiq
Sketch
InVision
Adobe Illustrator (for design specs)
TOOLS
Team members were located across 2 time zones.
There was no design system in place., and it was created at the same time as the design iterations.
CHALLENGES
PHASE 1 - RESEARCH
I researched current Juniper security products and competitors, attended a security trade show, spoke with users, and discussed with Product Managers to learn more about the feature.
All competitors provided some visualization into network traffic and threats. We were looking for a way to delight our users by using AI to help them to quickly mitigate network bandwidth issues and threats.
PHASE 2 - BRAINSTORM & WORKFLOWS
I led several brainstorming sessions with stakeholders and the expanded team. Results were used to create process flow and some initial drawings.
Whiteboard sessions included team members in the USA and India. Some initial flow charts were begun and I used Visio to create finalized flowcharts of various workflows.
Whiteboard sketches were used to further communicate proposed workflows and concepts for early feedback with stakeholders.
PHASE 3 - CONCEPTUAL DESIGN
Balsamiq was used to create early wireframes of workflows and gather additional feedback from stakeholders.
Sketch and InVision were used to create click-through prototypes for user feedback.
Workflows included blocking applications and blocking users from the Applications chart view page.
Overlays for Block action, Job Status, and Confirmation were included with the workflows.
Finally, users could see the rules in the policies which were added, deleted, or edited based on the updated rules. They had the opportunity to make further updates to the policies, view affected devices, and view the updated configurations.
PHASE 4 - HIGH FIDELITY DESIGN & USER RESEARCH
Updated prototypes were created for user studies. Findings were shared with stakeholders in meetings with discussion points, as shown here, to decide if they could be implemented.
This view was well received by users, but additional graphs were requested. There was also feedback on display count and expected interaction, which were updated in the prototype.
Updates made to Block overlay based on user feedback:
Removed unneeded columns
Removed ability to link to device list
Updated overlay title to reflect what was being blocked
Updated introduction and instructional text
Updates made to rule placement overlay based on user feedback:
Simplified workflow, so policy actions were no longer possible
Removed ability to expand details
Icons removed from grid
Grid scrolling replaced with arrows
Color coding with legend added
Horizontal scrolling removed
DELIVERABLES AND LEARNINGS
Design specs for components were done in Adobe Illustrator. All designers contributed to creating the components across all features, as they were added to the design system library for all designers to utilize. Design specs regarding the proposed interaction were included during handoff to engineering.
In addition, I co-authored a patent for this feature [INTEGRATED SECURITY SYSTEM HAVING THREAT VISUALIZATION AND AUTOMATED SECURITY DEVICE CONTROL - US 10,135,841 · Issued Nov 20, 2018: https://patents.google.com/patent/US10135841/].
Lessons learned from the user research included to stay focused on the primary task while designing, and not assume users will want access to additional functionality from the product while completing a task.