Workload Details User Experience
Through the utilization of machine learning techniques, FortiPolicy is primarily focused on safeguarding its workloads by suggesting and implementing security policies. In this context, a workload is broadly defined as any program or application operating on a computer. The application of machine learning allows FortiPolicy to dynamically adapt and propose security measures tailored to the specific requirements and characteristics of the workloads, enhancing overall cybersecurity and protection.
Challenge
FortiPolicy aimed to secure all workloads, defined as collections of computing tasks within a network, each comprising multiple ports. Our detailed analysis highlighted the significance of prioritizing the protection of workload ports over securing the workloads alone. The challenge lay in effectively presenting workload port-level details across various complex pages.
Solution
Designing a user-friendly interface to present all details pertaining to a workload port in a simple and accessible manner.
My Role
Staff UX Designer
My Responsibilities
Collaborated with my UX manager in gathering UX requirements, crafting specifications for user-centric network security experiences, and creating intuitive experiences by translating ideas into pixel-perfect designs using Figma.
Duration
June 2022 – Aug 2023
Design Process
Discovery
Initially, we focused on gathering info about workloads to understand the overall tasks. But as we had more discussions with stakeholders and did a closer analysis, we realized it's crucial to also look at specific data related to workload ports, not just the general workloads.
This change came from a better understanding of the details. We saw that examining workload port-level data would give us a more complete view. Expanding our focus to include this detailed information aimed to make our understanding of the system more accurate and thorough, improving our data gathering and analysis.
Ideation
We initiated the project by translating the gathered requirements into a comprehensive documentation, which served as our foundational guide. Following this, we delved into creating wireframes to visualize the proposed solution. Initially, we considered presenting workload-related details through a table format. However, a significant challenge arose concerning the layout, particularly on complex screens that already featured a table. Implementing an additional table proved to be challenging. To address this hurdle, we began sharing and iterating on a series of preliminary wireframes.
Our ideation process led us down various paths, with one approach involving the design of workload properties within a dialog that concealed the header-level information. Following several rounds of trial and error, we ultimately settled on a concept that allowed us to provide detailed information without obscuring the header-level data.
Prototype
Once we had a clear vision of the desired screen layout, we implemented the workload properties panel as a side panel. This approach proved advantageous as it allowed us to showcase the entire dataset while simultaneously displaying header-level details. There were several benefits to adopting this design choice:
Integration with Existing Design: The side panel seamlessly integrated with our existing design, leveraging familiarity from our use of side panels for displaying map features and online help text.
Contextual Detail Presentation: Another notable advantage was the ability to present detailed information while keeping the header-level details in context. This ensured a cohesive and user-friendly experience.
Time and Resource Savings: Implementing the side panel not only enhanced the user experience but also resulted in significant time and resource savings, streamlining the development process.
Test
During the testing phase within our team, we identified a challenge: users were expressing frustration because they couldn't easily view and navigate details for different ports associated with the same workload. To address this usability issue, we implemented a solution. Specifically, we added a dropdown selection for the MAC address field within the workload interface. This dropdown allows users to choose a specific MAC, and upon selection, the system reveals details relevant to the corresponding port.
Upon implementing this feature into designs, we conducted additional testing with our users. Their positive feedback indicated that the new layout was well-received.
Once the design adjustments were approved by the team, I handed over the finalized Figma designs to our development team.
Initial Wireframes
Results of Usability Testing
Style guide for Developers
Final Mockup Screen1
Final Mockup Screen2
Key Takeaways
The main lesson here is that working together and making small improvements over time is crucial for creating a user-friendly design. Throughout the journey from defining requirements to crafting the final design, we underwent multiple iterations. Despite the iterative nature of the process, the end result proved to be successful and satisfying.