Talk: WebVisions 2010: Kevin Cheng: See What I Mean: How To Use Comics To Communicate Ideas

See What I Mean: How To Use Comics To Communicate Ideas
Kevin Cheng, Designer, Yahoo! Pipes (now Product Manager at Twitter?)
WebVisions 2010, Portland, OR

http://bit.ly/swimbook
http://delicious.com/kevnull/seewhatimean
http://seewhatimean.org

Twitter: @k (wow, that's a cool Twitter handle)

His slides are at: http://www.slideshare.net/kevnull/communicating-concepts-through-comics

This was another great talk at WebVisions, about the richness of information that can be conveyed by comics, as opposed to real pictures.  My takeaways:

(Courtesy: Disney, Corp)

• This reminded me of how effective even my crudely drawn comics have been in terms of conveying a story, especially involving designs that involve multiple stakeholders.
• I was startled by Kevin's examples of how much meaning can be conveyed by even stick-figure faces.  Think about WALLY, and how expressive his emotions were, given that he only had basically eyestalks/eyebrows to communicate with.

My talk notes below:

• Why Comics?
  • Communication
  • Imagination
  • Expression
  • Motion
• All you need is eyebrows and mouth!  (See Wall-E example above, and how expressive he is!)
• Comics are amazing at conveying just the important things in UI (instead of screenshots)
• Comics are low-fidelity: check out his Slide 46 that shows the spectrum of representations of Kevin Cheng
• Comics can add so much meaning to phrases such as “thank you” and “I’m sorry” (Slide 52)
  • Showed 8 panels x 2 to show how much more expressive it is than even “he said ‘thank you’ sarcastically”
  • Showed eight examples of those phrases with different expressions, demonstrating concepts like resentment, anger, sarcasm, exuberance, gratitude, etc...
• Comics can also convey time, using panels, colors, etc...
  • When Confabulator got bought by Yahoo!, they told their story in comics
• When To Use Comics
  • If you’re a leader: Distill a vision and share it across the organization
  • Marketers: Get the attention of potential clients and customers
  • Engineers and Designers: Crystalize problems and solutions and get team feedback
• Before a project starts, you can use comics to...
  • Set goalposts: follow a vision
  • Share with execs: to get sponsorship and buy in
  • Validate ideas: with potential users
  • Even combine with things like swim lanes: comic timeline is on top, mapped to swimlanes on bottom
• After the project completes, you can use comics to...
  • Present research that you did
  • Example: Evangeline Haughney from Adobe
  • Use it to market the finished product
  • "At Raptr, we double the number of signups with comics (tested with A/B)"
  • "At Nectar: the front page of the website was a comic.  It was low fidelity:"  Essentially it said, “if you want to create a website, holy moly, it’s done five menutes later” – more effectively communicated than any bullets
• You can draw!
  • Common excuses: “I can’t draw.”  “I don’t want to hire an illustrator”
  • Exercise:
    • Draw a person at computer, and another user who’s been waiting for too long
    • You may not want to put on home page, but it is very effective for internal communcation
  • You can trace!
    • It’s much better to trace than to just take photos
    • It’s better to be abstract
  • Mitigates internal giggling reaction when people see photos: “Oh, there’s the picture of Kevin pretending to be at a coffee shop.”
• Other options to generate comics
  • Even use avatars
    • "I tried it out. http://avatars.yahoo.com"
    • Generated Mack Daddy Kevin, skateboarder Kevin, depressed Manhattanite: all with same avatar, but with different backgrounds
  • Use professional artists: too expensive
  • Bitstrips: pretty powerful (http://bitstrips.com) but he doesn’t like the art style
  • Wally Woods: "22 Panels That Always Works"
    • These are 22 archetypal panels that can be used to tell almost any story: http://joeljohnson.com/2009/wally-woods-22-panels-that-always-work-unlimited-edition
    • It’s the 22 ways that people talk to each other
  • Kevin created 12 panels of interacting with computers
  • Sun Microsystems had some comic tool: but too close to reality/photos
  • Comic Life (a utility that used to be included with the Mac)
    • Intended for family photos, but you can use it for drawings and layout tools
  • Best for last: Pixton: online tool (http://pixton.com/)
    • Wow, watching him use the tool, it looks easier than creating a Mii!
    • "They’re targeting it being used as a technical tool"
    • “I hope these guys stick around, because it’s amazing and great.”
  • Alias Sketchbook: “a pretty cool tool on the iPad”

Dropbox has changed the way I use computers and how we are writing our books

I have always had problems effectively working with multiple computers at work and at home. Primarily, I use a Thinkpad x200 for work, and at home, I use a 27" iMac and a MacBook Air. For years, I've struggled with keeping my active files for projects available to me when I need them. Sometimes it's a draft chapter that I need to work on, or a presentation I need to finish, or a spreadsheet I want to work on with my wife.

Until a couple of weeks ago, I routinely would email myself working files or documents I had to myself, just so I could work on them on different computers. And of course, every once in awhile, I will be missing a file I need. Which would require me to log into a different computer, and email myself another file or two. Or three.

Or maybe where I'm working won't have Internet access, so I'll have to use a USB drive. Or worst of all, I spend hours working on a file, but I forget to email myself the final version. So then I have to redo all the work.

When this happens, it's so frustrating, I want to throw away all but one computer. And in actuality, this problem is large enough that I primarily use my work laptop, even though a much better computing environment exists.

So, I've suffered with this problem for years. Until I discovered two utilities: SugarSync and Dropbox. Both are marketed as ways to backup, sync and share your files in the cloud. Both have radically changed the way I use my computers, both for home and at work.

I've started using SugarSync to sync up project folders across all my computers. I'm absolutely loving it. I'm amazed at how easy it is to keep files synchronized across PCs and Macs (and even iPhones), regardless of the size of file. I started paying for SugarSync, and was very happy with it, until I found that I couldn't share files and have my wife access files in her Mac Finder window. Instead, she would need to go to a web page to download the files. Huh? I might as well ask her to upload photos to an FTP server! It wasn't quite the user experience I was hoping for...

Then, a friend recommended Dropbox, which allows seamless sharing of shared directories. So, I dropped SugarSync, and am now paying from Dropbox, because the user experience is so much better. Whether a file is shared between computers or between different people, you can still do everything using Windows Explorer or the OS X Finder, without going to a web page.

In fact, we're now using Dropbox to share files for our next upcoming book, instead of using the BZR version control system.

Incidentally, when we wrote the Visible Ops and Visible Ops Security books, we had an authorship team of three people. Mostly, we'd be emailing Word documents to and from each other. In our upcoming book project, we again have three authors, but because it's a novel, we have many more moving parts: character development docs, the fictitious company financials and stock price, application descriptions, plot lines at a 100K foot level, chapter outlines at the 50K foot level, and then chapter drafts.

Using BZR required getting an FTP server set up, training ourselves to type in 'bzr add' everytime we added a file, 'bzr commit' everytime we updated a file, etc. It was tedious and often we'd forget to do this.

In comparison, now that we've switched to Dropbox, everything is like magic. Whenever anyone updates a file, we all get it when we're connected to the network.

We'll never go back to the old way.

Talk: WebVisions 2010: Alexa Andrzejewski: The UX Driven Startup: Crafting an experience-based vision for your startup

The UX Driven Startup: Crafting an experience-based vision for your startup
Alexa Andrzejewski
Formerly UX Designer, Adaptive Path
Now CEO and Founder: http://www.foodspotting.com

WebVisions 2010, Portland, OR

Twitter: @ladylexy, @foodspotting

Slides: http://www.slideshare.net/ladylexy/the-ux-driven-startup

Alexa apparently also gave this talk at the Web 2.0 Conference, to glowing reviews. See this review at http://blog.gunnjerkens.com/tag/foodspotting/

This was an absolutely terrific talk -- perhaps one of the best I've sat in on in many years. Trust me. I wish I understood the need for designing around user experiences when I started Tripwire 13 years ago. Things like this are ideally baked in earlier, not retrofitted into the product years after it's been shipping.

The full notes of the talk are below, but here are some of the highlights:

• Alexa was a designer at Adaptive Path, but not a coder, so she was stuck in design-land for six months. It was frustrating for her, but in hindsight, it forced her to concentrate on designing the user experience.
• Like in development (and likely every major undertaking), concentrating on validating assumptions and crystallizing what the ideal end-state looks like drastically increases the likelihood of achieving the desired outcome.
• Alexa extends the typical interaction design model to encompass pitching, explaining, etc.
• She addressed very effectively the problem and allure of implementing features one at a time (e.g., badging, rating, gaming, etc.). She made the analogy of baking a cupcake, a cake, and a wedding cake: "how do ensure that we have at least a little frosting each step of the way?"
• Lots of great takeaways in her talk!

Great job, Alexa, and good luck in your new venture!

Full notes:

• Recently left Adaptive Path 
  • Vision: If you have an amazing food experience, make it easy to recommend it; makes it easy to discover foods around you
  • Foodspotting now has a website and iPhone app
  • now 100K iPhone app downloads, launched in March 2010 at #sxsw, 45K foods lsited
• Woke up one morning: why isn’t there a Yelp for dishes, instead of restaurants?
  • Inspired by trip to Japan and Korea: why didn’t I ever hear about them, and tried to find it in San Francisco?
  • At Adaptive Path, we help companies specify what to build before they build it
    • Build product strategy and competition
    • Interaction design: figure out flow, create detailed specs
• The only problem is: "I can’t actually build things; I can’t actually code"
  • Ended up spending 6 long months looking for acofounder: all my friends are designer
  • Tip #1: get out of your circle: you need designers, coders, business people
  • Very frustrating: because couldn’t write code and get something written
• Frustration was good
  • Used time to refine, communicate and validate my vision
  • I ate out a lot, asked people “what did you eat, how would you rate it, how would you keep a food journal”
• "I found my co-founder by showing them my big poster"
  • Rails developer: from GetSatisfaction (was front end developer)
  • Didn’t have iPhone skills, so hired that out: and by then, idea was tested and validated
  • found likely source of members: the 55K members part of “food porn” group on Flickr
• What is the experience you want to create: don’t want to recommend that you spend 6 months being frustrated
  • Concepts are not a replacement for Lean Startup or Agile Startup
  • Focus on the experience you want to creat and let everything else support that
• Top Mistakes that Startups make (top google search)
  • Mistake 1: build something people don’t really want or need
    • Segway
  • Mistake 2: Thinking too small
    • Investors want to see big idea: tell me about world domination
    • He wants to hear about ultimate solution: ideal, not what you’d build tomorrow
  • Mistake 3: Moving too slowly
  • A UX Vision can help
  • Vision: a concrete representation of where your product is headed
• Tools
  • 1. Come up with a vision
  • 2. Communicate your vision
  • 3. Validate your vision (slides are available on Slideshare)
• Vision
  • Intial: it’s a field guild for food
    • “Tell me about some of the highs/lows for your restaurant”
• TOOL: Contextual Interviews:
  • What do you think when you see the menu?
  • Do you order the same thing?
  • Hear about reviews and articles?
  • Yields:
    • Undersanding of pain
    • Opportunities you haven’t considered
  • Ingredients
    • 10 people, 10 questions
    • Notebook, pen, paper, sharpies
  • Instructions
    • Meet people in context
    • Ask open-ended questions
    • Use cues in environment
    • Use discussion aids if you can
  • Other tools
    • Show me timeline of highs and lows of food experience (read magazine article) - wavy line on sheet of paper
• TOOL: Make believe
  • Pretend the tool exists: like PalmPilot holding block of wood
  • Yields
    • An outpouring of fresh ideas
    • New ways to frame a problem (“what would the ideal magic wand be?”
    • A chance to taste whether an interaction feels natural in real life
  • Ingredients
    • Props, a friend, the Real World
  • Instructions
    • Get out and enjoy everday activities
    • Act out some ways you’d use your product, using props to inspire and test ideas
    • Got them to consider lots of exciting and tantalizing idea
• TOOL: Metaphor Brainstorming
  • A concrete representation of the proposed activities
  • Examples: Collecting, competing, finding
  • Collecting
    • Word association: Stamps, coins
    • Explore the metaphor: everyone is unique: passport photos: tells story; coins are kept in a special box
• TOOL: Artifact from the future
  • What would TechCrunch say about it? What is the review of software say?
  • Yields:
    • A concrete representation of where your product is headed
    • Something your team can rally around
  • Ingredients:
  • Just ideas and imagincation
    • (Missing some…)
• Communicating your vision
  • Principles
    • 1. It’s just about the food
    • 2. Not every food, just the good food
    • 3. Good food can be found anywhere
    • 4. Meaningful experiences
    • …
• TOOL: Experience principles
  • Yields
    • Concise, memorable guidelines that…
  • Inspire ideas
    • Give you a basis for decision making
• TOOL: Create an Experience Poster
  • Yields
    • A pocket sized visual summary of what using your product could be like
    • Something you can use to sell your vision and vett your ideas
  • Ingredients 
    • An elevator pitch
  • Description of benefits 
    • Principles, characgeristics, metaphors
  • Instructions 
    • Describe benefits of your product
    • Illustrate those benefits – capture the experience, not the interface
• TOOL: Pitch kit: name, pitch, vision 
  • Yields: 
    • A meaningful name
    • A one-sentence cocktail party pitch
  • Vision or mission statement
    • An “ah-ha” reaction
  • Ingredients 
    • A few social events to practice at
    • A few well-known companies you can relate your to
  • Instructions 
    • Practice your answers to those questions you can get people to say “ah-ha!” in a minute
    • Used Venture Hacks (http://venturehacks.com/, @venturehacks)
  • Reframing problem statement and goals: "Facebook is about making the world more open and connected; Foodspotting is about being able to discover great things around your world."
  • Look for the bigger idea
• Validating your vision 
  • By time she had cofounder, was on version 15 of wireframing
  • InDesign is favorite tool
  • Showed portable deck of cards
  • Prototyping in Flash was easy
  • Crank out prototype in days; 4-5 months to get iPhone app built
• Design the Future Homepage 
  • Use the renderings months before iPhone app available to get email addresses (use Facebook Like)
  • Holy cow: amazing sounding tool. Kiss Insights: ask question on any webpage (to ask questions like "which links on a navigation would you remove?")
  • Fill in the blank: I love this product because…
  • Not: “it uses augmented reality and it uses open standards”
• Build half a product, not a half-assed product: --Jason Fried 
  • Cupcake
  • Cake
  • Wedding Cake
  • All of the above are tasty: you don't ship any of them without frosting.
  • It could have been tempting to do core functionality: badges, rating, search, social, gaming
  • We worked backwards: what kind of gaming feature could we do, even given limited time, budget, etc...
  • Make sure there’s a little bit of frosting at each phase
  • At each step, ask “what is cupcake version?”
• What is experience you want to create? 
  • Experience
  • Business
  • Product
  • Technology
• For six long months, all I had was a vision 
  • We’re raising funding
  • 100K app users
  • Looking for mobile, bizdev rockstar, mobile/rails developer
• Q: What was your biggest surprise? 
  • People take lots of pictures
  • People tweet everything: almost like spam
  • People have lots of regional pride (we have great sushi in Ohio; Ashville, representing on foodspotting) 
    • Can we up the competitiveness on regional pride?
  • Biggest challenge? 
    • Explaining that opportunity is more than just a lifestyle: it's more than just a being food blogger
  • Believing it helps
  • So many great ideas (Four Square, Gowalla) didn’t start as a making money venture