Background

Mailchimp is a loved and trusted small business brand for email marketers — but not for developers.

Mailchimp offered developers two APIs that lived on different websites, had different types of documentation associated with them, looked and felt like they were from different planets.

Challenge #1: Mailchimp had multiple programmatic products for developers, but their developer content was:

• Stale and outdated
• Splintered across multiple websites
• Difficult to find

As a result, Mailchimp’s email solutions were losing ground to competitors, especially among developers.

Challenge #2: Mailchimp had never had a company-wide focus on understanding and communicating with developers.

Developers represented significant revenue potential and high retention rates.

Objectives

A fresh new dark-mode-inspired look and feel & Rebranded APIs that live side-by-side in a unified experience

From initial research and discussions, a key insight guided the rest of the effort: Developers don’t want to be marketed to. They’re smart, busy professionals on a deadline who want the info they need, no more and no less, to help them build working software. This premise guided every visual and user experience choice as well as the Mailchimp Developer content strategy.

Establishing a single place by developers, for developers

Mailchimp Developer had to be a place that was welcoming, familiar, and it had to speak to developers in their language. This included an array of various tools such as interactive code snippets in most-used languages from PHP to Node.js to Ruby, Python, and cURL, API References, Guides.

• New client libraries in multiple programming languages for both APIs, distributed via package managers everywhere
• Refreshed step-by-step Guides that walk developers through how to accomplish specific tasks with each API
• An all-new Release Notes area and Engineering Blog

A mobile experience optimized for developers looking up answers or troubleshooting on the go

On mobile, developers tend to troubleshoot or browse for answers when they’re on the go. For example, one of the features is a developer-specific search function that makes it easy for developers to find what they need.

Impact

With agency work, we are often face limitations with gathering direct impact and results from clients. To define the success of this initiative, I would have tracked:

• the number of decreased or resolved technical help tickets
• the number/rate of conversion to Mailchimp from competing platforms

This work gave developers a seat and visibility at their own organization with Mailchimp adopting my developer user persona, which is a tremendous win. The collaboration and partnership nurtured with the client also lead to the next 2 phases of work when Mailchimp acquired Reaction Commerce and is now Mailchimp Open Commerce.

How I Did It

>> Delirious Discovery: Who are “developers?”

So began a rigorous research process rooted in understanding the developer

Brands treat their developer experience as a sub-brand of the overall brand.

A separate brand style from the main experience is common. Main sites are geared towards marketing while developer experiences are for reference. Developer experiences maintain their own navigation and search to narrow the focus on the deep well of information.

The Use Case is Non-Linear

/developer users come to accomplish different tasks. They often come in, get what they need, and get back to work. Our experience makes navigation and search ubiquitous because there are many entry points taking users directly into detail pages rather than through the homepage. As much as possible, all APIs are shown together to maximize visibility.

Developer Documentation: The Good and the Bad

In the survey and in user interviews, we asked developers what makes documentation good and what makes it bad. The following is what we heard.

Developers are our primary users and audience

The experience caters to their unique needs, making it easy to learn about the capabilities of the APIs and facilitate their collaboration with marketers.

>> Defining the Fog of Ambiguity

\\ Design Through the Dark

A fresh new dark-mode-inspired look and feel & Rebranded APIs that live side-by-side in a unified experience

Midnight Mode Freddie

The visual experience of /developer is inspired by developers’ preferred working mode: dark mode. It feels focused, quiet, and mission-oriented. Building upon existing Mailchimp design guidelines, the visual language of /developer blends in with Mailchimp sub-brand experiences seamlessly.

A few explorations that did not make the cut but were fondly remembered:

Concept #2: Code As Legos & Building Blocs

Concept #3: Manuals of the Past

Typography geared towards developers

Similar to Mailchimp’s dotcom experience, Cooper Light is used primarily for headlines and Graphik for body copy and supporting copy like eyebrows.

Courier is used for code related content.

A Midnight-Focused Palette

Core colors used in /developer are selected from Mailchimp’s official color palette. Charred Kale was created to give the experience that dark immersive night-time feel. The color was created by multiplying Kale three times.

Inspired by neon lights in dark night, these colors add visual flair to the experience. That said, accent colors are used judiciously to call attention to important information like CTA’s.

Call-to-Actions

Most CTAs in this experience are text links. Primary links with Apricot as the default color will change to Dragonfruit as the hover state. And secondary links with Parsnip as the default color will change to Apricot.

10% Parsnip is used to highlight section backgrounds on hover, this can be seen in the API Reference page, sub-navigation, and search.

Accessibility within a darker color palette

Mailchimp Developer adopts a uniquely darker color palette compared to the main dotcom’s lighter color palette, which can provide legibility and contrast challenges for users. For this dark themed experience, accessibility is a vital consideration and ensures that the content is comfortably legible. Mailchimp Developer’s dark experience is designed to pass AA accessibility guidelines for color contrast, type size legibility, and hover/focused states for keyboard navigation.

Friction-less Navigation

Most users are here in search of a solution to a problem. The navigation was designed to reduce friction in that workflow by providing easy access to all sections and to search throughout the experience. These elements serve /developer exclusively and work independently from the main dotcom experience. These elements serve /developer exclusively and work independently from the main dotcom experience.

Focused Sub-Navigation

Sub-navigations in the experience help with way-finding once the user is within Guides, API Reference, and Documentation. It is by design to show all of Mailchimp’s programmatic products to give more visibility to whichever product the user is not familiar with yet. In the mobile experience, the sub-navigation appears on the product landing pages and helps the user navigate through sections.

Developer-Specific Search

When the user selects search, it automatically opens a drawer with suggested content. In search results, Input is used to denote code- related content, like content in API reference, while Cooper Light is used to denote Guides and other non-code-related content. To maximize the use of space, results on desktop are shown with breadcrumbs and descriptions while results on mobile prioritizes breadcrumbs over descriptions.

Interactive Code Snippets

Code examples are essential to a developer’s work. /developer code blocks allow users to select their desired coding language and to quickly copy all code to their clipboard. There’s very little need for copying a block of code while on mobile, therefore, there’s no ability to one-click copy the code. Color is used to show syntax.

A System-Generated Binary Pattern

Concepts covered in guides are generally abstract, making it difficult to represent with specific UI or images. A system of patterns is used to add visual interest. Each guide features a unique pattern from a word or two describing the subject at hand. This example reads: Organize Tags For Phase 2, the new binary patterns illustrations include more textures and organic shapes that feels more cohesive with the Mailchimp brand.

>> The Dance with Engineering

Before developer handoff, it’s critical that conversations are held with engineers around feasibility and around edge cases.

Engineers were brought on early into the conversation before I began the design process. We discussed overall desired experiences and established feasibility, timelines, and deadlines. Having these conversations early on helped us as a team managed our and the client’s expectations on deliverables.

After designs were finalized, engineers and I continued our conversation to iterate components.

As we were implementing, we realized there were several components that needed to be evaluated again such as revisiting the navigation on mobile and improving accessibility for keyboard navigation.

Every two weeks, we showed and builds and demos in progress.

We regularly performed QA together to ensure we were all on the same page on expected outcomes and interactions. As we were working remote at the time, we used Slack to communicate asynchronously, used Meets to walk through complex flows, and created prototypes to demonstrate desired interactions.

With every progress, we celebrated our wins.

This was a massive project that required the hands and minds of many contributors. By recognizing every member’s efforts, we created momentum and motivation to finish strong. We did so by publicly writing “applauses” that called out each member’s efforts to the general channel and giving credit where it’s due during client meetings.