|
|
|
|
|
In November of 2012, I was asked to imagine MailChimp as a responsive application. Since so few applications as big as MailChimp are responsive my sources of inspiration were somewhat limited.
I packed the few items on my desk and moved from our UX office to a room with our DesignLab, marketing team, and a few dry-erase boards. Here, Creative Director Ron Lewis asked me to begin by researching, exploring, and designing with no limitations.
I was scared, nervous, and excited. This was my first responsive project, MailChimp is a large application, and I was the only UI designer on the team. How was I going to tackle this?
First, I needed to do some research. I started by re-reading Ethan Marcotte's Responsive Web Design, browsing Brad Frost's collection of responsive design patterns, researching responsive grids, and looking at several examples of responsive sites. I also posted design inspiration to walls in the office, covering them with examples of illustration styles, typography, responsive patterns, etc.
After doing some research, I realized that it would be easier to begin the design process by redesigning the MailChimp pattern library—a system of components, rules, and interactions that are used to build and design the application. This would allow our team to easily reuse and combine pieces throughout the app rather than design one page at a time. With this in mind, I designed several variations of buttons, fields, feedback messages, and tables. As I created these elements, I posted them to walls around which small discussions would develop, leading to more experimentation and conversations. This type of communication helped as I evolved these basic elements—like buttons and fields—into more complex patterns, such as forms, and started to develop an overall style for the application.
|
|
|
|
Variations of basic components in the pattern library.
|
|
|
|
Typography samples.
|
|
|
When we all agreed on a small set of patterns, I started designing the navigation, which would give our team the framework for the app. The goal was to make the navigation flexible enough to work on all devices, support some version of co-branding, and make search a primary action so our users’ data is always within their reach. After trying several variations of horizontal navigation, I realized it didn’t scale well across devices. I eventually tried a vertical navigation which worked well for every display size because the simple column of navigation on large screens could easily hide in a menu on smaller displays. After realizing this I tried several more variations, the team agreed on a direction, and the navigation was passed to the developers so we could see a working prototype.
|
|
|
|
Examples of horizontal navigation from early in the redesign process.
|
|
|
|
Explorations of design treatments for vertical navigation.
|
|
|
At this point I started experimenting with different ways to display content in MailChimp. After working on the pattern library I was thinking about grids and modules that could be reshaped for different screen sizes. My first idea was to create a grid view and a list view for the dashboard pages. The grid view would give new users a beautiful visual experience while the list view would provide power users with a simple and efficient table of information.
|
|
|
|
An example of grid and list view on the campaign dashboard.
|
|
|
|
Samples of tiles for the grid view on the campaign, lists, and reports dashboards.
|
|
|
I experimented with tile treatments for the grid view for weeks while other members of the team were building prototypes of the pattern library. We wanted lists to feel more human, but that particular direction required subscriber avatars which we weren’t prepared to add to the app. We also wanted to display the campaigns that our customers create but that really requires each individual campaign to look different from the next, which isn't always the case. In the list view, responsive tables weren't attractive and didn't scale well for smaller screens.
|
|
|
After weeks of experimentation and discussions, we decided to change course and try a new approach. I discussed the previous designs with our UX Developer, Federico, and we agreed on a few points; we liked the idea of an efficient table, and agreed that the content should be sortable, scannable, and have the ability to grow vertically and horizontally. After realizing this it was clear that we needed a list styled as a table, or slats. We quickly developed these ideas from sketches to designs to prototypes.
|
|
|
|
Sketches produced by UX Developer Federico during a quick conversation.
|
|
|
|
Post-sketch designs were passed to other members of the team for prototyping.
|
|
|
While the prototypes of the lists, reports, campaigns, and autoresponders pages were being developed I moved on to design some interior pages. After designing the pattern library, this was much easier than I expected: most of the heavy lifting was done and I only had to design small pieces of a few pages.
We went through countless iterations to get to the final design of New MailChimp. We quickly abandoned ideas that looked great but ultimately didn't serve our users' needs. It’s sometimes hard to let go of ideas you’re invested in and move in a new direction, but that’s just part of the creative process. Big, collaborative projects like this will certainly teach you humility!
Redesigning MailChimp was an invaluable learning experience that forced us to examine our design process and how it could be improved. We learned how to more effectively collaborate with other teams, and think about the user experience holistically. New MailChimp is now live, but there’s still work to be done. That’s part of what we love about working on apps—there’s always room for improvement.
P.S. To give you a more detailed look at our process, here are wireframes from some different design ideas that we explored: |
|
|
Our recent redesign of MailChimp, if you haven't heard, was huge. The spirit of the app remained, but we overhauled the UI to empower you to design and send email faster than ever. With this colossal change came a need for an icon set that was all our own—one that could anchor our app and be both informative and fun. Thus, Freddicons was born.
Let me establish something: I'm new at this. Not at design, thankfully, but at creating an icon font that cohesively works for a web app, mobile app, and marketing site as robust as MailChimp. I thought I'd walk you through our process, as it was a new experience for us.
How It's Made: Icon Edition
Our Creative Director, Ron Lewis, and I began plotting icons in Sketch with detours in Illustrator. We chased weird ideas, found successful ones, and arrived at an icon set that fits our new style. Check out a shot of some Freddicons below.
|
|
|
When exporting Freddicons, I discovered that SVGs (Scalable Vector Graphics) are an icon designer's best friend. This file format is the raster-free featherweight that's both infinitely scalable and familiar to Illustrator/Sketch enthusiasts.
Next, we used IcoMoon to take our SVGs and convert them into infinitely scalable fonts. Bonus: if you're not skilled in the art of making a heart icon or whatnot, IcoMoon offers 450 handcrafted icons for free. Heart icon included, of course.
So we're done, right? Not quite. The job's not complete until we've seen our icons in action. Size, color, and purpose need to be consistent across your brand. Google's Christopher Bettig put together a visual assets guideline that brilliantly tackles maintaining icon coherence. Model your own guideline to help developers and designers understand exactly how your icons do (and don't) work. Even if you're the only one managing your icons or illustrations, a rulebook for said assets is helpful when creating a strong brand.
Done, But Never Really Finished
I see a certain mantra every time I turn a corner at MailChimp: Listen hard, change fast. To me, that means we're never really finished here. Ron Lewis, our new art director Marco Suarez, and myself are already scheming up changes to Freddicons. That idea of listening hard and changing fast keeps us nimble as we explore new and better ways to communicate through design.
|
|
Ask Us Anything
We want this newsletter to be a dialogue. If you have any questions for our team about CSS preprocessors, recommended books, design workflows, device testing, icon fonts, our favorite Atlanta eats, or even Alvaro's Jiu Jitsu skills, send them in. Seriously: hit reply and ask us anything. We'll try to answer every email and maybe even share our conversation in future newsletters.
|
|
|
|
|
|
|
