Presented at ConveyUX Seattle on March 1, 2017.

1. CONTENT FIRST PROTOTYPING
#CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
CONVEY UX
SEATTLE, WA | 1 MARCH, 2017

2. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
CONTENT & DESIGN

3. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
CONTENT & DESIGN

4. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
CONTENT & DESIGN
Content
Semantic Structure
Visual Hierarchy & Style
Interactivity

5. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
CONTENT & DESIGN

6. FIND & REPLACE (& DESPAIR)
#CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE

7. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
FIND & REPLACE

8. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
FIND & REPLACE

9. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
FIND & REPLACEFIND & REPLACE … & DESPAIR

10. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
THREE LEVELS OF PROCESSING
Visceral Behavioral Reflective
Adapted from Don Norman’s Emotional Design
Well learned,
routine operations
Sensitive to experience,
training & education
Rapid judgements
about good & bad,
safe & dangerous

11. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
THREE LEVELS OF PROCESSING
Visceral Behavioral Reflective
+ ?

12. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
A SYSTEM OF WORDS
“A complex system that works is invariably
found to have evolved from a simple system
that works.”
– John Gall

13. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
OPPORTUNITIES
‣ Test and iterate across behavioral & reflective processing
‣ Build simple language systems that work
‣ Encourage clients to work with content earlier in the
design process
‣ Work collaboratively on content structure and design
with team members and clients

14. GOALS & APPROACH
#CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE

15. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GOALS
‣ A flexible, collaborative environment in which to test,
learn and iterate quickly
‣ Built with lightweight, open source resources
‣ That is as transparent as possible, in order to model and
communicate the functioning of the system

16. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
SIMULATION: THE WHITE BOX
“Instead of the inside of the system being
perfectly hidden, it is perfectly revealed – a white
box rather than a black box.”
– Gerald Weinberg

17. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
APPROACH
<section>
<article>
<h1> {{ … }} </h1>
<p> {{ … }} </p>
</article>
</section>
Structure
Content
Course Name
Description Category
Age Range Instructor
Style
h3 {
margin-top: 1rem;
text-transform: uppercase;
font-weight: 500;
&.rule {
border-bottom: solid 1px;
margin-bottom: 1rem;
}
}
Serve

18. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
APPROACH
StructureContent Style Serve

19. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
APPROACH
StructureContent Style Serve
Content Structure Style Serve
XLSX JSON
Images + Assets
Markdown
config.yml
SASS/CSS
Javascript
localserver
JSON
+
Markdown
+
Modular
Includes
+
HTML
Templates
+
Logic
Content Structure Style Serve
XLSX JSON
Images + Assets
Markdown
config.yml
SASS/CSS
Javascript
localserver
JSON
+
Markdown
+
Modular
Includes
+
HTML
Templates
+
Logic

20. CONTENT FIRST PROTOTYPING
IN ACTION
#CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE

21. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER

22. GREEN LAKE COMMUNITY CENTER
#CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE

23. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER
Content

24. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER
Content

25. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER
StructureContent

26. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER
StructureContent

27. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER
StructureContent Style

28. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER
StructureContent Style

29. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER
StructureContent Style Serve

30. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER

31. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER
VS VS

32. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER

33. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER

34. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GREEN LAKE COMMUNITY CENTER

35. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
OPPORTUNITIES
‣ Test and iterate across behavioral & reflective processing
‣ Build simple language systems that work
‣ Encourage clients to work with content earlier in the
design process
‣ Work collaboratively on content structure and design
with team members and clients

36. GETTING STARTED
#CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE

37. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GOALS
‣ A flexible, collaborative environment in which to test,
learn and iterate quickly
‣ Built with lightweight, open source resources
‣ That is as transparent as possible, in order to model and
communicate the functioning of the system

38. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
APPROACH
<section>
<article>
<h1> {{ … }} </h1>
<p> {{ … }} </p>
</article>
</section>
Structure
Content
Course Name
Description Category
Age Range Instructor
Style
h3 {
margin-top: 1rem;
text-transform: uppercase;
font-weight: 500;
&.rule {
border-bottom: solid 1px;
margin-bottom: 1rem;
}
}
Serve

39. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GETTING STARTED
Content First Prototyping Framework
Jekyll
Zurb Foundation

40. #CONTENTFIRST ANDY FITZGERALD | @ANDYBYWIRE
GETTING STARTED

41. andyfitzgeraldconsulting.com
andybywire@gmail.com
@andybywire
THANK YOU!
CONTENT FIRST PROTOTYPING
#CONTENTFIRST