Developer Studio

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

Designing Developer Studio

During a six-month contract with Cirium (via Swoon), I designed Developer Studio – a unified API documentation and support hub that brings all of Cirium’s API services together under one roof. The redesign introduced a modern interface and streamlined subscription system, making it easier for developers to find what they need.

This project centered on two key areas: typography and responsive design. I collaborated closely with engineers and a technical writer to create a cohesive visual language for documentation that works seamlessly across devices.

Note: This is a design showcase highlighting my contributions to the site, rather than a full case study.

Design Samples

Designing Articles That Feel Good to Read

When I joined the Developer Studio project, Cirium had already drafted sample articles for their developer environment. While the content was solid, the formatting was inconsistent – understandable given the lack of established standards. My first priority was to create a clear foundation.

I developed a set of annotated “do and don’t” mockups to share with stakeholders. The “do” examples established best practices for typography and layout consistency. The “don’t” examples helped the team identify and avoid common formatting pitfalls that could undermine readability.

Article “Do”s which provide typography guidance.

Article “Don’t”s which identify typography pitfalls.

Supporting Mobile With a Responsive Layout

I championed a responsive approach for Developer Studio, with article pages presenting a particular design challenge: text blocks wider than 700px become difficult to read, which leaves significant empty space on larger monitors like 1920px displays.

I drew inspiration from modern API documentation sites, where code examples increasingly appear alongside explanatory text. This pattern improves comprehension by placing examples directly next to relevant content while also making good use of horizontal space.

I built a flexible 4-8-12 column grid system that adapts this pattern across all screen sizes. On desktop, code blocks sit beside article text. On mobile, they stack naturally below. The result: articles that are both readable and visually balanced at any viewport width.

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.

Polishing the Experience With a Design Audit

To ensure visual consistency across the site, I conducted a comprehensive design audit, documenting every spacing and style variation. I annotated each inconsistency with specific corrections, giving the development team clear direction to achieve a polished, unified final product.