Top Banner
Experience Themes: An Element of Story Applied to Design [email protected] @cchastain Cindy Chastain
81

USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Nov 01, 2014

Download

Design

innomind

An Experience Theme is basically an over-arching statement or phrase that encapsulates the value and focus of the experience we intend to deliver to users.

It may sound like a strategy or "vision", but at its core, an Experience Theme identifies what the product/service/system is all about from the point of view of users engaging with the product.

Once agreed upon, the theme can not only be used as a conceptual frame for design solutions, but can serve as the foundation for the Product Concept and Experience Strategy, a clear set of goals for the product/service/system design.

The slides explore how this idea was developed in the context of an interactive agency and how it was applied to several projects. It also shows how teams can generate experience themes.

And it's only one small part of a larger conversation about what user experience design can learn from storytelling.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Experience Themes:An Element of Story Applied to Design

[email protected]@cchastain

Cindy Chastain

Page 2: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

content:

What’s This About, Anyway?

Characterization of a Theme

A Story of How This Bloody Idea Came

About

How Experience Themes are Applied to

Design

How to Find a Theme

Final Thoughts

Page 3: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Design FrameCommunication

Tool

Vehicle forEngagement/

Response

methods

purpose

value

Team Building PersuasionMarketing

SellingValidating

ComicsStoryboardsScenarios“Concept Narrative”

Shared VisionUnderstanding

UnifyingSharing

Validating

ThemeComics

StoryboardsScenariosUser Flows

EmotionMeaning

IdentificationImmersionCoherence

Fun

Storytelling and UX

?

ThemeScenes

StructurePacing/Flow

Page 4: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

What’s This About, Anyway?

Page 5: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
Page 6: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Parti & The Design Sandwich

Luke Wroblewski at interaction09

Page 7: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Experience Strategy

Page 8: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Holistic Design

Page 9: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
Page 10: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
Page 11: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Characterization of a Theme

Page 12: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

We will NOT be talking about a theme that is…

A design for a PowerPoint template

A “message” conveyed by a work of art

The focus of brand image or promise

The subject of an academic paper

The main administrative divisions of the middle Byzantine Empire (themata)

The 2000 album by Moravian ethno metal band Silent Stream Of Godless Elegy

Page 13: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

the subject-matter, topic or idea on which a work of art or literature is based

Page 14: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
Page 15: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

A true theme is not a word but a sentence---one clear, coherent sentence that expresses a story’s irreducible meaning.Robert McKee, STORY

Page 16: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

The [theme] shapes the writer’s strategic choices. It’s yet another Creative Discipline to guide your aesthetic choices toward what is expressive of your [theme] and may be kept versus what is irrelevant to it and must be cut.Robert McKee, STORY

Page 17: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

readerwriter

responsedecisions

Impact of theme on…

Page 18: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

So what can themes do for user experience design?

Page 19: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

For the design process, experience themes can…

put experience at the forefront of product concepts

unify teams

lead to strategy

inspire design solutions

help teams make choices

Page 20: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

On the flip side, a theme, when manifest in a product, can also induce…

pleasure

emotion

meaning

Page 21: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

What’s not to like?

Page 22: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

A Story of How This Bloody Experience Theme Idea Came About

Page 23: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Case 1: AgnesNixon.com

Page 24: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

The Nixon family would like to leverage their tremendous library of content in a new, engaging, interactive video-centric web property.

Page 25: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

So where does one start?

Page 26: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Question: What’s this site ABOUT?

Page 27: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Story Premise: A playful, fun to use site helps people to easily manage their vast store of digital photos and share them with one another.

Theme: Define yourself with photos

If flickr had a theme…

Page 28: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
Page 29: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

“As experiences now span multiple media, channels & formats, we need to look to narrative, interaction, emotional elements to sustain transitions across channels and formats.” Joe Lamantia, in the Beyond Findability Workshop at IA Summit 09

Page 30: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Gasp!

I am the beast that is part website, part software, part product, part service, part interactive multimedia experience. What will you do with me?

user

technology product

Page 31: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

To create a truly memorable and satisfying experience, a UX designer needs to understand how to create a logical and viable structure for the experience and needs to understand the elements that are important to creating an emotional connection with the product users.

Page 32: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

tangible

intangibleemotion

meaning

pleasure

characters

setting

scenes

visual design

content

pages

flows

images

Page 33: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

what this is about

what this will do for me

how it works

where this fits into my life

The meaning of meaning…

Page 34: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Pleasure,Meaning,Emotion

Page 35: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

reflective

behavioral

visceral

Three Levels of Processing Experience

Page 36: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Donald Norman’s 3 Levels of Processing

The visceral level is pre-consciousness, pre-thought. It’s where appearance matters first and first impressions are formed. It’s about the initial impact of a product, about its appearance, touch, and feel.

The behavioral level is about use, about experience with a product. It’s about function, performance and usability.

The reflective level, is the level at which the full impact of thought and emotions are experienced. It’s all about message, about culture, and about the meaning of a product or it’s use.

Page 37: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

function

performance

ease of use

beauty

emotion

meaning

optimaluserexperience

Page 38: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

beauty

emotion

meaning

function

performance

ease of use

intangibletangible

New Elements User Experience?

Page 39: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Writers and filmmakers design, if you will, for emotion and meaning all the time.

Page 40: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

The tangible elements of experience in a…

visual design

image/cinematography

WebsiteFilm

actors

locations/sets

music/sound

editing

copy/text

information/content

navigation

interactions/system response

processes

animations

coordinated in service of story

not coordinated

music/sound

error messages

help

desktop widgetmobile app

lighting

words/lines

layout/content presentation

Page 41: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

visual design

copy/text

information/content

navigation

layout/content presentation

processes

animations

creative

marketing

business

information architecture/interaction design

error messages

outside resource

music/sound

help

engineering

product VP’s assistant

Note: This is for illustration purposes only and not mean to be an exhaustive list of elements of a web experience encountered by users.

An example of the uncoordinated elements of a web experience

interactions/system response

Page 42: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

If emotion and meaning can emerge from the harmonizing of elements that make up a story, then to design for optimal experiences we need a story by which to harmonize the elements of a product, service or system.

Page 43: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

From the point of view of design, the STORY can be used as frame that defines the product, service or system.

visual design

copy/text

information/content

navigation

interactions/system response

processes

animations

music/sound

error messages

help

layout/content presentation

Story frame

Page 44: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

theme

Page 45: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain
Page 46: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Given his choice [of theme], the writer sharpens and clarifies his ideas, or finds out exactly what it is that he must say, testing his beliefs against reality as the story represents it, by examining every element in the story for its possible implications with regard to his theme.

Page 47: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

themefocus

designprocess

defineproductand/or

strategy

Page 48: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

The Legacy of Agnes Nixon

The Story of a Soap

Reliving All My Children

Page 49: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Possible themes…

Page 50: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

How Experience Themes Can Be Applied to Design

Page 51: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Case 2: Showtime Sports Redesign

Page 52: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Shared Qualities of Experience for Fight Fans…

A feeling of excitement around the pure spectacle of a fight

A need to understand the complete fight story from the lead-up all the way to the post-fight commentary

Pleasure in knowing and possessing deep knowledge of the sport from fighters, stats, moves and past fights

Pleasure in feeling connected to a fighter’s hardships and challenges inside and outside of the ring

Page 53: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Where the Fight Never Ends

Page 54: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Functional and Content Requirements

Analyzed tasks and features against frequency, importance and relevance to the theme. Irrelevant features were thrown out.

Analyzed current content against theme. Identified gaps and created suggestions for new content ideas.

Page 55: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Structure and User Paths

Page 56: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Content Presentation and Flash Interactions

Sketching with theme in mind…

Page 57: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Chronological fight storyline…told in a sequence of videos.

Page 58: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

How to Find a Theme

Page 59: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

analysis

creativity

insightstheme

empathy

Page 60: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Case 3: MSG Insider Program

Page 61: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Experience Attributes Brainstorm

Page 62: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Everything must be from the point of view of our users…

We’re not thinking about goals, tasks and process scenarios just yet, but the kinds of feelings that might arise out of a user’s experience as well as the attributes that contribute to those feelings.

The rules:

Page 63: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

First rounds results…

• Fun and Easy to Use• Personal• Direct• Relevant• Targeted• Getting an edge on the general

public• Tailored to my personal taste• Not to be missed• A good match to my interests• Conversational• Upfront• Clear expecations• Helpful

• Quick• Easily accessible• Customized service• Learning• Surprise• Opportunities for discovery• Getting value• Feeling safe• Keeps me updated• Understands my interests• Getting a good deal• Convenience• Helps me stay in touch• Get great recommendations

Page 64: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Experience Attributes vs. System Attributes

• Fun and Easy to Use• Personal• Direct• Relevant• Targeted• Getting an edge on the general

public• Tailored to my personal taste• Not to be missed• A good match to my interests• Conversational• Upfront• Clear expectations• Helpful

• Quick• Easily accessible• Customized• Learning• Surprise• Opportunities for discovery• Getting value• Feeling safe• Keeps me updated• Understands my interests• Getting a good deal• Convenience• Helps me stay in touch• Get great recommendations

Page 65: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Re-organized list…Experience Attributes

• Relevant• Getting an edge on the general public• Tailored to my personal taste• Not to be missed• A good match to my interests• Clear expectations• Learning• Surprise• Opportunities for discovery• Getting value• Feeling safe• Keeps me updated• Understands my interests• Getting a good deal• Convenience• Helps me stay in touch• Get great recommendations

System Attributes

• Quick• Easily accessible• Customized• Fun and Easy to Use• Personal• Direct• Targeted• Conversational• Upfront• Helpful

Page 66: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Refined Experience Attributes…

• Satisfaction from getting an edge on the general public• Feeling of getting something tailored to my personal

taste• Feeling good about staying in touch• Feeling good about getting a good deal• Excited about opportunities for discovery• Confidence in understanding what one’s getting• Fun that comes from recording one’s tastes• Satisfaction from being on top of things• Pleasure in feeling connected to a local scene• curious about what one might be missing• Trusting that ones information is in good hands

Page 67: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Primary Cognitive/Emotional Experience:

• Satisfaction from getting an edge on the general public• Feeling of getting something tailored to my personal taste• Feeling good about staying in touch• Feeling good about getting a good deal• Excited about opportunities for discovery• Confidence in understanding what one’s getting

Secondary Cognitive/Emotional Experience:

• Fun that comes from recording one’s tastes• Satisfaction from being on top of things• Pleasure in feeling connected to a local scene• Curious about what one might be missing• Trusting that ones information is in good hands

Final, categorized list…

Page 68: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

analytical

creative

insightstheme

empathy

Time to brainstorm themes…

Page 69: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Your taste is our taste.

We know what you like. We want you to get it

first.

Never again will an event pass you by.

Get info about the stuff you want to see. Your

way.

Keep in touch. Discover something new. Get it

first.

Which resulted in ideas like…

Page 70: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Discuss, evaluate, combine, refine…

Page 71: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Keep in touch. Discover something new. Get it first.

The best fit…

Page 72: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Package into an Experience Briefthat also defines strategy…

Page 73: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Experience Brief: Part 1

Page 74: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Experience Brief: Part 2

Page 75: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Lessons Learned

An experience theme can be generated from any amount or type of raw material related to your project.

The means by which you sift through this raw material depends on the working habits of your team (you have a whiteboard culture, sticky note culture, image culture, conversation culture).

The form of the theme depends on what chimes most with your team and the stakeholders. It would be a word, or a phrase, but most important, it should reflect the core experience you hope to deliver.

Theme can be a foundation for a strategy.

Page 76: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

So what’s the difference between a Story Theme and an Experience Theme?

Page 77: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Story Themes Experience Themes

Found through insight into raw material of story planning

Found through insight into raw material of design planning: business goals and requirements, content analysis, user research

Decided upon by the vision and passions of single author

Decided upon by a team of stakeholders

Reflects author’s view of the world Reflects users needs and desires

Applied to overall design of story elements

Applied to overall design of product

Manifest in concept, conflict, character, setting, scene, sub-plots, story structure, climax

Manifest in product concept, strategy, content choices, layout, interactions, visual design

Produces pleasure in unity, emotion, meaning

Produces pleasure in unity, emotion, meaning

Induces a longer-lasting effect on the reader

Induces a longer-lasting effect on the user

Page 78: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

An Experience Theme is an over-arching statement or phrase that encapsulates the value and focus of the experience we intend to deliver to users.

At its core, an Experience Theme identifies what the product/service/system is all about from the point of view of users engaging with the product.

Once agreed upon, the theme can not only be used as a conceptual frame for design solutions, but can serve as the foundation for Product Concepts and Experience Strategy, a clear set of goals for the product/service/system design.

It serves the end to end user experience by unifying teams, framing the design and development process and by providing an added dimension to the user’s cognitive and emotional experience of the product.

Experience Theme Defined…

Page 79: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Final Thoughts

Page 80: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

Final thoughts…

We need to begin thinking more about product stories and the kinds of impact they can have on our approach to design as well as the experience of the user.

We have more work to do when it comes to understanding the full impact on user’s emotion and meaning associated with a product.

This is only a stone from the quarry. One story element of many. This, however, is the starting point.

We need to develop our “craft” at applying storytelling techniques to our designs.

As designers, we need to access our own cognitive as well as creative yin and yang.

Page 81: USER EXPERIENCE DESIGN SLIDESHOW by Cindy Chastain

thank you.

[email protected]@cchastain

Cindy Chastain