Senior Product Manager Principal Designer UX Designers Engineers Visual Designers
Context
Vax - API Testing Platform
A report generating tool that highlights security issues
Vax is an API Testing platform that helps developers identify potential security issues that needs to be fixed before deploying.
Developers spent longer hours resolving security issues in the report
Although Vax reports helped identify security issues, Developers were spending longer hours fixing issues due to potential bottlenecks in the user journey leading to reduced productivity and delays in business operations.
Problem statement
How might we reduce the amount of time spent by developers on fixing security violations before deploying an API
Discovery
Understanding the users
I started with talking with the stakeholders and comprehending the business requirements. Subsequently, I conducted semi-structured interviews with developers, manual evaluators, and product managers. The objective was to gain an understanding of the customer journey and to pinpoint potential bottlenecks responsible for causing process delays.
Major Finding
Developers were not reviewing customer information before before submitting a request for API testing. This resulted in increased security risks and contributed to a higher number of issues in the reports.
Why were developers not reviewing customer information?
Most developers had tightly packed sprints and pressure from the product manager to deliver on time. As a result, they ignored reviewing customer information and updating API documentation.
01
Need for reviewing customer information on an external platform
02
No clear messaging on the necessary steps in the process
03
Developers were not aware of security requirements
Reframing problem Statement
How might we support developers in reviewing customer information before submitting a API testing request
Ideation
Defining Feature and Constraints
Reducing handoffs between multiple systems
To minimize the number of hand offs between different systems for reviewing customer information and ensure quick availability of information on demand, I proposed the following features and constraints.
Features
01
Ability to review customer information on Vax
02
Help developers update incorrect customer information
03
Show Risk Assessment Score
04
Clear messaging to understand the workflow
Constraints
01
Flow must help developers to focus on the task
02
Prevent users from making unintended mistakes
03
Minimum number of steps to achieve the goal
04
Must be intuitive
Finding the right interaction design patterns for the use case
Designing for users mental model
Before starting the visual exploration, I took the time to exploring the common interaction patterns found in API tools that developers frequently rely on for their work. This helped me identify the right navigational flow and prioritize information.
High-level Sketches
Based on our research findings, user stories and constraints, I started fleshing out high level sketches that considered various factors such as business needs and technical feasibility of the existing implementation.
Prototyping the path to a cohesive solution
Showing customer information on Vax
Considering the above sketches as a reference, I started fleshing out high-fidelity wireframes.
The below exploration allowed developers to review customer information on each endpoint and the risk assessment score associated with the same. Developers were allowed to update customer information if there were any discrepancies.
NOW
BEFORE
Developers had to review customer information on an external site
Showing customer information on the same site
Usability Testing findings
Behavioral changes among developers to get lower risk scores
The ability to quickly review and update customer information on the same platform was well-received by the developers and stakeholders.
However, We observed a pattern among developers updating customer information to get lower risk assessment scores which further increased security issues and delays in the workflow.
newly discovered Challenge
Developers deliberately updated customer information to get lower risk assessment score
Hence, We had to get rid of Risk Score
We wanted to prevent developers from updating incorrect customer information instead. Hence, we removed the risk assessment score information before submitting a API testing request. This helped developers focus on verifying customer information rather than getting lower risk scores
Exploring opportunities to efficiently handle scalability
To efficiently use whitespace and handle pagination, I came up with 3 different explorations for two column accordions view
Two column accordions collapsed view
Horizontal full container width expanded view
Vertical card expanded view
Modal view
Crafting final designs
Based on the my findings from the above explorations, I crafted our final designs which enable users to efficiently review customer information while ensuring they avoid any unintended mistakes.
FINAL DESIGN
Outcome that I helped drive
01%
Reduced the number of handoffs between different systems
02
Reduced the amount of time spent to review customer information
03%
Increased user adoption rate for Vax
Learnings
Prioritizing user-informed design over user-driven design while designing internal tools
Focusing on end-to-end user journey can uncover opportunities for improvement and innovation
