SlideShare a Scribd company logo
TODAY:
Using Content as Design
Material
Carrie Hane
@carriehd
#uxpaedu
User Experience Professionals
Association International
Short-courses:
Designing Connected Content
September 20, 27, October 4
and 11
Getting Started with
Ethnography: UX Research in
the Field
October 2, 9, 16 and 23, 2018
uxpa.org/shortcourses
Suggest speakers and topics. Send a message to:
education@uxpa.org
Here’s the journeys we’ve
designed for you…Hope you
enjoy.
That’s not the way it works on
the web. Digital is do-land.
Gerry McGovern
http://bit.ly/2MMXhY8
https://www.flickr.com/photos/numberstumper/167209015/in/photostream/
@carriehd
Not chicken and
an egg situation
@carriehd
No
Yes
@yourtwitterhandle
How to get visual designers and
content owners to play?
How do we design for
any journey and make
the user the hero of
the story?
Resource before
representation
@carriehd
@carriehd
UX UI Dev
Content
Content Last
@carriehd
Content
Strategy
UX UI Dev
Development Last
Houston, we have
a problem.
@carriehd
Content First
Content
Model
Content
Types
Dynamic
Display
Criteria
Dev
UX & UI
Design
Content
Creation
Interface
2. Design the content
3. Create the representation
1. Start with a model
HOW TO DESIGN WITH CONTENT
@yourtwitterhandle
1. Start with a model
2
s
@yourtwitterhandle
Domain model Content model
Map is not the
territory it
represents
@carriehd
Domain model for Live Music
@carriehd
Content Model for Ticketseller
Content structure
http://bradfrost.com/blog/post/atomic-web-design/
Atomic Design
Stakeholder
alignment
Content is design
material
@yourtwitterhandle
2. Design the content
@carriehd
Who is this?
What kind of music do they play?
When are their concerts?
How much do tickets cost?
How can I get tickets to the show?
Act
@carriehd #UXLx 27
Who is this act?
Content Type Attribute Example Content
Lineup Lineup Name U2
Performer Performer Name Bono
Performer Years Active 1976 - present
What kind of music do they play?
Content Type Attribute Example Content
Genre Genre Name Rock
@carriehd #UXLx 28
When are their concerts?
Content Type Attribute Example Content
Tour Tour Name Experience + Innocence
Tour Tour Dates May 2, 2018 - November 10, 2018
Performance Date June 17, 2018
Venue Venue Name Capital One Arena
Venue City, State Washington, DC
How can I get tickets to the show?
Content Type Attribute Example Content
Ticket URL Buy tickets
How much do tickets cost?
Content Type Attribute Example Content
Ticket Ticket Cost $75 - $325
https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
Sample content
@carriehd
Who is this act?
Content Type Attribute Example Content
Lineup Lineup Name Violent Femmes
Performer Performer Name
Gordon Gano
Brian Ritchie
John Sparrow
Performer Years Active 1981 - present
What kind of music do they play?
Content Type Attribute Example Content
Genre Genre Name Folk punk
@carriehd
When are their concerts?
Content Type Attribute Example Content
Tour Tour Name
Tour Tour Dates
Performance Date
Venue Venue Name
Venue City, State
@carriehd
How can I get tickets to the show?
Content Type Attribute Example Content
Ticket URL Buy tickets
How much do tickets cost?
Content Type Attribute Example Content
Ticket Ticket Cost
@yourtwitterhandle
Is content a known
quantity?
HELL YES!
But what will it
look like?
It doesn’t matter
@carriehd
H20
@carriehd
Black Bean Soup Moosewood
Alexa, Get me the
recipe for moosewood
black bean soup
@yourtwitterhandle
3. Create the
representation(s)
But what about
the site map?
@carriehd
Resource Index
@carriehd
@carriehd
Act: Name
Tour: Name
Performance: Date
Venue: Name
Venue: City
Venue: State
@yourtwitterhandle
domain.com/content-type/resource-name
ticketseller.com/event/jayz-and-beyonce-otr-ii-arlington-
texas-09-11-2018
https://www.smashingmagazine.com/2015/02/design-last/
<html>
<head>
<title>[TourName PerformanceCityState]</title>
</head>
<body>
<h1>[TourName]</h1>
<ul>Lineup:
<li>[ActName]</li>
</ul>
<p>[PerformanceDate]</p>
<section><a href=“[venueURL]”>[VenueName]<a> in
[PerformanceCityState] <a href=“[venueURL]”>See Venue
Information</a></section>
</body>
</html>
When you remove all
styles, does your page
still tell a cohesive,
clear story?
The State of UX in 2018
http://uxdesign.cc
@carriehd
domain.com/content-type/resource-name
ticketseller.com/event/jayz-and-beyonce-otr-ii-arlington-
texas-09-11-2018
@carriehd
@carriehd
Structured Content Stack
from Designing Connect Content
It is easy to put pixels
together when you’ve
already made
decisions.
Nicole Fenton
Words as Material
@yourtwitterhandle
In conclusion…
@yourtwitterhandle
Omnichannel
Flexible
Connected content is
Extensible
Scalable
@yourtwitterhandle
Real collaboration
@carriehd
@carriehd
Get Designing Connected
Content on Amazon or
your favorite bookseller https://uxpa.org/shortcourses
UXPA International Short Courses
Designing Connected Content

Four 60-minute online lectures on
September 20, 27, October 4 & 11
@carriehd
THANK YOU
CARRIE HANE
@CARRIEHD
WWW.TANZENCONSULTING.COM

More Related Content

More from Carrie Hane

More from Carrie Hane (19)

The Secret is in the Connections
The Secret is in the ConnectionsThe Secret is in the Connections
The Secret is in the Connections
 
How to Measure Content ROI
How to Measure Content ROIHow to Measure Content ROI
How to Measure Content ROI
 
Content Models & Taxonomies: BFFs
Content Models & Taxonomies: BFFsContent Models & Taxonomies: BFFs
Content Models & Taxonomies: BFFs
 
Developer's Guide to Content Strategy
Developer's Guide to Content StrategyDeveloper's Guide to Content Strategy
Developer's Guide to Content Strategy
 
Content Strategy: The Method Behind the (CMS) Madness
Content Strategy: The Method Behind the (CMS) MadnessContent Strategy: The Method Behind the (CMS) Madness
Content Strategy: The Method Behind the (CMS) Madness
 
Creating a User-Centered-Online-Communications-Process
Creating a User-Centered-Online-Communications-ProcessCreating a User-Centered-Online-Communications-Process
Creating a User-Centered-Online-Communications-Process
 
Content-First Websites: From Theory to Reality
Content-First Websites: From Theory to RealityContent-First Websites: From Theory to Reality
Content-First Websites: From Theory to Reality
 
Setting Interface Foundations with IA
Setting Interface Foundations with IASetting Interface Foundations with IA
Setting Interface Foundations with IA
 
Ghosts of Content Strategy: Past, Present, and Future
Ghosts of Content Strategy: Past, Present, and FutureGhosts of Content Strategy: Past, Present, and Future
Ghosts of Content Strategy: Past, Present, and Future
 
Designing Future-Friendly Content
Designing Future-Friendly ContentDesigning Future-Friendly Content
Designing Future-Friendly Content
 
Building Your Own Content Strategy Roadmap
Building Your Own Content Strategy RoadmapBuilding Your Own Content Strategy Roadmap
Building Your Own Content Strategy Roadmap
 
Becoming a Change Agent
Becoming a Change AgentBecoming a Change Agent
Becoming a Change Agent
 
Using content strategy to become a change agent
Using content strategy to become a change agentUsing content strategy to become a change agent
Using content strategy to become a change agent
 
Web Content Strategy in a Multi-Channel World
Web Content Strategy in a Multi-Channel WorldWeb Content Strategy in a Multi-Channel World
Web Content Strategy in a Multi-Channel World
 
User focused content strategy that is just right
User focused content strategy that is just rightUser focused content strategy that is just right
User focused content strategy that is just right
 
Content First – Planning Drupal Content Types
Content First – Planning Drupal Content TypesContent First – Planning Drupal Content Types
Content First – Planning Drupal Content Types
 
10 reasons to choose wordpress
10 reasons to choose wordpress10 reasons to choose wordpress
10 reasons to choose wordpress
 
Design, Development and Content: Working Together Harmoniously
Design, Development and Content: Working Together HarmoniouslyDesign, Development and Content: Working Together Harmoniously
Design, Development and Content: Working Together Harmoniously
 
Content strategy on a shoestring budget
Content strategy on a shoestring budgetContent strategy on a shoestring budget
Content strategy on a shoestring budget
 

Recently uploaded

Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxArticle writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
abhinandnam9997
 
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
aagad
 

Recently uploaded (12)

The AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdfThe AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdf
 
The Best AI Powered Software - Intellivid AI Studio
The Best AI Powered Software - Intellivid AI StudioThe Best AI Powered Software - Intellivid AI Studio
The Best AI Powered Software - Intellivid AI Studio
 
Pvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdf
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
 
ER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAEER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAE
 
Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxArticle writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
 
The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyThe Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case Study
 
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
 
How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?
 

Using Content as Design Material