UX Case Study: Operational Risk Policy Creation Section on the JFrog Platform
JFrog policy creation addresses the threat of software supply chain attacks by enabling organizations to ensure that packages are vetted before inclusion in their software.
It works in tandem with Xray by enforcing a set of rules that dictate which packages developers can access. These rules aim to prevent the downloading of packages with potential security or licensing issues from public repositories to their remote repositories.
In this use case, I aim to demonstrate how a few changes can make the process easier, clearer, and save developers' time.
There are a few problems in the current solution:
Lack of functionality to duplicate or delete individual policies
Absence of field filtering options for customization
Excessive white space in the interface
Lengthy and redundant content in the 'New Policy' and 'New Rule' forms
Excessive scrolling due to inefficient use of screen space
The current system UX/UI
The design process
The design process involved enhancing the creation of a new policy to streamline the experience, improve clarity, and save developers' time.
This began with a competitive analysis to understand existing solutions in the field. From there, I iterated on prototypes, carefully considering factors such as layout, sizing, color schemes, and usability. Additionally, I incorporated icons to aid in visual comprehension.
After refining the prototypes, I conducted usability testing to gather feedback and make further improvements. Finally, I created a prototype of the final solution to fully experience the user journey.
I've implemented several features to enhance the user experience:
Added checkboxes for each policy, enabling users to duplicate or delete individual policies or delete them all at once
Implemented a filtering option for the entire table, allowing users to select and view only the relevant fields
Incorporated three policy types for selection when creating a new policy, simplifying the process
Streamlined the policy definition into three easy steps, utilizing the width of the screen and displaying only relevant fields
Enabled users to quickly activate or deactivate policies by utilizing a toggle switch