Websockets and Socket.io
Postman is where the world builds its APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.
As the primary designer on the Multiprotocol team, I led the design of key features—WebSockets and Socket.io—expanding the product beyond HTTP and driving new user acquisition.
Timeline
2021
Role
Design Lead
What are APIs?
APIs (Application Programming Interfaces) are connectors that allow isolated systems to communicate and exchange data.
When designing APIs, two key personas are involved:
-
API Producer: Builds the interface and implements the logic to provide specific data or functionality.
-
API Consumer: Uses the interface to access and utilise the data or functionality.
For the context of WebSockets, the following problem statement was considered:
How might we enable API producers and consumers to easily test and debug WebSocket servers without writing additional code to verify server behaviour?
Understanding the Landscape
To uncover pain points for both API producers and consumers, it was essential to gain a deep understanding of WebSocket technology. This involved studying official documentation, benchmarking existing tools to identify patterns, and building a DIY WebSocket server to simulate and observe real user behaviour.
Benchmarking
Benchmarking
DIY Server
Gathering User Needs
To uncover pain points for both API producers and consumers, it was essential to gain a deep understanding of WebSocket technology. This involved studying official documentation, benchmarking existing tools to identify patterns, and building a DIY WebSocket server to simulate and observe real user behaviour.
What we learned?
From the research, the following user needs were identified:
Dummy UI Creation
Developers were required to build a dummy UI solely for testing implementation logic, adding unnecessary overhead.
Unwanted Logs
Existing tools were found to be unintuitive and cluttered with irrelevant logs, making it difficult to focus on core server behavior.
Manual Connection Logic
Custom connection logic had to be written for even basic testing, leading to wasted development time.
Disconnection Scenarios
Testing edge cases like disconnections, timeouts, and auto-disconnects.
Complex Debugging
Debugging had to be done manually through console logs, consuming significant time and effort.
Lack of Reusability
Message snippets could not be easily reused during debugging sessions, reducing efficiency.
User flow
Connection
-
Connect or disconnect from a WebSocket server.
-
Configure request parameters such as headers, authentication, and protocols.
Saving a Connection
-
Save configured connections for later reuse.
Message Authoring
-
Create and send multiple messages to the server.
-
Support various message payload types (e.g., JSON, plain text, binary)
Message Streaming
-
Receive and display real-time message streams from the server.
-
View messages in a chronological timeline.
-
Categorize messages (sent, received, errors)
-
Debug connection states, reconnections, and timeouts
-
Search and filter messages within the timeline.
-
Exclude specific message types using filters.
Message Preview
-
Inspect detailed message content.
-
Copy message payloads for reuse.
Design
Based on identified user needs, the final design addresses core pain points through a streamlined, accessible interface—complete with keyboard shortcuts for efficient workflows.
Connection
Message
Authoring
Message
Stream
Connection Components
Message Authoring Components
Message Stream Components
User Testing & Feedback
Feedback was gathered through internal user testing and external sources such as support forums. Key feature requests included:
-
Ability to name and save requests for reuse
-
Option to quicksave messages within a connection session
-
Support for predefined sets of messages to send quickly
Impact
Within three months post-release, the feature showed steady growth in new user acquisition and improved retention of repeat users, indicating strong adoption and continued usage.
.png)