First, what is an API gateway?

As the only designer then, I started with the core team's product requirements, discussions and architecture - the product, technical and design needs. Then secondary research and a competitor's analysis of Kong, MuleSoft, AWS, Apigee, Red Hat 3scale and WSO2.

• Authentication and security - is this user allowed?
• Rate limiting - how many requests per minute?
• Load balancing, request transformation, monitoring and analytics.

In one lineA smart receptionist for apps: it receives every API request, figures out the right service, adds security checks and controls, and sends back the right answer - quickly and safely.

What we designed for

Two persona groups: developers, and admins.

• An easy, smooth way to set, publish, manage and monitor APIs.
• Development friendly, with easy navigation and an understandable flow.
• A simplified deployment process, and a product that looks - and is - secure.
• Easy-to-understand information, and proper team management.

Tap to zoom

Key decisions, tested

Every version came out of user testing, A/B tests, moodboards and discussions.

• Guidance in the nav. The side nav shows the sub-steps of the process you're in, with a progress bar on top. Testing showed this made the process easy to understand - something most API gateways lack.
• Fewer popups. Ver. 1 hid adding APIs and members inside popups; it felt complex and congested. Ver. 2 moved them into a clear app → API flow.
• A real view page. In an A/B test with 11 participants, 8 chose the new API view page over a locked copy of the form.
• Invite fast. 7/10 preferred typing names and picking a role once for everyone they invite.
• Red only for caution. Destructive actions are secondary red buttons with a confirmation.

Tap to zoom

Everything an API team needs

• Create an app, then add APIs in four steps: basic details, configuration, authentication, routing.
• API pages with versioning, documentation (copy, run in Postman) and plugins.
• A dashboard of request, performance, security and usage metrics, with error tracking and filters.
• User management, profiles and roles.

Tap to zoom

Testing along the way

I tested the UI/UX from time to time, while the product team checked the technical side - including a benchmark where the gateway handled 40,000 requests per second.

A twist, and version 2

While building Nexus we launched a new version of the website, and Nexus had to match it - for connectivity, marketing and branding. With few users yet, and functionality staying exactly the same, only the UI changed. Another designer joined and we designed ver. 2 together.

• A darker, teal look matching the new brand.
• New features: API testing inside the app, and a visual workflow builder.

Tap to zoom

The result

• 16/20Less cognitive load publishing APIs
• 14/20Better observability, with clear metrics
• 17/20A consistent, predictable navigation
• 16/20A simpler API flow
• 60%Fewer support tickets in the journey

Also: better onboarding for developers, and higher developer satisfaction overall.

The final product