Security Enhancements

Improving Usability of Maven Central and increasing awareness of Sonatype Nexus Respository
User Research
User Testing
Wireframes
High Fidelity
Accessibility

My role

User Research, Wireframing, Accessibility & Visual Design.

Platform

Desktop, Mobile Responsive

Category

SAAS, Data & Security

Duration

3 months
Introduction
During my time at Sonatype, I worked on the lifecycle team to contribute to it’s growth. This led me to develop a passion for creating scalable product interfaces that drive growth through well-defined, standardized design practices.

While working with the Sonatype lifecycle team, I was opportune to work on a feature to increase productivity for developers by enabling Sonatype lifecycle users make custom changes to vulnerability information.
Scope
Developers often manage vulnerabilities while building out applications to maintain system integrity and to comply with security standards and regulations. Sometimes, depending on the software environment, there is a need for custom changes made by the developers to the vulnerability information itself so that there is less friction during developer collaboration.  The following challenges were identified as key areas to address for the project's success.
  • There is a lag in communication between developers during collaboration when changes are made to the vulnerability information.
  • Scope constraints should be considered while making vulnerability changes in the application scope within the application.
  • Enough information should be gathered to identify the kind of changes to be made to the vulnerability information.

Goals

While working with the product team, 3 criterion were highlighted for success amongst others which include the the certainty that vulnerability information changes were made within scope, the appropriate feedback is applied and the feature is to be built on time.
Building within scope
Given the nature of the application, it was important to consider the context in which vulnerabilities information changes could be made and how it affects the scope in which it would be applied. The scope environment itself controls the depth in which the changes could be applied.
Displaying appropriate legible feedback:
After a custom change had been made, users want to know what changes has been to the vulnerability information and how to work with the changes that has been made.
Building within time constraints:
This project was a matter of urgency so coming up with the least time-intensive solution was paramount. I worked hand - in hand with the developer team to draw up a solution which could be built within the proposed time frame.
Initial Vulnerability Detail Page

Research & insights

Sonatype lifecyle enables developer teams build software applications faster while managing risks effectively. Users wished to make modifications to vulnerability information that in their lifecycle account account. This is because the vulnerability information is subject to change depending on it’s environment.
  • Competition like JFrog, Snyk and Black Duck were analyzed to find user interface patterns to successfully handle modification changes on vulnerabilites.
  • Surveys and workshops were carried out internally with Sonatype developers and DevOps which were also core users of the platform to understand pain points, user needs, patterns and contraints.
  • I worked within the constraints of Kaleido, Sonatype’s design system to create a scalable feature for the product.
Brain storming and Userflows

Creating a solution

This feature was requested by majority of our users, so it was important we built a comprehensive solution that satisfied these guiding principles:
Easy and Intuitive:
Since this was a popular feature being requested by our users it was important our users interact with the product as natural as possible without feeling the need to have extensive instructions or guidlines.
Simple and relatively quick to implement:
This was the first version of the feature. It was important we build a solution that is void of a lot of complexity that  could also be implemented within the time frame suggested.
Accessible:
It was important this design was accessible to our users, the choice of color and visual placement of the features being implemented was also as important as the feature itself.
Kaleido UI components

Feedback

Initial iteration gave the user the option to make edits directly to the vulnerability information they wished to change. This solution was easily accessible by a user which wished to make changes to the vulnerability information. After multiple feedback sessions from the users, I was able to identify potential issues with the solution including:
  • The assumption that the user would want to make all changes to all the vulnerability details at once.
  • The choice of design components used to filter out the selected categories wasn’t practical given the time constraint.
  • The current iteration doesn’t take in to account the unique user scenarios pertaining to each individual vulnerability detail
Initial Solution

Results & Outcome

After taking the feedback from both stakeholders, a new solution which would require the user to make the changes to the edits sequentially. This solution required multiple clicks to set up but it satisfied stakeholder concerns. The solution;
  • Enabled the user to make individual changes to a singular vulnerability detail without needing to alter the others.
  • Addressed unique scenarios pertaining to each individual detail.
  • Was practical given the time constraint.
Creating a custom remediation message
Vulnerability Details page showing the Custom Remediation Message after Edit
Changes highlighted on the Custom Vulnerability Detail Page

COnclusion

The designs were further reviewed and modified to satisfy accessibility standards. Throughout the development of this feature, my colleagues and leads helped me grow as a designer. I am grateful for the collaboration between the product and engineering team for helping me along the way and making it easier to ship this feature.
Previous : Dream PaymentsHome.
WorkAboutLet's Work