Overview

Designing an end-to-end developer experience for building, testing, and deploying APIs faster.

Goal:

Create an API Sandbox platform that allows API developers to import API definitions, configure business logic, validate requests/responses,

and deploy sandbox environments — all with minimal coding effort.

Problem Space

Context:

API developers need to rapidly build, test, and validate microservices before production deployment. Existing tools like Postman or WSO2 solve individual pieces, but no single platform combines UI-driven configuration, fake data generation, and proxy/service code generation in one flow.

Challenges:

Developers were switching between 4–5 different tools to achieve one end-to-end workflow.

There was no simple UI to configure validation rules and business logic without deep backend knowledge.

Managing test data and deployment required manual effort and scripting.

Opportunity:

Design a unified API Sandbox platform to streamline this workflow, reducing context switching, human error, and time to deploy.

Research & Insights

Competitive Analysis: Reviewed platforms like Postman, Moesif, and Mockaroo to identify feature gaps.

Stakeholder Workshops: Learned that non-UI-based workflows frustrated junior developers. Senior developers wanted automation over UI wizards.

Architecture Review: Understood technical stack — Spring Boot microservices + Kong API Gateway + Git integrations — to ensure the UX aligned with backend capabilities.

Key insight:

“Developers don’t want another Postman clone. They need an opinionated platform that guides them, but still feels flexible.”

Design Goals

1. Single unified flow — from Swagger import to deployment.

2. Rule configuration made visual — no need to manually edit YAML.

3. Validation + fake data generation — for both request and response.

4. Business logic formula builder — to allow custom transformations without code.

5. Seamless GitOps workflow — automatic code generation + check-in.

UX Process

Information Architecture

Global Navigation: Users • Projects • APIs • Activity • Help

Dashboard Layout: Similar to NoCodeAPI → Cards for APIs, Tabs for Logs, One-click Access to Configs

Interaction Flow (NoCodeAPI-style)

Login to Dashboard → See all APIs as visual cards.

Import Swagger → Drag-drop, auto-parse schema.

Configure Business Logic → Formula builder UI (drag/drop rules).

Request/Response Validation → Tabular form like NoCodeAPI tables.

Generate Proxy/Service Code → Git commit + auto-build.

Deploy Sandbox + Monitor Logs → Human-readable logs like NoCodeAPI log pages.

Information Architecture

Low fidelity wireframes

High fidelity wireframes

Outcome & Impact

1. Reduced API sandbox setup time by ~60%.

2. Minimized errors during deployment by providing guided validation.

3. Developers loved the visual formula builder because it removed repetitive coding for business rules.

4. UI-first approach boosted adoption among junior developers.

5. Developers said it “feels like NoCodeAPI but lets us control every detail under the hood.”

6. Positioned as a single platform vs. patchwork of tools.

Key Learnings

1. Developers hate hand-holding but love saving time. Balance between automation and flexibility was critical.

2. Having clear technical constraints upfront prevented rework later.

3. Even for technical products, UI clarity drives adoption.

4. Technical products benefit from consumer-grade UI.

5. Logs and instant feedback loops increase developer trust.

6. Reference competitors not just for features but also for UX tone.