Who is Apollo?

Apollo GraphQL focuses on making application development easier, better, and more accessible. They build a set of tools and libraries for building and consuming GraphQL APIs. The product I worked on is called Studio, a web application that allows developers to manage and optimize their backend.

The Ask

Studio had three pages dedicated to metrics for users' graphs: Operations, Fields, and Clients. These pages were initially designed five years ago, in 2016, and hadn't been updated since. Over time, as more users with larger graphs came to the platform, Apollo began to receive feedback about slow loading times and insufficient metrics.

In 2022, I became the dedicated product designer on a newly formed team that was focused on improving and updating the way metrics and analytics were presented on Studio. One of the first tasks was to design a landing page, as an addition to the current Fields page, where users could see more information and data about their fields as the Fields page only included a list of fields with a short description and the number of requests they were receiving.

Getting Started

To get started I worked with the product manager and engineering manager to define user personas as well as discern what metrics should be represented on the landing page. We were also able to comb through customer feedback to gain a better understanding of user needs.

Wireframing

With the newly defined set of metrics, I started to explore various designs and architecture for how to best organize the metrics while also keeping in mind existing patterns across Studio. After establishing a layout throughout design reviews, I began to add more details and real data to further develop the designs.

Final Designs v.1

Upon completion of high fidelity designs, I created an interactive prototype and conducted 5 usability tests with existing customers. The reception was overwhelming positive with users excited for the new page to launch and also offering a few suggestions on possible additions to the page that were incorporated in later versions.

Adding More Views v.2

After the first version of the landing page was launched, the PM and I analyzed the feedback from testing to discern what to integrate into future designs. The first addition was incorporating multiple options to view requests, latency and errors, giving users a more robust view of their field usage.

Adding Client Version Breakdown v.3

The last addition to the landing page was a breakdown of usage by client version to provide users with a more granular analysis of field usage.

Checkout the prototype here!