Cisco Blogs


Cisco Blog > Digital and Social

Serious UX Design Using Comics

July 18, 2011
at 7:29 am PST

I have written in the past about the value of using storytelling in web and mobile design, and specifically, using design comics to illustrate or work through user experience (UX) problems and solutions. Design comics are really just storyboards of an experience, but with characters and dialogs added so as to tell a story.

The great things about using comic storyboards in illustrating an experience are that (1) they help you think through a new experience in parallel to the use cases you’ve developed, (2) they include the user, not just the web pages or interface, (3) they get everyone on the same page about what’s getting built, and (4) they’re quick to create.

Here’s an example of a comic set we whipped together a while back to illustrate the potential experience with registering for a new WebEx iPhone app.

Our WebEx team was launching the first version of our iPhone app under a tight deadline for Mac World. Though the app itself was free and downloadable off the iTunes app store, many people would not actually have a WebEx account to use it. The team first started out by showing the story of how a user might learn of the new app, and what the default experience would be if based on the status quo registration. First, here’s a panoramic view of the one-page comic we put together:

And some more readable close-ups:

Part 1:

Part 2:

You can see her frown when she encountered the long form, and this simple illustration did a lot to show the issues that users would encounter if we simply translated our traditional long forms onto a mobile device. In fact, since that time we’ve done a lot of work on the web sign-up forms also.

This little comic did a lot to illustrate some inherent problems with simply translating a web page experience to mobile. Once the team made those issues visible through the comic, it was obvious to the team what to do: Streamline the experience and dramatically simplify the forms.  Thanks to that comic, we removed a huge barrier to initial for the app, which (thanks to being a great app but also having a low sign-up barrier) is now amazingly successful.

You can quickly do comics using PowerPoint slides and some quick sketching, as shown in this video I put together:

Creating a Design Comic

Enjoy!

In an effort to keep conversations fresh, Cisco Blogs closes comments after 60 days. Please visit the Cisco Blogs hub page for the latest content.

2 Comments.


  1. Thanks, Martin – I really like your design comics as a tool. Anything that streamlines power pointing is a good thing. Helps in communicating to non-web-heads too!

       0 likes

  2. This little comic did a lot to illustrate some inherent problems with simply translating a web page experience to mobile.
    ________________
    Kelvin
    How to Design a Website

       0 likes