Team: Engineers, PM, Tech Writer Focus: Typography, 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 consolidates all of Cirium’s scattered API services under one umbrella with a clean layout, helpful articles, and a simplified subscription system.
Cirium tracks vast amounts of aviation data, using it to provide insightful information to big players in the travel industry. Developer studio is its API documentation website where software engineers working for customers of Cirium can learn how to plug Cirium’s data directly into their own products.
API documentation websites typically contain long articles explaining to developers how to best use every API available. That meant that this project had a heavy focus on both typography and responsive article layout. Being the only designer on the project, I worked very closely with both an engineering team and a technical writer to establish a clear style for articles on the site.
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 had formatting issues because there was no single set of rules for everyone to follow when posting articles to the site. 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.
Both the tech writer and engineering team appreciated the clearly communicated guidance. Having these two images succinctly showing what needed to change gave everyone the same sheet of music to play from. The final site currently follows these principles.
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.
Persistent Fit and Finish for a Clean Final Product
To help clean up style and white-space inconsistencies, I performed a full audit of the usage of these in articles, catching any variation and annotating it so that it could be changed. My thinking in doing all of this was to make things as easy for my engineer colleagues as possible. By providing a clear and consistent set of rules, and calling out every instance of them being broken, it becomes a straightforward task for a developer to go one by one through each example and adjust per the rules. I always try to go the extra mile to keep things easy for my colleagues when possible!
An audit of styling errors I catalogued in order to make them easy to find and fix.
An audit of spacing errors I catalogued in order to make them easy to find and fix.
Supporting Mobile Users With Smart Responsive Systems
I was responsible for aligning 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 found inspiration to solve 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.
Summing Things Up
Developer Studio was a blast to work on. I’m proud to have had the chance to own the UX side of an app from start to finish and grateful to Cirium for giving me the opportunity. While this portfolio entry focuses on type and responsive design, I had a hand in designing most of Developer Studio. You’re invited to peruse some misc mocks from the project below, or check out one of my other projects.
