An idea that rippled across the web in 2013, atomic design has changed the way designers and developers think and work. College and university sites are now adopting modular design systems. But what does that mean for the content that goes in them? This presentation for the WP Campus 2020 conference shows how design systems impact the authoring process, points out common pain points for migrating existing content, and gives practical advice to prepare stakeholders for making the shift from WYSIWYGs to structured component libraries.

1. www.insidenewcity.com
Creating content in a
pattern library

2. www.insidenewcity.com
What we’ll cover
● What is a pattern library?
● How they affect the authoring process
● Issues for migrating existing content
● How to prepare for the switch

3. www.insidenewcity.com

4. www.insidenewcity.com
Atomic Design
Atomic Design is an organization method for design systems.
Atoms Molecules Organisms Templates Pages

5. www.insidenewcity.com
Atoms >> molecules >> organisms
Atoms Molecule
Organism

6. www.insidenewcity.com

7. www.insidenewcity.com

8. www.insidenewcity.comwww.insidenewcity.com
Powerful tool
for building
pages
Messaging
Routing
Routing + Context
Routing + Context
Promoting/Educating

9. www.insidenewcity.com
So, what does this mean for
CMS users?

10. www.insidenewcity.com
Traditional CMS
● Developer makes templates, author fills in
● No flexibility (unless you can code)
● Not optimized for responsive
● Easy to write/familiar format

11. www.insidenewcity.com
Pattern libary CMS
● Control layout from inside the CMS
● Extremely flexible templates
● Requires different skills for authors

12. www.insidenewcity.com

13. www.insidenewcity.com

14. www.insidenewcity.com

15. www.insidenewcity.com

16. www.insidenewcity.com
What does it mean for
writers?

17. www.insidenewcity.com
Structured Formats
in Writing
● Press release
● Academic journal article
● Bibliography
● Newsletter
● Feature story

18. www.insidenewcity.com
Structured Formats
in Web Design
● Intro paragraphs
● Routing blocks
● Featured story panels
● Link lists
● Teasers

19. www.insidenewcity.com
Structured Content
A
B
C
D
G
E
F
A
B
C
D
E
F
G

20. www.insidenewcity.com

21. www.insidenewcity.com

22. www.insidenewcity.com
Layout becomes a tool for writing

23. www.insidenewcity.com
Problems for migrating
existing content

24. www.insidenewcity.com

25. www.insidenewcity.com
Text wraps

26. www.insidenewcity.com
Text wraps

27. www.insidenewcity.com
Images move and resize to fit containers

28. www.insidenewcity.com
Story time

29. www.insidenewcity.com

30. www.insidenewcity.com

31. www.insidenewcity.com

32. www.insidenewcity.com

33. www.insidenewcity.com

34. www.insidenewcity.com

35. www.insidenewcity.com
Pattern libraries require a new skill set
● Writing to fit
● Prioritizing items on a page
● Thinking more about what the user wants to know/what they’re trying to do
● Letting go of pixel-perfect
● Content as a web of dependencies that create a full experience

36. www.insidenewcity.com
Preparing for the switch
from pages to patterns

37. www.insidenewcity.com
1. Identify key pages
● User goals + internal goals
● Mix of routing and
informational content
● ID stakeholders

38. www.insidenewcity.com

39. www.insidenewcity.com
2. Analyze the goals
● What’s the purpose of this
page?
● What’s it doing in context of
the site architecture?
● What do users want to
know/do here?
● Where do we want them to
go next?

40. www.insidenewcity.com
Core Model Exercise

41. www.insidenewcity.com
3. Translate content
to components

42. www.insidenewcity.com
Pattern Prototyping Exercise

43. www.insidenewcity.com

44. www.insidenewcity.com
4. Develop new
standards
● Editorial style and branding
● Usage guidelines for
components
● CMS guardrails

45. www.insidenewcity.com
5. Train and share
● Build relationships
● Offer regular trainings
● Page reviews and feedback
● Listserv for library updates,
usage tips

46. www.insidenewcity.com
How do you get good at
building pages?

47. www.insidenewcity.com
Get to know your toolbox

48. www.insidenewcity.com
With great flexibility
comes great responsibility

49. www.insidenewcity.com
Links!
NewCity Toolkit: Core Model Workshop
https://www.insidenewcity.com/toolkit/core-content-modeling
NewCity Toolkit: Paper Prototyping Workshop
https://www.insidenewcity.com/toolkit/paper-cms-pattern-prototyping
UIE: Usability Testing with Paper Prototypes
https://aycl.uie.com/virtual_seminars/paper_prototyping

50. www.insidenewcity.com
Please share your feedback!
Rachel DeLauder
rachel@insidenewcity.com
@rdelaude
www.insidenewcity.com/contact