Inheriting a project, Iterative design
Problem Statement
Lack of flexibility and granular control
Imagine that you are a manager for a small firm that offers penetration testing for clients. As your penetration testers find issues, clients want a ticket opened in their Jira instance. This should be simple, but it isn't. You cannot map the fields, so the data comes in randomly, and there is no way to edit the status of the tickets based on the status of the finding.
Users & Audience
Adam the Admin
The targeted user, Adam the Admin, holds a key role within the organization with the necessary permissions to configure and manage integrations. Adam's primary goal is to swiftly and effortlessly set up integrations on behalf of his clients. He seeks a seamless and user-friendly process that allows him to efficiently deliver integration solutions to meet his clients' needs.
Roles & Responsibilities
Lead product designer
As the product designer, I helped my team revitalize the PlexTrac-Jira integration, transforming it from a rigid tool into a robust and adaptable solution. We aimed to empower administrators with greater control and ensure seamless integration aligned with their unique workflows.
Scope & Constraints
Map fields and select sync direction, Build within a quarter
Based on research and business objectives, the following project requirements surfaced.
Scope
Select which projects to include in the Jira integration
Map fields uniquely for each project and its ticket types
Map custom fields/statuses at the project level
Refresh fields when changes are made
Determine the direction of sync at the field level (bidirectional, one-way, or one-time)
Choose refresh frequency (or force a one-time sync)
Select issue types created from findings at the project level
Constraints
Adhere to brand guidelines and platform colors
Use components that exist in the company's design system
Ensure the design complies with accessibility standards
Engineers could code the design within three months
Iteration One
Multi-step modal
I inherited the initial iteration from another designer. In this version, the multi-step process was contained within a modal. Yet, to prevent UI clutter and given the complexity of the task, I decided to utilize a full-page drawer, seeking additional space.
Process
User interviews, analytics assessment, UX evaluation, iterations, hi-fi design hand-offs
Conducting user interviews proved crucial in addressing gaps and validating assumptions. Engaging with three distinct customers provided valuable insights:
Users expressed the necessity of mapping PlexTrac fields to customized Jira instances.
Users emphasized the importance of having more granular control over creating Jira issues from PlexTrac findings.
Pendo serves as a platform for product analytics and user feedback, aiding businesses in comprehending user behavior and facilitating data-driven decisions to improve the overall user experience. Analyzing Pendo data provided insights:
The usage of the Jira integration was minimal.
Only a small number of customers completed the entire integration process.
Among those who completed the process, the utilization of features was infrequent.
An evaluation of the current integration aimed to pinpoint usability challenges and identify sticking points in the user flow. The assessment revealed several issues:
The page did not indicate if a connection was established.
A large text block, potentially overlooked by users, appears out of context for the required action.
Iteration Two
Full-page drawer
In the second iteration, the full-page drawer and additional messaging were introduced. However, feedback indicated that the mapping UI could benefit from increased clarity and flexibility.
Outcomes & Lessons Learned
Exceeded target KPI
Outcomes
This project's key performance indicator (KPI) was to elevate the weekly count of accounts utilizing the Jira integration from 50 to 75. The redesign has surpassed this target, indicating increased adoption and satisfaction with the integration.
Lessons learned
While observing users within the application, I've noted some confusion with how I listed the project types. Because this was a new pattern, it would have been beneficial to test the usability of this design. In the future, I will do so for any new patterns I am introducing.
Iteration Three
Increased clarity and refined UI
The third and final iteration focused on bringing clarity to each step, refining the mapping interface, and refining the UI.The focus of the third and final iteration was to bring clarity to each step, refine the mapping interface, and improve the visual UI.
Final thoughts
The revitalized Jira integration is a leap forward in enhancing the user experience for PlexTrac customers. By recognizing the limitations of the old integration and prioritizing the need for flexibility and customization, the redesign empowers users to align their workflows seamlessly with PlexTrac's capabilities.
