TIMELINE

1 Day in 2024

ROLE

Designer

Current Version of Exa API Playground

PURPOSE

Design Challenge

INTRODUCTION

Developer Experience for Exa

Exa API Playground is a critical entry point for users to explore the capabilities of the Search API, evaluate its relevance for their business needs, and understand how to integrate it seamlessly into their existing systems. 

We anticipate three primary user personas engaging with the platform:

  1. Product Manager
    Typically from a tech company looking to add search functionality to their product. This user needs a clear understanding of the API’s core features, benefits, and ease of integration.

  2. Executive
    Also from a tech company, this user is evaluating the API at a strategic level. They’re less focused on implementation details and more interested in the business value, scalability, and potential impact.

  3. Developer
    This user is responsible for implementing the API. They need detailed technical documentation, examples, and access to all parameters and edge cases

Updated Design Version 1

INTRODUCTION

Problem Statement

GTM feedback highlights two friction points in the current API Playground experience:

INTRODUCTION

Design Goal

The updated API Playground experience aims to address current usability issues and better meet the needs of our key user personas. Our primary objectives are:

Reduce Visual Clutter


Streamline the interface to create a cleaner, more focused experience. This will help users—especially first-time visitors—quickly grasp the API’s core capabilities and benefits without being overwhelmed.

Improve Discoverability & Flow


 Make it easy for users to find relevant parameters and understand what each one does. Clearly communicate how the API works, including the full range of possible parameter combinations and their effects.

RESEARCH

Developer’s current process

A developer’s current process to evaluate an API does not map well to Exa’s current setup on the app.

RESEARCH

Issues with Current UI

The current structure (UX architecture) of the API playground does not align with how users evaluate and interact with the product. The hierarchy and placement of core elements are disjointed from the natural user flow. Key components include:

  1. Query Input

  2. Parameters

  3. Response Output + JSON

  4. API Code Snippet

  1. Detachment of Query and Response: Users initiate a query (often in the top-left), but the response appears inconsistently and detached from the query—sometimes in the bottom-right, other times below the parameters.

  2. Initial Evaluation Flow: All personas—especially non-technical ones like execs—start by running a query to see the API in action. Many stop here and pass evaluation responsibilities to developers. Developers then dive deeper into code.

  3. Code Visibility Timing: Surfacing code snippets after a user understands what the API does creates a cleaner, more focused experience.

The current layout fragments the user journey, particularly at the evaluation stage. To improve usability, we need to restructure the UI hierarchy to mirror how different personas explore the product—starting with clarity on API functionality, then gradually exposing complexity as needed.

RESEARCH

Competitive Analysis

What features do competitors have that Exa can learn from?

PROTOTYPE

Design Changes

The information architecture of Exa was updated to match the natural developer flow when evaluating the product.