A 5-week industry project with Postman to redefine the Postman experience with AI integration. Focused on enhancing API exploration, the journey involves crafting personalized recommendations and streamlining interactions.
UX
UI
AI
Team & Role
Team of 4 designers
Tools
Problem Statement
How can we optimize Postman's user experience with AI for personalized API recommendations and streamlined discovery?
Problem Statement
How can we optimize Postman's user experience with AI for personalized API recommendations and streamlined discovery?
The Design Process
User Research
Conducted User Interviews
Identified user needs and pain points.
Summarising findings into clear Jobs to be Done (JTBD) statements.
Ideation and Conceptualization
Brainstorming AI-driven features and interface concepts.
Developing concept sketches or wireframes indicating potential directions.
High-Fidelity Designs and User Testing
Creating high-fidelity designs for the proposed solution.
Conducting user testing to collect feedback on the designs.
Refining designs based on user feedback.
Prototyping
Developing high-fidelity prototypes for key user journeys.
Documentation and Presentation
Created a presentation showcasing research, design rationale, and the final solution.
Researched existing API exploration platforms
Analyzed user feedback on Postman documentation
Explored AI integration trends for enhanced user experiences
Engaged with developers and Postman users to gather insights
Understanding the Problem and the User
Conducted user interviews with developers of varying experience levels
Research Insights
Challenges in API Selection
Users, especially junior developers, face challenges in figuring out which API to use, often requiring collaboration with multiple team members
Dependency on Code Understanding
The user often needs to dig through code and rely on comments to understand the functionality of APIs, indicating a lack of structured documentation in their current working environment.
Importance of Structured Documentation
In a well-structured system or organization, having documentation about APIs is expected. Lack of such documentation can be a pain point for users.
Identifying User Jobs and Key Flows
To address user pain points and navigate through various journey stages, we leaned on a straightforward approach. We integrated user research, Jobs To Be Done (JTBD), journey mapping, and concept flows. This enabled us to grasp user needs comprehensively and make thoughtful design decisions.
We chose JTBD to understand how users achieve their goals and measure their success, ensuring our design decisions align with their objectives.
USER FLOW
We developed user flows after identifying user needs through JTBD and visualizing the user journey. These flows offer detailed representations of user interactions with our designs, mapping out specific user paths. They facilitate the validation and refinement of our concepts.
Key Solutions
Comprehensive API Documentation
Enabling users to easily explore and document all APIs within the code base, providing clear locations and concise summaries for each.
Effortless API Authentication
Implementing a streamlined and automated system for key management, ensuring seamless access to APIs without manual intervention.
Automatic Error Resolution
Offering instant insights and solutions for API issues, minimizing downtime and streamlining troubleshooting processes.
Dynamic Documentation
Implementing a smart documentation system that autonomously updates to reflect the latest changes, ensuring users have access to current information without relying on manual updates from the author.
High Fidelity Designs and Prototyping
Comprehensive API Documentation
To address the challenge of documenting APIs, our initial approach required users to leave their development environment and navigate to the standalone Postman application.
The initial approach involved a manual process where users downloaded a code file containing APIs and then uploaded it to the Postman application for analysis.
But after multiple iterations and valuable feedback from the Postman team, we pivoted to a more integrated approach, embedding Postman directly into the developer's workspace. Building on this concept, we developed a Postman AI plugin for popular code editors.
We propose a Postman plugin that can be made available in the code editor's marketplace, which automatically detects APIs within the user's codebase.
Effortless API Authentication
To improve the experience of authenticating APIs, we've implemented several key features
Key Features
Simple form format for key management
Instant authentication prompts upon endpoint entry
Automatic identification of authorization requirements
Automated variable name suggestions for ease of use
Benefits
Reduced risk of errors
Time-saving authentication process
Simplified API documentation management
Enhanced user experience
Simplified Key Management and Instant Authentication Prompts in Action
Automatic Error Resolution
To enhance the user experience of resolving API issues, we implemented an automatic error resolution feature. This feature requires users to install the Postman plugin, which enables a holistic analysis of API errors by examining both the API code and the Postman application’s API request.
If the user doesn't have the plugin installed, they will be prompted to do so.
When an API error occurs, an AI-powered call-to-action (CTA) appears, providing insights and suggestions for resolution. This feature lists errors with crucial information like location of the errors, allowing users to attempt to fix them themselves. Alternatively, users can choose the AI-powered automatic resolution option.
Dynamic Documentation
To improve the accessibility and accuracy of API documentation, we developed a dynamic documentation feature that ensures documentation is always up-to-date and doesn't rely solely on the author for updates. This was achieved by integrating the Postman plugin into the code base, allowing the AI to access code updates in real-time and reflect these changes in the documentation.
Here is how we solved for three key scenarios for document generation:
When the API already has an up-to-date document created by the author as seen in this video flow.
In cases where no document exists for the API, our AI-powered solution enables the generation of a smart document, demonstrated below.
If an author-generated document exists but is outdated and missing updates, the user is prompted to update the document, and the AI updates it in real-time, illustrated in this video flow.
Introducing Chatbot Experience
To further enhance the user experience, we integrated a chatbot within the Postman application. This chatbot leverages the key solutions we've implemented, providing users with a seamless and intuitive way to interact with APIs.
Chatbot in action
Here's how we tied up the key solutions in the chatbot:
Use Case Suggestions: Users can prompt the chatbot with a use case to receive a response suggesting the best API, along with documentation links.
Effortless API Authentication: Streamlined key management with automated authentication suggestions.
Comprehensive API Documentation: Access detailed API docs directly from the chatbot.
Automatic Error Resolution: Detects and suggests solutions for API issues.
Dynamic Documentation: Request and receive up-to-date API documentation.
Insights and Learnings
Integration over Standalone Solutions:
The decision to integrate Postman directly into the developer's code editor instead of using a standalone application reflects a commitment to simplicity and accessibility in design.
Strategic AI Integration:
Integrating AI should be strategic, focusing on areas where it adds clear value rather than using it for its own sake. It's essential to integrate AI into tools or products thoughtfully, ensuring it aligns with the overall strategy and enhances the user experience.
Iterative Design Driven by Feedback:
Iterative design based on feedback, particularly from the Postman design team, was crucial in refining solutions like the chatbot experience and dynamic documentation.
Feedback Highlights from Postman
"the concepts you showed are quite ahead of its time, its a good thing, you have imagined how the idea of an API client itself evolve."
"…really loved how you have positioned VS code in your design. it perfectly taps into how Postman itself imagines this, which is to be closer to user's workflow and also build workflows on top of the code base itself, rather than telling them 'get out of your working context and go use this another app' "
"it is interesting to see how deeply you understood the user's workflow"
"it is very cool to see how we can generate collections directly from the code and see that in Postman "