Apollo GraphQL Explorer

Background

In March 2020 I joined Apollo GraphQL to help imagine, design, and build the next generation of tooling for API developers. My team at Apollo was focused on building a tool for testing GraphQL API queries against a live endpoint, similar to projects like GraphiQL and GraphQL Playground, but optimized for the experience of the Apollo platform.

Apollo has led the market in open source tools for GraphQL API developers for several years, as the apollo-client and apollo-server are ubiquitous across the GraphQL community. Apollo's SaaS product, Studio, started as a way to monitor GraphQL API servers in production and has been evolving into an API development and collaboration platform.

Goals

From a business perspective, Explorer was part of the effort to expand the product offering to include an experience relevant to users earlier in the journey (i.e. prior to getting a graph into production).

From a design and user experience perspective, the goal was to shape a tool and an experience that makes building GraphQL operations from a schema and accessing production data accessible enough that ultimately anyone in an organization could use the tool to access their production data, not just engineers.

Design process

The project's initial design direction was created by former designer Adam Torres, who had just left the organization prior to my joining. My work was to build on that direction and help guide the vision toward an initial launch.

The design I started working with was already very strong, but it needed some key updates as the product scope and vision began to emerge.

The initial direction was that Explorer would be a stand alone product experience (similar to GraphiQL and GraphQL Playground). The decision to incorporate Explorer into the Studio app experience to ensure platform consistency meant a rethinking of the layout paradigm. The layout also needed to further accommodate different resources for reference in building and running operations.

I approached the layout by focusing on the user journey for the core experience in Explorer: building and running operations, and viewing the responses. I started by translating the current layout into a feature map to identify how the UI was asking to users to think about the components. Then I re-mapped the experience into groupings that matched the user flow more sequentially.

From there I explored alternate UI paradigms in low fidelity via wireframes. I started with rough wireframe sketches using the Paper by FiftyThree app for iPad, then eventually moved into Sketch for higher fidelity wireframes.

I landed on the chosen direction with input from the team and leadership, prioritizing a solution that wouldn't affect the Studio global IA navigation work happening in parallel by my Apollo design partner, Zari Salimnejad.

I then focused on high fidelity design detail explorations for core experience components like the reference panel, run history, alert cards for error states, connectivity indicators, and other visual polish.

Studio did not have a dark mode, and the initial comps for Explorer were designed solely as a dark mode experience. So one of the other challenges faced with the decision to incorporate Explorer into the Studio experience was how to handle color.

The challenge was that dropping Explorer into Studio just with dark mode would appear visually inconsistent, and designing a dark mode for all of Studio to accommodate Explorer would be both expensive and way out of scope.

The other hurdle was that one of the constraints to work within the global navigation, which could not be modified for Explorer. That meant using the black tones from Explorer's initial comps would be visually inconsistent with the global navigation's blue-violet theme (a.k.a. "blilet"), resulting in a tacky color clash.

The solution was to re-skin Explorer with a light mode theme to match the Studio UI pattern by default, and include a modified dark mode as a setting just for Explorer. To do this, I created a new color system called "midnight" that was based on the darkest tones in the blilet family, and was optimized with a heavier-at-both-ends contrast ratio for the dark mode UI.

I worked with the engineering team to bring Explorer to life, jumping into the React codebase to do some pixel polishing in CSS while the rest of the team did the heavy lifting, and the initial launch shipped at the end of June, 2020. You can read the announcement post here.

Outcomes

The vision of creating value for developers using Studio to them earlier in their journey has continued as we shipped many follow up features to continue iterating, including small improvements like adding a traces view and table mode to the operation response experience, and larger steps forward like Apollo Sandbox, which allows people without a Studio account to try Explorer and other Studio features on a live endpoint without registering.

Over the past year and a half plus since its release, Apollo has seen Studio monthly active users increase more than 400%. This growth is not exclusively from Explorer, but Explorer was a huge first step forward in the evolution of Apollo Studio from being a graph monitoring tool for infrastructure maintainers to being a graph development tool for all developers working with an API across different stages of production and consumption.

Know that you know so much about Explorer, go try it out!

(Hint: you can use https://countries.trevorblades.com/ as the endpoint)