Jan 7, 2015

Redesigning MailChimp’s App Navigation

When we redesigned MailChimp about a year and a half ago, we refined almost every component in the app, including navigation, typography, grids, and form elements. Focusing on these details allowed us to create reusable patterns that we compiled into a pattern library. And by doing that, we could then focus on refining larger features in the app like automation, segmentation, and template creation.

As our team started planning for 2015, though, we realized what most needed refining was the contents of the pattern library itself. So we began thinking about strengths and weaknesses of each component, how we could make the app better for our users, and what would allow for additional growth and flexibility. This week, we’re starting with MailChimp’s app navigation.

Navigation frustration

We realized early on that our navigation patterns needed the most attention. We added links to the vertical navigation, then found that some smaller devices needed a scroll bar for the nav plus an additional scroll bar for the content. This created a situation where the search link would be hidden—in some cases, hidden so well that users couldn’t find it.

We explored several solutions and realized we could mimic our marketing site’s nav. This presented several positive results: It created a consistent look between the marketing site and the app, and it positioned search and account information in a more predictable location. It allowed the navigation to remain in one location no matter the device instead of a vertical nav for large devices and a horizontal nav for small devices. And, by moving the nav to the top of the page and reducing the size, we opened up the page and placed more focus on the content of the page.

Character development

After moving the nav, we noticed the app was now missing some of its usual character. Freddie had gotten smaller, for instance, and the big, colorful blocks were gone. To account for this, we referenced the marketing site’s typography, allowing us another parallel between that site and the app. The new typeface, Open Sans, is lighter, friendlier, and more legible at a smaller scale, so we reduced its size and subtly gave back some of the page’s personality.

So fresh and so clean

The refinements we made may not sound like much, at least until you see them in action. So let’s take a look.

In the end, we turned this…

old

…into this:

new

The new navigation begins releasing today. By the end of the week, all of MailChimp’s users will be able to see it. If you’re not quite ready to make the leap, you can toggle between the new version and the old one until February 2. We think you’re gonna love this update and the flexibility it provides for future updates. It’s setting the stage for even bigger and better things to come.