Are you designing boxes to be filled up with content or are you creating usable designs for the content? Content is the whole point of the digital products you create. But many teams struggle with how to get content up front. Whatever your role, you need to worry about content – or work with someone who does. When we start with context and give structure to the content, we can create multiple windows into a world. Flip the process. Design structure first. Work in layers to make interface designs that help people make better sense of the information they need. This webinar will provide an introduction to a content-first design process that starts with content, not pixels. Come explore the intersection of information architecture, content strategy, design, and development to create a useful, usable, delightful user experience.

1. 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

2. 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

3. https://www.flickr.com/photos/numberstumper/167209015/in/photostream/

4. @carriehd

5. Not chicken and
an egg situation

6. @carriehd
No
Yes

7. @yourtwitterhandle
How to get visual designers and
content owners to play?

8. How do we design for
any journey and make
the user the hero of
the story?

9. Resource before
representation

10. @carriehd

11. @carriehd
UX UI Dev
Content
Content Last

12. @carriehd
Content
Strategy
UX UI Dev
Development Last

13. Houston, we have
a problem.

14. @carriehd
Content First
Content
Model
Content
Types
Dynamic
Display
Criteria
Dev
UX & UI
Design
Content
Creation
Interface

15. 2. Design the content
3. Create the representation
1. Start with a model
HOW TO DESIGN WITH CONTENT

16. @yourtwitterhandle
1. Start with a model
2
s

17. @yourtwitterhandle
Domain model Content model

18. Map is not the
territory it
represents

19. @carriehd
Domain model for Live Music

20. @carriehd
Content Model for Ticketseller

21. Content structure

22. http://bradfrost.com/blog/post/atomic-web-design/
Atomic Design

23. Stakeholder
alignment

24. Content is design
material

25. @yourtwitterhandle
2. Design the content

26. @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

27. @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

28. @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

29. 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

30. Sample content

31. @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

32. @carriehd
When are their concerts?
Content Type Attribute Example Content
Tour Tour Name
Tour Tour Dates
Performance Date
Venue Venue Name
Venue City, State

33. @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

34. @yourtwitterhandle
Is content a known
quantity?
HELL YES!

35. But what will it
look like?
It doesn’t matter

36. @carriehd
H20

37. @carriehd
Black Bean Soup Moosewood
Alexa, Get me the
recipe for moosewood
black bean soup

38. @yourtwitterhandle
3. Create the
representation(s)

39. But what about
the site map?

40. @carriehd
Resource Index

41. @carriehd

42. @carriehd
Act: Name
Tour: Name
Performance: Date
Venue: Name
Venue: City
Venue: State

43. @yourtwitterhandle
domain.com/content-type/resource-name
ticketseller.com/event/jayz-and-beyonce-otr-ii-arlington-
texas-09-11-2018

44. 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>

45. When you remove all
styles, does your page
still tell a cohesive,
clear story?
The State of UX in 2018
http://uxdesign.cc

46. @carriehd
domain.com/content-type/resource-name
ticketseller.com/event/jayz-and-beyonce-otr-ii-arlington-
texas-09-11-2018

49. @carriehd

50. @carriehd
Structured Content Stack
from Designing Connect Content

51. It is easy to put pixels
together when you’ve
already made
decisions.
Nicole Fenton
Words as Material

52. @yourtwitterhandle
In conclusion…

53. @yourtwitterhandle
Omnichannel
Flexible
Connected content is
Extensible
Scalable

54. @yourtwitterhandle
Real collaboration

55. @carriehd

56. @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

57. @carriehd
THANK YOU
CARRIE HANE
@CARRIEHD
WWW.TANZENCONSULTING.COM