Advance Settings User Experience
FortiPolicy employs its machine learning capabilities to discover its network, offering security policy suggestions for users. For these recommendations to be most effective, users are required to customize the policy generation settings. This process involves utilizing a wizard, a user-friendly tool that guides users step-by-step to configure their preferences. By doing so, users can establish security policies that align closely with the specific needs and characteristics of their network, ensuring a more robust and personalized approach to secure their digital environment.
Challenge
In enhancing our existing product, we introduced a new requirement: the integration of Layer 7 features, addressing how applications communicate through protocols and services. The primary challenge lay in restricting the configuration solely to Fortinet customer service; regular users were not to modify these settings. Additionally, we faced the task of seamlessly incorporating these settings into our existing configuration wizard.
Solution
Creating a user-friendly experience for advanced settings involves ensuring they are one step away from regular users. The goal is to seamlessly integrate application control settings into the existing layout, making the overall design cohesive and easily navigable.
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
During the requirement gathering phase, the emphasis was on crafting a user experience that remained inconspicuous to regular users while remaining accessible to support engineers. The challenge was to incorporate these supplementary settings into the advanced settings dialog, which was already a component of our existing product.
This meant ensuring that the advanced settings maintained a balance, being discreet for the average user yet comprehensive enough to meet the needs of support engineers.
Ideation
During the ideation phase, we strategically distinguished between two primary user groups: customer agents, who serve as the main users, and regular network users, comprising the secondary group. This comprehensive understanding of distinct user categories not only shaped our conceptualization but also guided the incorporation of wireframing sessions into the ideation process.
Wireframing sessions allowed us to visualize and sketch the skeletal framework of the user interface, The iterative process played a pivotal role in refining the user experience by providing a concrete basis for discussions and evaluations.
Prototype
In the prototyping phase, we took a hands-on approach to refining the user experience by creating iterative designs. Building on the insights gained during the ideation phase, we transformed low-fidelity wireframes into visually rich designs. A couple of key design elements were incorporated to enhance user interaction:
Checkbox for Additional Settings: In response to user feedback and to enhance clarity, we replaced the toggle button with a checkbox to enable additional settings. This checkbox design provides a clear visual indication of the status of the settings—checked for enabled and unchecked for disabled.
Informative Messages for Regular Users: Recognizing the importance of user guidance, especially for regular network users, we implemented informative messages. These messages were strategically placed to caution and guide regular users against modifying these settings without seeking customer support.
Test
We initially presented our designs to the team and conducted internal testing. During this testing phase, we discovered that presenting application control-related information openly led to confusion among users. Additionally, we identified space limitations within the dialog box. In response, we redesigned the application control using a tab set, allowing us to enable options one at a time, thereby addressing both the usability concerns and space constraints.
Our final testing was successful, and we received approval for the designs from the stakeholders. Following which I handed over Figma design files to my development team.
Initial Wireframes
After Testing
Key Takeaways
Opting for a different approach in the iterative process proved to be a key factor in attaining end results that were not only well-received by stakeholders but also led to overall project success and personal satisfaction. This underscores the significance of adaptability and stakeholder engagement in achieving positive outcomes.