|
|
|
|
Issue 19 // Iteration
Try as we might, it's nearly impossible to arrive at the perfect solution to a problem in just one try. Because we're still mere mortals, we have to instead rely on iteration to inch ever closer to perfection.
Iteration is gospel at MailChimp. We lay down graphite and pixels quickly—evaluating, refining, then doing it again—each time arriving at a better solution. In this issue, designer Caleb Andrews lifts the curtain on his process, which was inspired by a set of Illustrator scripts for this week. Developer Jason Beaird explains how the UX team at MailChimp keeps app refinements in the workflow. We conclude with UX links from around the Web that captured our attention this week.
|
|
|
The UX Newsletter has a new home. Browse past issues at:
|
|
|
Making a latte is quite possibly the most intimidating part of my day. Nearly everyone at MailChimp is some sort of veteran barista with a knack for concocting sublime coffee drinks. Of course, everyone has to start somewhere, and "somewhere" is usually square one. See, the art of the perfect latte is like alchemy: part science, part practice, and part magic. But never underestimate iteration. Most of the time, if not all the time, practice makes (the) perfect (latte).
Hence this week's shape-focused header illustration: my strange vision of a latte-meets-alchemy circle. In this brief tutorial, I'm going to showcase some amazing Adobe Illustrator scripts from the master of vector manipulation, Hiroyuki Sato, as well as some other useful techniques. Download this brilliant freebie, run the scripts in Illustrator, and let's get started.
|
|
Step 0 - A Moody Artboard
|
|
|
Each issue, I come up with the header image for the UX newsletter. Typically, I begin my fast-paced process of making a header illustration by surrounding the artboard with images that have inspired me throughout the week. Dribbble, Tumblr, and Google are my best friends during this phase.
|
|
Step 1 - Run the Circumcircle script
|
|
|
Jumping right into this week's illustration, I began with a few common shapes seen in an "alchemy circle." With the triangle selected, I ran the Circumcircle script (File > Scripts > Circumcircle) which produced a perfect circle around the triangle. It’s nice to achieve this automatically, especially with less common shapes.
|
|
Step 2 - Make a Hexagon-shaped Guide
|
|
|
Next, I created a hexagon shape with the polygon tool and made it fit to our previously selected circle. Selecting the hexagon, I then made it into a guide (View > Guides > Make Guides).
|
|
Step 3 - Snap Lines to the Corner Points of the Hexagon
|
|
|
Using the pen tool, I created 3 lines: one going down the middle and two diagonal lines striking through the triangle. For this to work, smart guides (View > Smart Guides) needs to be enabled so the pen tool can snap to the corner points of the hexagon.
|
|
Step 4 - Make the Lines and Triangle into Guides
|
|
|
Selecting and bringing the triangle forward (SHIFT + CMND + ]), I blocked out the 3 hexagon-guided lines. Next, I selected the 3 lines and the triangle, and copied (CMD + C) and pasted them in front (CMD + F). This way, the copied lines are in the same place as the originals. Using the make guides tool (CMD + 5) on my copied lines and copied triangle, I now have a set of guides that will be of use in step 5.
|
|
Step 5 - Snap the Perfect Circles to the Designated Points
|
|
|
This part’s the best for folks who can never get their circles to perfectly center on select points. The key is to grab and move said circle by the center and—with Smart Guides still on—let them snap snuggly to the designated points.
|
|
Step 6 - Make a Clipping Mask
|
|
|
I've seen designers using the Pathfinder tool to divide objects, but masks are the less destructive way to go about hiding shapes. Selecting both the grouped circles—and making sure the larger circle is on top—I applied a mask (CMD + 7).
|
|
Step 7 - Running the Metaball Script
|
|
|
Now, let's check out a particularly awesome script, Metaball. For the latte art in the center of the illustration, I used the Metaball script to connect a set of circles with curves that would otherwise take much longer to manually create. Below, I've used three different shades of red on the right to depict what the Metaball script produces.
|
|
Step 8 - Applying the Circle Script and Using the Width Tool
|
|
Finally, I ran the Circle script to add 24 anchor points to give me a circle I could delete points where needed.
After deleting a few anchor points (which changes the aligned stroke from 'inside' to 'center') and applying rounded joints and caps, I used the width tool (SHIFT + W) to give some more weight to the bottom of my circle to achieve my final arc shape.
|
|
Hopefully this brief overview of Hiroyuki Sato's scripts was helpful, and inspires you to change up your workflow for the better—like it did for me. Oh, and no real magic was used during the making of this illustration. It was just a great exercise for scripts and grids. Or was it…?
For more of our illustrations and design-related efforts, check out our teams page on Dribbble. We're always happy to chat about our work over there.
|
|
|
By the way, we're looking for a talented UI designer to join the MailChimp UX team. Is this you?
|
|
|
Iteration and the Feature/Refinement Balance
by Jason Beaird
|
|
|
"It's a bug, and they need to fix it!" my wife exclaimed last week after a rebate check for an online purchase was sent to an old address for the second time. While I was also pretty peeved, I couldn't help but feel a bit of sympathy for the team that would need to troubleshoot the issue.
Perhaps I shouldn't. When a user encounters a bug or even a confusing aspect of your application that costs them time, it also increases load on your support team and erodes the user's trust in your product. Just like a leaky bucket, big bugs will drain trust quickly, and lots of small issues will kill it slowly over time. Once that trust is gone, it's gone.
We're not immune to this at MailChimp–no matter how hard we work to improve our app. And I'll be the first to admit that our bucket has its share of both big and small issues.
|
|
Find the Holes, Protect Your Bucket
|
|
|
Selecting and bringing my triangle forward (SHIFT + CMND + ]), I blocked out the 3 hexagon-guided lines. Next, I selected the 3 lines and copied (CMD + C) and pasted them in front (CMD + F). This way, the copied lines are in the exact same place as the originals. I did the same technique for the triangle. Using the Make Guides (CMD + 5) tool on my copied lines and copied triangle, I now have another set of guides that will be used for my circles with icons in the center.
|
|
When you work on something every day, it's very easy to overlook common shortcomings. This is why we rely heavily on interviews, surveys, analytics, and other research methods to reveal the weak spots in our app. Sometimes a seemingly innocuous oversight can have devastating consequences. Aarron Walter recently shared on A List Apart how we use account closing surveys to make decisions about feature additions, but they also help us find some of the biggest leaks in our trust bucket.
If you approach working on an application like playing a tower defense game, finding problems as users close accounts is definitely a last-ditch effort. We try to pay attention to every feedback channel our users might express opinions or frustrations from. Our Support team helps by tagging all of the chat and email correspondence to help us discover common problems. We also watch social outlets like Twitter, Facebook, and blog comments.
|
|
Collecting feedback from many channels is easy, but filtering and determining what to act on is tough. If we made changes based on every comment, tweet, email, chat, and fax (we don't really collect fax feedback), we'd have more tickets than our small team could address. Many companies just hire more people to address every bug. The problem is that many of the suggestions we get are contradictory or would help only a few people. That approach doesn't scale, and can actually introduce usability issues.
Instead, we focus on tagging, filtering and prioritizing the feedback we get. That image above would be me if I didn't have Gregg Bernstein and the rest of our Research team. Gregg keeps a pulse on a lot of the suggestions we receive and forwards the most repeated and interesting requests.
|
|
|
|
Some of filtered feedback in my inbox from Gregg.
|
|
|
If you were to look at the commit logs for a given 4 week release, a large number of the comments include words like fixed, tweaked, refined, adjusted and changed. This is where a lot of those suggestions are getting made and some bugs, typos or display issues that affect people's workflows get hot-patched in between release cycles as well.
|
|
Turn Weakness Into Strength
|
|
While a lot of our changes to the app are based on feedback and suggestions, we're always quietly working on secret new things as well. MailChimp gets a lot of attention when we introduce new, innovative features, so it's easy to focus on that instead of making minor refinements. Often times though, a new feature is simply rethinking a weaker part of the app that hasn't been updated in a while.
This is the kind of stuff that everyone—from UX research all the way to our awesome dev engineers—enjoys working on most. It's exciting to build new things, even if that new thing is just a reimagined incarnation of an existing feature.
|
|
Make Dedicated Refinement Time
|
|
Sometimes it's best to slow down, set aside ideas for new changes, and work solely on maintenance and refinement. Reducing the ticket queue isn't a sexy task, and minor refinements don't make for popular blog posts, but sometimes it's necessary. That was actually the motivation behind this article—we're just now wrapping up an entire release focused solely on cleanup and maintenance. We tend to do this at least once a year and the holidays are typically a good time for it.
During this release cycle, we've also been planning features for the next one and making big plans for the rest of 2014, but the code changes we made this time were all about fine-tuning the details.
|
|
|
When working on small bugs and refinement it's easy to get nearsighted, missing the big picture of how our changes affect the overall UX. Working on big, new features allows us to see that but we often miss small details, fail to predict how people will use them, or discover edge cases we didn't consider. The most important thing is that we keep doing both so that our bucket keeps getting bigger and better with as few leaks as possible.
|
|
Ask Us Anything
We want this newsletter to be a dialogue. If you have questions for our team about how we manage our inboxes, questions about our 2014 resolutions, or tips for helping Alvaro's baby sleep, 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.
|
|
|
|
|
|
|
