|
|
|
|
Issue 11 \\ Anticipating
So much of what makes a good experience is what happens surrounding the experience. For instance, my local grocery store has tons of great products, but that's not enough. Someone had to figure out how to arrange those products, and then refine that arrangement through continued consideration. Then someone else had to look over that arrangement and set up a wayfinding system so folks could enter the store and find what they need. And that process probably took iteration, testing, and refinement.
Software development requires that kind of anticipation and consideration to create a good experience. In this issue, we look at some of the less apparent but highly important pieces to the MailChimp experience. First, UX Developer Federico Holgado walks us through his sketching and collaboration process, and provides some tips. Then, Knowledge Base Manager Sarah Brown explains how her team anticipates and develops answers to customer questions. We finish with some links of interest.
|
|
Sketching is the language designers use to communicate, in the same way that musicians use melody and engineers use code. If you ever see me walking around MailChimp HQ, you’d be hard pressed to find me without my sketchbook—and more recently, my iPad—in hand.
Over the past few years, I’ve learned a few tricks that have saved me countless hours of mucking around in Photoshop or wrestling with CSS to explore UX and UI ideas.
|
|
1. More sketching, less hand waving
I studied industrial design at school, and sketching is a big deal in those classes. Something that was drilled into our heads there was that if you have to use words or hand gestures to describe a feature, your rendering or physical model isn’t good enough. Same thing goes when talking about a UI feature—it’s much easier to bust out a quick sketch to show your team exactly what you’re thinking about. The best part is that because it’s easier for them to understand your thoughts, the quicker they can jump in and make edits or point out details.
|
|
2. Know the purpose of your sketches
Another thing that we learned very early is that there is a process of refinement with sketching. In the early stages, you will produce tens (or hundreds) of very quick sketches to explore forms and ideas. Once you start to clarify the direction that you want to take, you can start filling in more of the pieces. Many times, my sketches focus on big things and leave out the fine details. You’ll see squiggles for text and rectangles that represent buttons and images. The bottom line is that your sketches don’t have to be perfect or beautiful—they just need to get your idea across.
|
|
|
|
Early versions of the folders popover, filter popover, and campaign slat items shown here. Click for high-res image.
|
|
|
|
Some early sketches of our comments UI. Click through for high-res image.
|
|
|
|
Idea sketches for a re-imagined subscriber table that didn't make it into the redesign. Click through for high-res image.
|
|
3. Sharing is caring
I work very closely with our UI designers Tyrick and Caleb, and we’ve figured out a really quick process for producing beautiful comps in Photoshop for new features and ideas. We start by sitting down and talking through concepts. We’ll usually sketch as we talk, and generally get to a polished idea in 5-10 sketches. Once we have some sketches, I’ll photograph them with my iPhone and upload them to a shared Evernote notebook.
In Evernote, it’s easy to add a few notes and give my team access to view and discuss them. Tyrick can now move on to create a more detailed comp in Photoshop that incorporates all the ideas we talked about, and he has a nice blueprint to work from filled with notes and examples about the interactions to be designed.
|
|
Where to start
My notebook of choice is a Large Moleskin Journal with squared paper. This is the largest Moleskine notebook I could find, and the extra real estate helps tremendously when you’re working on more detailed sketches. The squared pages also keep things in proportion, since sketching software usually involves drawing boxes upon boxes of stuff. Using such a notebook will also help keep your sketches in one place, which makes it easier to refer to previous projects. I am constantly looking back at sketches from previous months, and loose sheets would make this impossible (I’m kind of a spaz).
My pen of choice is the Pilot Razor Point. It’s a felt-tip pen, which makes it less prone to drying. The line weight is thin enough to write in small letters, but still dark and consistent from stroke to stroke. I usually keep a box on hand, so there is never a shortage of pens floating around my desk.
If you want to get started sketching, you can't go wrong with this combination!
|
|
The future of sketching
Even though pen and paper will be tough to replace (at least for the next couple of years or so), it does have some limitations. Sharing your work via taking pictures of a sketch is a chore, and sketches often lose some of their original contrast and detail.
I recently started sketching on my iPad; even though I’ve tried a few times before to no avail, this time seems to be different. My current app of choice is Paper, which works great with an Adonit Jot Pro stylus. It’s also worth noting that I use a Retina iPad—not an iPad Mini—because I want to sketch over the largest possible area. The Adonit Jot Pro is the most accurate stylus that I’ve tried on the iPad—almost as accurate as a normal pen. With a little practice, I’m getting better everyday!
|
|
|
|
First sketching experiment on Paper for iOS.
|
|
|
The clear advantages of this setup are the fidelity of the sketches and the ease of sharing. When I sketch on paper, I use just a single pen and no color whatsoever, since I find it to be a hassle to keep up with so many different pens and markers. With Paper, adding color and different line weights to a sketch is really easy, and the results are beautiful. It is certainly a different aesthetic than a hand-drawn sketch, but the fine-line pen combined with watercolors for highlights make a killer combo. Also, the sketches maintain a low-fi feel to them, which tells people that they’re looking at ideas, not finished prototypes.
|
|
|
|
Quick sketch for the Picture-taking modal released for avatars in 8.6 done in Paper for iPad.
|
|
|
|
Super-secret feature flow sketch done in Paper for iPad. This was done in about 45 seconds.
|
|
Sharing sketches with Paper and adding them to Evernote has been a breeze, since I can just email a page into my Evernote notebook with relevant tags.
There are a few minor disadvantages with this setup. So far, I’ve found it to be a little bit slower than traditional paper sketching. Sometimes I trigger unwanted actions like turning the page or bringing up the iOS notification center. Also, the power to undo a line or stroke means that I end up being more nitpicky about getting things right.
Another disadvantage is palm sensitivity on the iPad. Currently, if you place your palm on the iPad’s screen while you sketch, the iPad will get confused and create unwanted lines on the screen. This means that in order to sketch, only the tip of the stylus can touch the screen—nothing else. It can be a bit awkward at first, and it gets easier with practice, but ideally the iPad should ignore your palm and only register input from the stylus. “Palm rejection†aims to fix that! Adonit has released a new Bluetooth stylus that is pressure-sensitive and has an SDK that apps can incorporate that includes palm rejection. The video reviews are promising; once Paper has committed to implementing the SDK, I’ll be on board.
My foray into iPad sketching with Paper is only a couple of weeks old, but I’m already loving it. I’ll still do a quick sketch here and there in my Moleskin, but unlimited pages, better looking sketches, and easy sharing has really won me over.
I love sketching, and love to find ways to do it better, faster, and with more expression. If you don’t already, I hope this article encourages you to sketch more when you’re designing software. If you have any sketching questions or gear suggestions, I’d love to hear them.
|
|
|
MailChimp is a pretty big app. It’s got loads of features that we try to make as simple to use as possible. When our customers need help using MailChimp, or are trying to learn some new tricks, we want our Knowledge Base to be the first and easiest place to get answers.
|
|
|
|
Welcome to the Knowledge Base
|
|
|
As part of the documentation team, my job is to provide articles and videos through our Knowledge Base to help folks best use MailChimp. The Knowledge Base is used by a wide range of MailChimp customers, so we strive to balance being accurate and complete with being engaging yet concise. We use a conversational tone, along with screenshots, to communicate effectively.
|
|
How do we know what to write?
Our awesome support chimps and amazing customers help us by requesting new articles, noting necessary updates to existing content, and passing us details about workflows. We love getting feedback like this! Our team spends a lot of time keeping up with the many app changes, but some slip through our fine-toothed combs. The feedback shared with us is what ensures that all current Knowledge Base articles are as effective and easy to understand as possible.
At MailChimp, we're told to be prepared to change fast. To accomplish this, the documentation team works closely with the Quality Assurance and Developer teams to keep up with new features and any updates or tweaks being made to the app. Staying in close contact with the teams developing these features allows us to have an article explaining how a feature works available as soon as it's live in the app.
|
|
|
|
A recently added Knowledge Base article about a new feature
|
|
Creating an Article
By walking through each process from start to finish from the perspective of our customers, we're able to structure articles that match the typical workflow through the application. This makes it easy for folks to follow along. As many of our processes involve several steps, we break each step down into manageable chunks and define each of them clearly. This way anyone can easily follow along from the very beginning or jump in at any point.
We know that everyone learns differently—while some people learn better through reading, others are more visual learners. This is where our videos and screenshots come into play. Videos provide visually-oriented customers with an overview of how a feature works, and quickly walk them through the steps. Screenshots are added as needed in the articles to give a clear idea of where to click in the app, what to open, and what to type. A good balance of video, images, and text creates a comprehensive and effective knowledge base.
Finally, one of the biggest challenges in creating an article is coming up with a title. We try to determine the questions that can be asked about a feature or process in order to create a title that matches what customers search for. A good title, along with relevant keywords, ensures the article is more likely to come up in a search and get you an answer faster.
|
|
Types of Articles
-
Tutorial: These are how-to articles as well as tips and tricks for technical processes.
-
Troubleshooting: Walk-through steps for fixing problems with specific features.
-
Reference: General information on MailChimp best practices, policies, and thresholds.
-
Humor: Easter eggs—these are totally ridiculous in tone and content.
|
|
|
|
Just one of the many easter eggs in our Knowledge Base
|
|
Where Are We Now?
With the release of New MailChimp, we combed through close to 900 articles in order to update and streamline the content to make it even easier to find and use the information. Excess articles were removed and similar articles were merged, putting all relevant information in one place. We're constantly updating, creating, and changing to make sure the Knowledge Base provides the best possible experience!
|
|
Ask Us Anything
We want this newsletter to be a dialogue. If you have any questions for our team about pattern libraries, design research, or even how Fabio, Tyrick, and Gregg loved Pacific Rim, 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.
|
|
|
|
|
|
|
