SlideShare une entreprise Scribd logo
1  sur  57
Télécharger pour lire hors ligne
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

Contenu connexe

Plus de Carrie Hane

Plus de 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
 

Dernier

💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
nirzagarg
 
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
@Chandigarh #call #Girls 9053900678 @Call #Girls in @Punjab 9053900678
 
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Chandigarh Call girls 9053900678 Call girls in Chandigarh
 
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
@Chandigarh #call #Girls 9053900678 @Call #Girls in @Punjab 9053900678
 
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
 

Dernier (20)

Real Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirtReal Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirt
 
APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53
 
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
 
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
 
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency""Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
 
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
 
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting High Prof...
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting  High Prof...VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting  High Prof...
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting High Prof...
 
20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf
 
Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...
Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...
Pirangut | Call Girls Pune Phone No 8005736733 Elite Escort Service Available...
 
Wadgaon Sheri $ Call Girls Pune 10k @ I'm VIP Independent Escorts Girls 80057...
Wadgaon Sheri $ Call Girls Pune 10k @ I'm VIP Independent Escorts Girls 80057...Wadgaon Sheri $ Call Girls Pune 10k @ I'm VIP Independent Escorts Girls 80057...
Wadgaon Sheri $ Call Girls Pune 10k @ I'm VIP Independent Escorts Girls 80057...
 
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
💚😋 Bilaspur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
 
Trump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts SweatshirtTrump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts Sweatshirt
 
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
 
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
 
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
 
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
 
Nanded City ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready ...
Nanded City ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready ...Nanded City ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready ...
Nanded City ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready ...
 
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
 
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
 
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Himatnagar 7001035870 Whatsapp Number, 24/07 Booking
 

Using Content as Design Material