Opening New Revenue Streams With a Modern API Support Site

Team: Engineers, PM, Tech Writer Focus: Typography, Mobile & Responsive Design

Designing Developer Studio

Through a six month contract via Swoon, I designed Cirium’s Developer Studio, an API documentation and support website that unites all of Cirium’s API services under one umbrella with a clean layout, helpful articles, and a simplified subscription system. This project had a heavy focus on both typography and responsive design. I worked closely with both my engineering team and a technical writer to establish a clear visual style for articles.

Design Samples

User-Friendly Articles With Clean Typography

When I began working on Developer Studio, Cirium had created a few sample articles in their developer environment. Though complete, these articles understandably had formatting issues since there were no standards yet. Thus, my first task was to make some rules.

I produced a pair of “do and don’t” annotated mockups and shared them with stakeholders. The “do” rules were intended to guide the team towards consistency in applying good typography practice. The “don’t” rules were intended to break bad type habits.

Article “Do”s which provide typography guidance and encourage consistency.

Article “Don’t”s which identify common mistakes. I created this flawed mockup myself to avoid calling out any particular person’s work.

Supporting Mobile Users With Smart Responsive Systems

I aligned the team behind a responsive approach to Developer studio. Its article pages posed a unique challenge, as text blocks wider than about 700px are difficult to read. On a 1920px monitor, that’s a lot of dead space. I solved this problem by borrowing ideas from other API websites. It’s becoming more common for API articles to have code blocks showing examples of how to use a given API. These code blocks are a great way to fill space, appearing alongside article text when relevant to help explain ideas. I was able to leverage this idea to create a responsive system that used a 4-8-12 column layout to show appealing looking articles at any screen size, including mobile.

An article at 1920px. A code block can be seen with sample code on the right.

An article at 1280px. The code block has fallen inline with the article.

An article at 680px. Select to expand.

Persistent Fit and Finish for a Clean Final Product

To help clean up style and white-space inconsistencies, I performed a full fit and finish audit of the usage of these across the site, catching any variation and annotating it so that it could be changed.

An audit of spacing errors I catalogued in order to make them easy to find and fix.

An audit of styling errors I catalogued in order to make them easy to find and fix.

Final Mock-Ups

Web

An API help article with accompanying code block.

A sandbox tool I designed which allows users to test APIs.

The Developer Studio homepage.

The entry point for setting up an API subscription.

Mobile

Select to expand. A mobile plan comparison chart I designed for Developer Studio.

Select to expand. A mobile view of the API Explorer.

The push/pop navigation system I designed for Developer Studio.

The push/pop navigation system I designed for Developer Studio – one layer deep.

Back to Projects