Postman - 2021
Introduction
Postman, a leading API development tool, embarked on a transformative journey to elevate the request capturing experience. The goal was to enhance usability, functionality, and overall user experience. This case study highlights the remarkable initiative undertaken by me as the design lead to improve the way developers capture network traffic and debug APIs.
Goal
- To improve the usability, functionality, and overall user experience of the tool.
- To cater to the requirements of users who utilize APIs for client-side applications, with a focus on enhancing the interface and addressing the shortcomings of the existing system
What is Postman Proxy and Interceptor ?
- Reverse engineering or importing documented APIs into Postman,
- Debugging APIs that are already implemented.
Approach
Analyzing the Existing Interface:
The first step in the redesign process was to evaluate the current interface of Postman and identify areas that required improvement. This analysis helped identify the shortcomings and areas of focus for the redesign.Competitor Analysis:
To gain a better understanding of the industry standards and identify areas where Postman fell short, a comprehensive analysis of other proxy and network capturing tools was conducted. This analysis provided valuable insights for the redesign process.Creating Wireframes and Mockups:
Wireframes and mockups were created to visualize the new interface design. This allowed for exploration of different concepts and ensured that the new design would meet the requirements and expectations of the end-users.Usability Testing and Iteration:
After the creation of wireframes and mockups, usability tests were conducted with a small group of users. This testing helped identify any issues with the new design and allowed for necessary changes and iterations to be made.Implementing the Design:
Once the final design was selected, collaboration with the development team was initiated to implement the new interface. This phase involved thorough testing to address any UI/UX issues and bugs that may arise during the implementation process.Monitoring and Refinement:
Following the launch of the redesigned interface, continuous monitoring of its performance was conducted. This allowed for refinements to be made as needed to optimize the user experience.
The existing request capturing experience in Postman presented several challenges. The process of capturing requests can be broken down into 3 steps.
Configuration
The configuration of both the proxy and interceptor take place in a modal. This has become overcrowded since we started adding more capabilities and filtering options. This further limits our ability to add more features. We also provide minimal filtering on the traffic that we capture as part of the proxy
Observation
Observation of proxy and interceptor activity happens either in a collection of history. The experience of analyzing incoming traffic becomes very limiting.
Retrospection
The traffic that is captured is not session bound, hence the user has no way of knowing which requests were captured for a particular debugging session. There is no way for the users to search through the traffic captured via proxy/ interceptor as the traffic gets mixed with traffic coming from other sources in History.
Assumptions
Users are currently using Interceptors more than Proxy because of the ease of setup
Users use Proxy & Interceptor to mostly debug APIs.
Users save requests to the collection to organise the requests and to collaborate.
Initial Explorations
After much exploration and Ideation, Our spec evolved into a more feature driven initiative..
Introducing Proxy and Interceptor Sessions with Advanced Filtering!
What is a session?
A session is the group of requests captured in a particular timeframe, which implies that a session is bound by a start and an end timestamp.
Why introduce sessions?
For a debugging use-case, the user defines when the session starts and stops. This will enable the user to do a deep analysis of the traffic in that timeframe.
Validation with Users:
The following features were introduced and validated with users:
Ability to bind requests to sessions.
On-demand saving of requests to collections after the session.
Overview of completed sessions, allowing users to revisit and analyze them.
Clear separation between request interception and capture within the Postman ecosystem.
Capturing and viewing of cookies within a session.
Participants
Ten individuals based in the United States participated in the study. They had experience using Interceptor, Proxy, or both in the past six months. The breakdown of participants was as follows:
Proxy: 2
Interceptor: 5
Both: 3
Procedure
Users were asked questions about their current Interceptor/Proxy usage
They then went through a Figma prototype of the Proxy redesign.
Research Conclusion
At the end of the research session, the users were asked how the prototype compares to their current experience
On the whole, users like the clean design of the prototype and it also felt more feature rich
Their only negative comment was that it felt like they could not edit the requests at the session overview section in the prototype, and they can do that today
User Feedback and Iteration:
Users asked for the following features
Ability to view response time for captured requests
Ability to examine requests in a new tab
View breakdowns of types of requests, and errors in the overview page
View requests associated cookies captured
View request and response body
Final design
1. Configuration
The entry point for capturing requests has been moved to the footer to provide a more contextual experience within the workspace. This eliminates the need for a modal and enables page-wise setup of proxy and Interceptor sessions.
Onboarding
A one-off onboarding pattern was implemented to ensure a smooth transition for users. The old entry point was retained alongside the new one, and clicking on the old entry point directed users to the new location. The old entry point was phased out once a sufficient number of users were onboarded to the new location.
Setup
2. Observation
The observation of captured requests and activities now takes place in an improved interface.
3. Retrospection
An overview of session metadata and retrospective actions is provided.
Overview
Retrospective actions
Users have the option to apply various filters to the captured requests as well as add these requests to a collection
They can also organize a session by removing requests which are not required for analysis
Users can also view cookies captured in the session and add these cookies to the Postman Cookie Jar.
Release and Performance
Following the release of the redesigned interface, key performance indicators (KPIs) were tracked to assess the impact of the redesign. Metrics such as increased user engagement, improved user satisfaction scores, and specific feedback from users who found the new interface beneficial were collected.
Upon release, the redesigned interface successfully created 28,000 sessions within one month, demonstrating positive user adoption and engagement.
Currently around 200,000 requests are getting added to Postman via Proxy and Interceptor.
Collaboration and Communication
A strong collaboration among the research, product, design, and development teams played a pivotal role in the successful execution of the redesign project. Regular and effective communication, coordination, and feedback loops were established to ensure a cohesive and aligned approach throughout the entire process.
In addition to our regular standup meetings and updates with the product and engineering managers, I initiated weekly catch-up sessions with the engineers. These sessions provided a valuable opportunity for open and honest discussions, fostering a comfortable and collaborative environment. It allowed us to address any implementation challenges and ensure a shared understanding of the project's progress
Future Considerations
While the redesign has significantly improved the request capturing experience in Postman, there are potential areas for future enhancements. These include:
Incorporating the Interceptor extension with Firefox:
Currently, the Interceptor extension is available for Chrome, but expanding its compatibility to Firefox would provide a more inclusive experience for users. By incorporating the Interceptor extension with Firefox, we can cater to a broader user base and ensure consistency across different web browsers.Removing the existing friction in setting up Proxy and Interceptor:
Despite the improvements made in the redesign, there are still areas where users encounter difficulties in setting up the Proxy and Interceptor features. It is crucial to identify and address these friction points to streamline the setup process and make it more intuitive for users. By reducing the complexity and simplifying the setup steps, we can improve the adoption and usability of these features.Launching the new Interceptor browser extension:
The Interceptor Extension's user interface hasn't been updated for the past three years, and it no longer aligns with the current design language and standards of Postman. Redesigning the UI of the extension is necessary to ensure visual consistency and provide users with a seamless experience across all Postman entities. By incorporating the latest design system and guidelines, we can create a cohesive and modern UI that enhances usability and reflects the overall brand identity of Postman.
Conclusion
The redesign of the request capturing experience in Postman aimed to enhance usability, functionality, and overall user experience. By thoroughly analyzing the existing interface, conducting usability tests, and implementing user feedback, Postman successfully introduced Proxy and Interceptor Sessions with Advanced Filtering. The iterative process of design, development, and refinement resulted in a significant improvement, providing users with a better tool for debugging APIs and capturing network traffic. The positive user adoption and engagement following the release validate the effectiveness of the redesign effort.