Presented at SxSW Interactive in March 2013.
A geek’s breakdown of the history of comic books and the parallels and principles to modern experience design.
From their shared roots in the 1930s and 40s, with Siegel and Shuster’s Superman ushering in a Golden Age and Chapanis and Fitts establishing the field of experience design through their efforts to redesign airplane cockpits to consider human factors through more modern milestones like Watchmen, Y: The Last Man, Dyson Vacuums and the iPhone, the two fields have helped shaped our culture.
And while Norman coined the term 'user experience' and Nielsen has educated many designers on usability, Lee, Kirby and Eisner can certainly give lessons that any experience designer can apply to their next project to make it more engaging and memorable.
Explore the worlds of the Uncanny X-Men, Spirit, Green Lantern, Zappos and Amazon.com to discover that while the mediums are different, the fun and design are not.
11. I’m the best
there is at
what I do and
what I do best
i’sn't very
nice.
James Howlett (aka Wolverine)
first appearance: Incredible Hulk #181 (1974)
art by Chris Bachalo & Tim Townsend
#comicsXD
12. How do you define experience design?
#comicsXD
13. The craft of building lasting
relationships between people and
brands through a system of positive
interactions over time.
#comicsXD
21. Baskin-Robbins: Website Redesign Redesign Project: lebronjames.com
home [default | FoM] home [hero | shout promo]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Web Page Title 1. Hero Tile Web Page Title
6. Footer HOME
http://baskinrobbins.com Google When users first arrive to the site via searchhttp://lebronjames.com they will arrive on the home
or by typing in the URL, Google
This persistent element allows for secondary sections to be served up quickly, allowing
page. The majority of the the screen real estate is devoted to a large hero tile which highlights 3-5 secondary audiences quick access to the sections more relevant to them.
about us franchising contact us sign in LEBRON JAMES
featured pieces of content or product. LIFESTYLE ENTERTAINMENT SPORTS LEBRON COMMUNITY Search 1. Main
LOGO 6.1 Social Network links are displayed in an icon fashion to allow users to quickly accessm
The a
ICE CREAM CAKES THE SCOOP GIFT CARDS LOCATIONS Like <1K
1.1 The hero tile rotates through a carousel of images. The current position and the total number of HEADLINE <H2> of the
the brand on the chosen networks. For launch, only Facebook and Twitter will appear.
Tweet <500
tiles is represented here via the small dots at the bottom. The current display highlights the first networks can be addedipsum dolor sit amet,
Lorem over time as content is available. would
promotion. Each small circle is clickable and will jump to the tile in question. consectetuer adipiscing elit. Aenean
6.2 Each of the 3 more robust ligula eget dolor.the Corporate section are represented in the fo
commodo sections and Aenean
1.2 In addition to automatically playing at a preset time increment (6-8 seconds depending on the massa. 2. The H
amount of copy), users can move their cursor to the outside borders of the screen. When they do 6.3 author | category
The flavor dropdown allows users to bypass the navigation and drive directly toThis fla
their la
so, arrows will appear to indicate that they can click to move to the next tile. By default, these choice. By making any selection within this dropdown, the user will navigate away from
arrows will not appear on the screen. current page and be redirected to the selected flavor.
autho
or som
2. Main Navigation 6.4 displa
These lower level links connect to pages that don't live within the browse structure of th
The persistent navigation will appear on all pages of the site. Later pages will show that it contains 300 x 250 Ad featur
(Medium Rectangle)
MAIN HEADLINE <H1>
an onstate to show the user where they are at within the site. Additionally, rolling the cursor over
any of the primary items (Ice Cream, Cakes, Stay Connected, Gift Cards or Locations) will display 2.1 Faceb
a flyout menu to show the sub-sectionsamet, consectetuer
Lorem ipsum dolor sit within. This is outlined on the following pages. HEADLINE <H2> to sha
adipiscing elit. Aenean commodo ligula eget
Lorem ipsum dolor sit amet, align
dolor. Aenean massa. See More>> consectetuer adipiscing elit. Aenean
3. Secondary Promotional Areas would
#TEAMLEBRON commodo ligula eget dolor. Aenean
To highlight ongoing initiatives, Sapient is utilizing 3 secondary promotional tiles that do not massa.
animate. author | category
sort Most Recent 2.2 Each
FLAVOR OF THE MONTH 3.1. The first promotional tile represents the Birthday Club as it is a key component of the CRM/Loyalty
@teamlebron Lorem ipsum dolor sit amet,
programs that are currently under additional development. A text field allows the user to begin the
displa
the de
Lorem ipsum dolor sit amet, consectetuer registration process by inputing their email address. commodo.
consectetuer adipiscing elit. Aenean
adipiscing elit. [temp
CALL-TO-ACTION> 3.2. The second promotional tile represents the Gift Card program. As the main piece of E-Commerce 300 x 250 Ad
functionality and a main section of the site, Sapient recommends highlighting it in a visual fashion
(Medium Rectangle) 2.3 Sever
as well. same
THE LEADERBOARD
HEADLINE <H2> post.
4. Local Stores Lorem ipsum dolor sit amet,
1 outsideshot
consectetuer adipiscing elit. Aenean
lightw
BIRTHDAY CLUB GIFT CARD SHOPS NEARBY @teamlebron Lorem ipsum dolor sit amet,
Unlike the two previous promo tiles, this one contains more functionality as it utilizes the same commodo ligula eget dolor. Aenean first. O
geo-location functionality as dunkindonuts.com to determine the users consectetuer adipiscing elit. Aenean commodo.
approximate ZIP code massa.
2 username
Boston, MA, 02116
author | category
location and displays the address and contact information for that closest location.
outsideshot: Lorem outsideshot: Lorem 2.4 The fi
1Broadway, Cambridge, MA 02116 3 furiousgeorge
ipsum dolor sit amet, ipsum dolor sit amet,
Phone: 718-334-2354 Hours: 9:00-11:00
4.1 As the geo-location can be imprecise, a 'change location' adipiscing
consectetuer adipiscing consectetuer option is provided to allow the user to
Find More 4 anonymous 2.5 The n
customize the address more precisely or switch Aenean commodo
elit. Aenean commodo elit. it to their future travel location if that is their intent.
ligula eget dolor. Lorem ligula eget dolor. Lorem but no
Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer 4.2 For users who are looking for more precise driving dolor sit amet, their current address, a link is
ipsum dolor sit amet, ipsum directions from 5 username contro
300 x 250 Ad
adipiscing elit. adipiscing elit.
provided that will drive to a page where theyconsectetuer adipiscing
consectetuer adipiscing can input their street address and be provided with (Medium Rectangle)
SEE THE FULL LEADERBOARD
CALL-TO-ACTION> CALL-TO-ACTION> Change Location elit. elit.
directions via Mapquest's API. 2.6 As dis
HEADLINE <H2> their s
5. @teamlebron Lorem ipsum dolor sit amet,
Social Integration @teamlebron Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean commodo. consectetuer adipiscing elit. Aenean commodo.
Lorem ipsum dolor sit amet, will fo
Leveraging the social functionality on dunkindonuts.com, social feeds from Facebook or Twitter consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean
Follow can be displayed.
FACEBOOK TWITTER @teamlebron Lorem ipsum dolor sit amet, massa.
3. Seco
consectetuer adipiscing elit. Aenean commodo. author | category
@chocoholic Lorem ipsum dolor sit @chocoholic Lorem ipsum dolor sit @chocoholic Lorem ipsum dolor sit 5.1 Users can toggle between the two social networks at anytime by clicking the links here. Currently Repre
amet, consectetuer adipiscing elit. amet, consectetuer adipiscing elit. amet, consectetuer adipiscing elit. highlighted is the twitter feed.
Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor. @teamlebron Lorem ipsum dolor sit amet, and c
Aenean massa. #baskinrobbins Aenean massa. #baskinrobbins Aenean massa. #baskinrobbins consectetuer adipiscing elit. Aenean commodo. the ca
2 hours ago 2 hours ago 2 hours ago 5.2 A simple follow/like mechanism allows users to engage with the brand on an ongoing basis. Upon
clicking this button, the flows for the respective networks would be followed. i.e., pop-ups, etc. outsideshot: Lorem
outsideshot: Lorem the he
#baskinrobbins Frequently Asked Questions
NUTRITION ipsum dolor sit amet, ipsum dolor sit amet, 300 x 250 Ad
Privacy Policy Site Map 5.3 consectetuer adipiscing consectetuer adipiscing
Users can rotate through the most recent posts. By default the 3 most recent are displayed. (Medium Rectangle)
@teamlebron Lorem ipsum dolor sit amet, elit. Aenean commodo elit. Aenean commodo
FACEBOOK TWITTER PINTEREST 5.4 consectetuer adipiscing of Aenean conversations around the brand asLorem ligula eget dolor. Lorem
Sapient recommends a potential strategyelit. tracking commodo. ligula eget dolor. opposed
ICE CREAM
ipsum dolor sit amet,
to the only the brand's posts as it builds a more engaging presence and gives people the ipsum dolor sit amet, SHOUT SHOUT <H2>
CAKES THE SCOOP ABOUT US
@teamlebron featured on baskinrobbins.com. This filtering can be adipiscing consectetuer adipiscing
perception that they too can be Lorem ipsum dolor sit amet, consectetuer done via Lorem ipsum dolor sit amet, consectetuer
hashtags or @replies. Obviously, this approach would require some additional monitoring to be elit.
elit.
Select an Ice Cream Flavor Create Your Own Birthday Club Media Relations adipiscing elit. Aenean commodo ligula eget dolor.
consectetuer adipiscing elit. Aenean commodo.
Occasions Events International Aenean massa.
Specialties discussed in the future. guest author | music
Grab-N-Go Types Promotions & Coupons Franchise Opportunities
Nutrition Pies Contact Us FAQs 1500 MORE HAVE RESPONDED. ADD YOUR VOICE >
Privacy Policy Terms of Use Mobile Terms & Conditions Site Map
Creator Timothy Parcell Creator Timothy Parcell
Modified Sat Mar 09 2013 Modified Tue Jun 05 2012
#comicsXD
31. I hope not.
All trademarks and copyrights of third parties, including any trademarked
referenced or represented for historical, scholarly and educational “fair use”
purposes only. Individual artists are attributed wherever possible.
The opinions presented are solely those of Timothy Parcell and do not reflect the
views or positions of the owners and/or publishers of the comics and producers
of other media which are referenced in this presentation.
Superman, Action Comics, Batman, Detective Comics, Wonder Woman, Green
Lantern, The Flash, Captain Marvel, The Justice League of America, Supergirl,
Chloe Sullivan, The Watchmen, Green Arrow, Speedy, Harley Quinn, Lex Luthor,
Lois Lane, Apollo, Midnighter, Mr. Majestic are all the trademarks and
copyrights of DC Comics
The Spirit is copyright and trademark of the Will Eisner Estate.
Spider-Man, Captain America, Hyperion, the X-men, Wolverine, X-Force, Cable,
X-23 are all trademarks and copyrights of Marvel Comics
Archie, Betty and Veronica are trademarks and copyrights of Archie Comics.
Spawn is copyright and trademarks of Todd McFarlane
Steampunk is copyright and trademarks of Cliffhanger (Joe Casey & Chris
Bachalo)
I am just a huge geek. Please don’t sue me.
#comicsXD
42. People assume that time is
a strict progression of cause
to effect, but *actually* from
a non-linear, non-subjective
viewpoint - it's more like a
big ball of wibbly wobbly...
time-y wimey... stuff.
The Tenth Doctor (David Tennant)
#comicsXD
50. Created in 1932 by Fleischer Studios
Jerry Siegel and Joe produced 17 animated
Shuster. shorts from 1941-1943.
Jerry was the writer.
Those films are the
Joe was the artist. reason he can fly.
#comicsXD
51. art by Joe Bogdanove
The K-Metal
from Krypton
Unpublished
(Written in 1940)
#comicsXD
60. Captain
marvel
first appearance:
Whiz Comics #2 (1940)
SHAZAM! - The magic word that gives young Billy
Batson the powers of Solomon, Hercules, Atlas,
Zeus, Achilles and Mercury
art by Jeff Smith
#comicsXD
81. The Hulk
first appearance:
The Incredible Hulk #1 (1962)
Originally grey to avoid any confusion over ethnicity.
Printing issues caused too much variation so they
made him GREEN.
Art by Jack “King” Kirby
#comicsXD
83. The Hulk
first appearance:
DC: The New Frontier
The Incredible Hulk #1 (1962) 2003-2004
Originally grey to avoid any confusion over ethnicity. Written and drawn by Darwyn Cooke.
Printing issues caused too much variation so they
made him GREEN.
#comicsXD
84. DC: The New Frontier
2003-2004
Written and drawn by Darwyn Cooke.
#comicsXD
85. DC: The New Frontier
2003-2004
Written and drawn by Darwyn Cooke.
#comicsXD
87. Captain AmericA
First Marvel character to be adapted to
another medium. In 1944 he was
featured in a eponymous serial movie.
Art by Jack “King” Kirby
#comicsXD
93. Marvel’s
First Family
Previous Superhero teams like the
Justice League and Justice Society
featured already established heroes
banding together.
Art by Jack “King” Kirby
#comicsXD
99. x-men
first appearance: The X-Men #1 (1961). Art by Roger Cruz.
Stan Lee and Jack Kirby continued to build on the success.
X-Men is now one of the most profitable franchises in comic books.
#comicsXD
102. "You’re also, wherever possible, looking for an
interesting image. But don’t confuse
“interesting” with “splashy.” You’re still trying to
serve the demands of storytelling, telling the
story as clearly and simply as possible. In
most forms of narrative, each panel must
have a relationship with the panels on either
side of it. You’re plotting out a sequence of
motion in a series of stills. Imagine it like that,
and you may be able to get a better sense of
how a story in comics might flow. It’s not a
perfect analogy, but it might be worth
considering if this is something you’re having
trouble with. You’ll develop your own view,
approach and methods as you go.
Everybody does."
Warren Ellis (Writer, The Authority)
#comicsXD
113. "We can realize that a good product is one
that offers a good or memorable narrative that
the user will engage with and pass on to
others, either by sharing the artifact or talking
about it. To create a good product, it is critical
to understand our users. The need to involve
the user in the design process has made
product design a more complex task.
However, designers can no longer focus solely
on the product: A successful design will take
into consideration all of the components in the
user product interaction: user, product and
context of use."
Jodi Forlizzi & Shannon Ford
#comicsXD
114. 4
AUDIENCE
The villains have the upper hand
#comicsXD
115. Film makes you a
spectator. Comics make
you a participant.
#comicsXD
118. A Death in the Family
published in Batman #428 (1988)
Fans controlled the outcome of the story by voting
via two 800 numbers. Jason Todd lost by 72 votes.
(5,343 to 5,271)
Art by Jim Aparo.
#comicsXD
170. Make your brand stand for something.
Get the details right.
#comicsXD
171. Make your brand stand for something.
Get the details right.
Tell a great story.
#comicsXD
172. Make your brand stand for something.
Get the details right.
Tell a great story.
Make it simple.
#comicsXD
173. Make your brand stand for something.
Get the details right.
Tell a great story.
Make it simple.
Make things for your audience.
#comicsXD
174. Make your brand stand for something.
Get the details right.
Tell a great story.
Make it simple.
Make things for your audience.
Know your medium(s).
#comicsXD
175. Make your brand stand for something.
Get the details right.
Tell a great story.
Make it simple.
Make things for your audience.
Know your medium(s).
Don’t be afraid to start over.
#comicsXD
176. Make your brand stand for something.
Get the details right.
Tell a great story.
Make it simple.
Make things for your audience.
Know your medium(s).
Don’t be afraid to start over.
Have Fun.
#comicsXD