Issue 13 \\ Walkthroughs

Issue 13 \\ Walkthroughs

User Experience requires relentless curiosity. We strive to know all we can about problems, solutions, contexts, methodologies, and more. Sometimes we have to pretend to forget all we know to tackle a problem with fresh eyes and an open mind, and other times we step up to the challenge of embracing an entirely new and advanced way of working.

In this issue, Art Director Marco Suarez explains how we came up with a walkthrough for our new MailChimp Editor for iPad, and how he had to consider the concepts at hand, the instructions he needed to relay, and the context in which our customers would use such a product. Designer Caleb Andrews then recounts his tale of bravely walking into the world of developing in Xcode. We conclude with some links of interests from the world of UX.
Editing: Gregg Bernstein
Photography: Jason Travis
Hey, did you miss our last issue?
Forward to Friend

A Walk Through Our Walkthrough

by Marco Suarez
MailChimp's iPad Editor is unique, in that we built an app solely around a segment of the MailChimp experience—creating and editing campaigns. We needed to set the right expectations from the onset, which meant the walkthrough was pretty important. A walkthrough is the initial experience that follows downloading and opening an app. Walkthroughs are either conceptual or instructional—conceptual walkthroughs explain the value proposition of an app, while instructional walkthroughs provide a quick tutorial of concepts and interactions. We wanted to avoid someone opening the app and expecting to find their sent campaign reports, which this app doesn't have. We also created some new interactions that we needed to introduce to users. Our walkthrough needed to be both conceptual and instructional.

The app has three components—collaborating, editing, and sending. We broke the walkthrough into three screens to reflect these different parts. Our early iterations centered around embedding video for each part of the walkthrough. This nailed the instructional part, but we were missing the conceptual piece. The Editor isn't intended to replace your desktop computer; the purpose is to extend it, to allow you to capture time that was once lost—time spent sitting on the subway, in a meeting, or on an airplane. We decided to illustrate different environments where we thought the Editor would be most useful.

This early version featured a video, an illustration, a headline, and body copy—all within a small viewport. There was too much happening. Rethinking, we realized we didn't need a video on every screen.

For our opening screen, MailChimp designer Justin Pervorse illustrated the tools associated with creating and editing a campaign.

Collaboration in our app consists of several concepts: commenting, auto-updates, and merge conflicts. I created a more abstract illustration to communicate this connectedness.

The interactions we were introducing in this app—tap and drag, and the delete/duplicate wells on each side of the screen—were addressed on the edit screen with video.

Finally, I modified a Saturn rocket illustration Justin made to support the Send screen. Who doesn't love rockets?

Through some iterations and edits, we think our Editor walkthrough provides a nice balance of instruction and concept. Check it out and let us know what you think.

Get MailChimp Editor for iPad

Designing in Xcode

by Caleb Andrews
I handed over my PSDs to Stephen and Amro (a couple of our iOS developers/wizards) and slumped into my chair, relieved that I had finished my end of the MailChimp Editor for iPad. After weeks of developing and fine-tuning patterns on a strict grid with our creative director, Ron, I was excited to see our efforts implemented into the Editor. Any designer who's been up to his neck in folders and layers knows what I mean when I say, "that was a crazy fun project, but I'm glad it's completed." 
Spoiler: it didn't end there.
When the first TestFlight build came through, I loved what the iOS guys had produced—the months they spent crafting this robust tool were apparent. But some of the UI design didn't match up with the quality of the app's features, and it left me wondering, "how does that happen?"
After a few days of badgering Amro about pixel perfect popovers for the umpteenth time, he made a wild proposal: "Why don't I just show you how to make these changes in Xcode?" A few minutes later I was downloading Xcode from the App store, ready to jump into the deep end.
iOS developers deal with an unreal amount of code, which increases the difficulty in translating PSDs to an app. I didn't get it at first, but after a few laps in Xcode it became crystal clear: Xcode is nothing like Photoshop. Moving UI assets around in Xcode sometimes requires flying blind: push a label up or down a few pixels, review changes in the iOS Simulator, and try again until it's on point.

This workflow was time consuming, but ensured that our table views were consistent throughout the app. During that time, the iOS devs were able to focus on perfecting the app's code versus taking my design requests. I've barely scratched the surface of Apple's powerful IDE, but it's been liberating to have this level of control over my designs. Check out some of my workflows below.

I used the Size inspector view (highlighted above, right) to move the image of Freddie's high-five hand around to match specs to a tee.

I wanted to have 15 pixels of padding around our 'Add Comment' button (on the right). That's not as apparent as I'd like in Xcode, but using the aforementioned Size inspector helps a lot with positioning.

On the left is Xcode, and on the right is a live screen from the iOS emulator. Flying blind and moving objects around is tedious, but rewarding if you seek pixel perfection.

If you're itching to dive into Xcode now, check out Meng To's article on prototyping in Xcode using just the storyboard. Enjoy!

By the way, we're looking for a talented UI designer to join the MailChimp UX team.
Is this you?

UX Around The Web

Ask Us Anything

We want this newsletter to be a dialogue. If you have any questions for our team about workflows, interview techniques, or even Fabio's thoughts on sci-fi movies, 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.

© 2001-2013 All Rights Reserved.
MailChimp® is a registered trademark of The Rocket Science Group

view in browser   unsubscribe   update subscription preferences   

Email Marketing Powered by Mailchimp

Love What You Do