SlideShare a Scribd company logo
1 of 40
Download to read offline
Creating Narrative
POP 517: User Experience
What is this stage about?
Creating a narrative-based
platform to further develop
our project.
Surface
Skeleton
Structure
Scope
Strategy
Optimizes
arrangement of
elements for
maximum effect
Surface
Skeleton
Structure
Scope
Strategy
Pages

Images

Text

Clickable 

Functional

Informational

Visible
Step #1

What do we need to
do?
Feature sets

Flowcharts

User journeys
Feature sets

Flowcharts

User journeys
A group of
functions
(capabilities,
capacities, etc.)
Flickr and editing
your photos
ex
perim
entation
—————
Design
—————————
USABILITY
—————————————
RELIABILITY
———————————————
Core -Functionality
Apply the UX
Hierarchy to
Feature Sets
When thinking of User Experience, we
often think of a simple, beautiful, and
easy to use feature-set of a product,
that makes the user’s life easier. But
as a matter of fact, features are
merely a small, fragile part of the
product. They are only a few of many
thinkable solutions for a user’s
problem the product tries to solve.
Thinking in products means thinking
in specific user’s problems, in jobs to
be done, in goals, and in revenues.
“
https://medium.com/@jaf_designer/why-product-thinking-is-the-next-big-thing-in-ux-design-ee7de959f3fe
Feature sets

Flowcharts

User journeys
A way of illustrating
the user’s journey
through your
product
Paths and Maps
sometimes complex
sometimes simple
What the
user sees
_______________
What they
do
What they
see next
_______________
What they
do next
Feature sets

Flowcharts

User journeys
The interaction
between your user
and your product
including context
and mood
?Why
• Demonstrating the vision for the
project

• They help us understand user behavior

• They help identify possible
functionality at a high level 

• They help you define your taxonomy
and interface
?How
Understand
Understand
• Your user’s goals

• Their motivations

• Their current pain points

• Their overall character

• The main tasks they want to achieve
?What
• Context where, what, external factors

• Progression forwards, backwards, sideways

• Devices what, when, expertise level, features

• Functionality what level? achievable?

• Emotion emotional state throughout
Show me!
There is no template - illustrate, write a
narrative, create a storyboard or a flowchart or a
moldboard … these are some examples:
Homework Assignment
1. Revise your selected information architecture.

2. Brainstorm a feature set for your website, again taking into
consideration the primary needs of each of your personas.

3. Create at least one user journey for each persona, focusing
on what you consider their most important experience(s).
Multiple journeys are encouraged, but not required.

DELIVERY FORMAT:
Your journeys may include hand-sketched screens, a written
narrative, concept graphics and/or a combination of the three.
You are not expected to produce wireframe comps (yet).

Note: this is group assignment.
http://theuxreview.co.uk/
Basic Wireframing
Basic Wireframing
Basic Wireframing

More Related Content

What's hot

MonkeyTalk FALL 2012 - Talk 05 windows 8
MonkeyTalk FALL 2012 - Talk 05 windows 8MonkeyTalk FALL 2012 - Talk 05 windows 8
MonkeyTalk FALL 2012 - Talk 05 windows 8
Monkeyshot
 

What's hot (9)

Game Design 2: Menu Flow (2011)
Game Design 2: Menu Flow (2011)Game Design 2: Menu Flow (2011)
Game Design 2: Menu Flow (2011)
 
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
GCU Game Design 2 (2013): Lecture 2 - Menu FlowGCU Game Design 2 (2013): Lecture 2 - Menu Flow
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
 
Game Design 2: Lecture 4: Game UI Components
Game Design 2: Lecture 4:  Game UI ComponentsGame Design 2: Lecture 4:  Game UI Components
Game Design 2: Lecture 4: Game UI Components
 
MonkeyTalk FALL 2012 - Talk 05 windows 8
MonkeyTalk FALL 2012 - Talk 05 windows 8MonkeyTalk FALL 2012 - Talk 05 windows 8
MonkeyTalk FALL 2012 - Talk 05 windows 8
 
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface PrototypingGames Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
 
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
Cognitive Walkthrough for Learning Through Game Mechanics at ECGBL13
 
Game Design 2: Lecture 1 - Introduction
Game Design 2: Lecture 1 - IntroductionGame Design 2: Lecture 1 - Introduction
Game Design 2: Lecture 1 - Introduction
 
Common Design Patterns for Mobile (part 2)
Common Design Patterns for Mobile (part 2)Common Design Patterns for Mobile (part 2)
Common Design Patterns for Mobile (part 2)
 
Common Design Patterns for Mobile (part 1)
Common Design Patterns for Mobile (part 1)Common Design Patterns for Mobile (part 1)
Common Design Patterns for Mobile (part 1)
 

Viewers also liked

Honors_thesis _Taryn_Schubert_2009
Honors_thesis _Taryn_Schubert_2009Honors_thesis _Taryn_Schubert_2009
Honors_thesis _Taryn_Schubert_2009
Taryn Schubert
 

Viewers also liked (20)

Honors_thesis _Taryn_Schubert_2009
Honors_thesis _Taryn_Schubert_2009Honors_thesis _Taryn_Schubert_2009
Honors_thesis _Taryn_Schubert_2009
 
CALL
CALLCALL
CALL
 
ICI magazine
ICI magazineICI magazine
ICI magazine
 
Content and everything
Content and everythingContent and everything
Content and everything
 
Pitchdeck for USALandscapeMaterials.com
Pitchdeck for USALandscapeMaterials.comPitchdeck for USALandscapeMaterials.com
Pitchdeck for USALandscapeMaterials.com
 
Efaktury Marcin Poznań
Efaktury Marcin PoznańEfaktury Marcin Poznań
Efaktury Marcin Poznań
 
Group project
Group projectGroup project
Group project
 
Hong Kong Trade - Jakarta Business Networkers
Hong Kong Trade - Jakarta Business Networkers Hong Kong Trade - Jakarta Business Networkers
Hong Kong Trade - Jakarta Business Networkers
 
CTS Proposal
CTS ProposalCTS Proposal
CTS Proposal
 
Ici & itd
Ici & itdIci & itd
Ici & itd
 
CL FP
CL FPCL FP
CL FP
 
CAUSATIVE BY VIVI
CAUSATIVE BY VIVICAUSATIVE BY VIVI
CAUSATIVE BY VIVI
 
Siraj_CV
Siraj_CVSiraj_CV
Siraj_CV
 
Paired Conjuctions
Paired ConjuctionsPaired Conjuctions
Paired Conjuctions
 
skyperelay-gi08
skyperelay-gi08skyperelay-gi08
skyperelay-gi08
 
Brochure
BrochureBrochure
Brochure
 
CL Project 2A
CL Project 2A CL Project 2A
CL Project 2A
 
Inproperty Design
Inproperty DesignInproperty Design
Inproperty Design
 
Idj1
Idj1Idj1
Idj1
 
Foundation of Faith
Foundation of FaithFoundation of Faith
Foundation of Faith
 

Similar to UX5

Exploring UX Practices 4 Product Development Agile2012
Exploring UX Practices 4 Product Development Agile2012Exploring UX Practices 4 Product Development Agile2012
Exploring UX Practices 4 Product Development Agile2012
Ariadna Font Llitjos
 
Exploring ux practices 4 product development agile2012
Exploring ux practices 4 product development agile2012Exploring ux practices 4 product development agile2012
Exploring ux practices 4 product development agile2012
drewz lin
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
jayyearley
 

Similar to UX5 (20)

Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
 
Exploring UX Practices 4 Product Development Agile2012
Exploring UX Practices 4 Product Development Agile2012Exploring UX Practices 4 Product Development Agile2012
Exploring UX Practices 4 Product Development Agile2012
 
Exploring ux practices 4 product development agile2012
Exploring ux practices 4 product development agile2012Exploring ux practices 4 product development agile2012
Exploring ux practices 4 product development agile2012
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
Week 8 & 10
Week 8 & 10Week 8 & 10
Week 8 & 10
 
UX Trends
UX TrendsUX Trends
UX Trends
 
User story mapping
User story mappingUser story mapping
User story mapping
 
Usability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, Misys
 
What is this UX thing 11-24-15
What is this UX thing 11-24-15What is this UX thing 11-24-15
What is this UX thing 11-24-15
 
User Story Mapping Definitions & Basics - StoriesOnBoard.pdf
User Story Mapping Definitions & Basics - StoriesOnBoard.pdfUser Story Mapping Definitions & Basics - StoriesOnBoard.pdf
User Story Mapping Definitions & Basics - StoriesOnBoard.pdf
 
From Use to User Interface
From Use     to User InterfaceFrom Use     to User Interface
From Use to User Interface
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
What is this UX thing?
What is this UX thing?What is this UX thing?
What is this UX thing?
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
Design 101 : Beyond ideation - Transforming Ideas to Software Requirements
Design 101 : Beyond ideation - Transforming Ideas to Software RequirementsDesign 101 : Beyond ideation - Transforming Ideas to Software Requirements
Design 101 : Beyond ideation - Transforming Ideas to Software Requirements
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 

More from John Delacruz

2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-320352011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
John Delacruz
 

More from John Delacruz (15)

Addys event presentation
Addys event presentationAddys event presentation
Addys event presentation
 
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-320352011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
2011-12-AY_Award-Handbook-FINAL_BA_Advertising-Brand-Management_tcm44-32035
 
E learning conference, portland, or, 10:14 copy 2
E learning conference, portland, or, 10:14 copy 2E learning conference, portland, or, 10:14 copy 2
E learning conference, portland, or, 10:14 copy 2
 
Ux7
Ux7Ux7
Ux7
 
UX6
UX6UX6
UX6
 
UX4
UX4UX4
UX4
 
Ux6
Ux6Ux6
Ux6
 
Ux5
Ux5Ux5
Ux5
 
Ux4
Ux4Ux4
Ux4
 
Ux3
Ux3Ux3
Ux3
 
Ux2
Ux2Ux2
Ux2
 
Ux1
Ux1Ux1
Ux1
 
Coyote creek howl presentation april 2015
Coyote creek howl presentation april 2015Coyote creek howl presentation april 2015
Coyote creek howl presentation april 2015
 
91:s15:10b
91:s15:10b91:s15:10b
91:s15:10b
 
91:s15:10
91:s15:1091:s15:10
91:s15:10
 

UX5