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
While Studio catered to developers, there were many users in managerial or administrative roles using the application. These users were less interested in the details of graph schema and usage but more so wanted an overview of how the organization was operating in Studio and general data regarding usage. The dashboard was created to address the needs of these users and provide them with a way to quickly gain insight into their organization and graph.
Data Visualization
This was my first project upon joining Apollo and the project definition, including the content of the dashboard, was already established. With the content already determined, I started by researching data visualization to determine how to best represent the data on the dashboard. I also started to ideate on the layout and organization of the dashboard and added details to the mocks as design decisions were finalized.
Final Designs
After iterating and getting feedback in design reviews, I began to work on the UI for the final designs. I made sure to incorporate color with purpose, from brand representation to alerting users of positive/negative metrics.
Changes During Development
During development, I had to make a couple of design changes to the plan information and checks sections. I saw that the organization of the plan information wasn’t maximizing the space on larger screens, creating a card that had too much whitespace. I decided to organize the information horizontally instead of vertically to utilize the space better for all screen sizes.
The graph used to represent checks was altered because I saw that most users’ graphs had a much larger proportion of checks passed than failed. This made the bars representing failed checks appear extremely small, in comparison, and almost unidentifiable. So, I modified the chart to have single bars to represent all checks and added a tooltip showing how many checks have passed or failed when a user hovers on a bar.
Testimonials
See other case studies
Let's work together!
Certe, inquam, pertinax non quo minus id, de voluptate velit esse. At magnum periculum adiit in quo inter argumentum conclusionemque rationis.
Contact Me