When you want to gather, manage and publish content and display it independently on any user interface and/or target channel you need a system that supports “Content Design and Content UI Mapping”. Content and user interfaces can be planned and assembled modularly and structured in a similar manner — comparable to bricks in a building block system. Content basically runs through three steps until it reaches its recipient: Gathering, management and output. A mapping has to occure at the intersections of these three steps. There's also an extended version with more and detailed slides available. And here's an article on the topic: https://medium.com/@wolframnagel/content-design-and-ui-mapping-a35af8cac3f6#.3ylkxrakf

1. Methods and conceptual considerations for multiscreen-ready
and channel-independent content management according to the
building block principle
Content Design,
UI ArchiteCturE
And Mapping
Introduction / compact
Wolfram Nagel, SETU GmbH (Germany)
All rights reserved.

2. From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295)
Multiscreen

3. Device / Screen
Context of Use
User
Strategies
and Examples
From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295)

4. „The Future of Content Management“ (chapter 6) and „Content Design and UI Architecture“ (chapter 7)
in: Multiscreen UX Design, Morgan Kaufmann (www.multiscreen-ux-design.com)

5. ITERATION
Rough overview. Process depends on project. Phases may overlap, parallel, or change.
› User / Target group / Context
› Recognize topic / Taxonomy
› Output channels and devices
› Content inventory / content design
› Content gathering (systems, users, sources)
› Workflows and interfaces (API))
› UI models / Living styleguide
› Interaction / Prototyping
› Visual design and development
Methodical approch

6. User
Content
Rules UI
Interfaces (API)
Four core areas (+ the user, of course)

7. Content flow
(three-step)
UI MAPPING
Structured content is mapped
for presentation in various target
channels.
content structure mapping
Content from any source is mapped to
defined content structure.
1 2 3
Input manage Output
various sources various channelsContent Hub

8. Bricks and
Modules

12. Colorcodes AND Terms
brick type / templatebrick group
shape / variation

13. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
componentbrick segment TYPE object

14. brick component segment type object
Atomic Design
Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
brick UI typebrick group

15. Source: Brad Frost, http://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces
brick brick group UI type

16. brick
component SEGMENT TYPe

17. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
SEGMENT
component
brick
TYPe

18. instance of type
(concrete specific
web page)

19. 1 2 4 53
brickLEGO bumper bar truck fire truckdriving cab
CONTENT
USER
INTERFACE
ELEMENT COMPONENT TYPE INSTANCE /
OBJECT
SEGMENT
generic / strukture
(MADE from)
concret / specific
(IS)
atomAtomic Design molecule template pageorganism
real content
information object
incl. tone of voice
real page
instance of the template
incl. visual design
content wireframe
article, recipe,
application for leave,
product specification
(semantic structure)
UI template (+IxD)
touchpoint-dependent
and preview-relevant
module group
text section,
paragraph, chapter,
rubric
layout area
(e.g. header with
search form, logo,
navigation)
brick group
(combination of smallest possible elements)
content module
image + caption
quote + author
teaser with headline,
image and description
search form
(consisting of label,
input field and button)
smallest possible
unit / brick
title, subtitle,
description,
reference, date,
image, caption,
metainfo, author
label, input field,
button
correlation
Building block principle
brick Brick group type
target system

20. The essence of
content design is to
create units of content that
can address diverse needs
successfully.
Michael Andrews
http://storyneedle.com/what-is-content-design/

21. Content and
UI Mapping

22. Article description
Image
Long description
Author
Price
Product page of a book on Amazon
Five exemplary bricks are highlighted: Image, Article description, Author, Price, Long description

23. component / Element
Article description
Article description (detail)
Long description
Special information
Image(s)
Edition
Publication date
Reading excerpt (Look inside)
Translator
Audio sample (audio)
From / Author / Manufacturer
Brand label
Provider
Prime / Delivery
Rating
Recensions
Variations
Format / Size
Price
Recommended retail price
Television
X
X
X
X
X
X
X
X
X
X
X
X
Smartphone
X
X
X
X
X
X
X
X
X
X
LEGO
X
X
X
X
X
X
X
X
X
X
Shoes
X
X
X
X
X
X
X
X
X
X
Dress
X
X
X
X
X
X
X
X
X
X
X
Cup
X
X
X
X
X
X
X
X
X
Brick group
Master data
Book specifiations
Provider and Manufacturer
User Generated Content
Dimensions and prices
Content Type „Product“ and Shapes
Content type: Amazon product › Shape: Book › Brick group: Dimensions and prices › Brick: Price | Value: 29,- EUR
Brick
Brick group
Content type PRODUCT Shapes
Book
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X

24. name (1 day ticket)
price
date of purchase
[...]
TICKET (TYPE)
title
date
description
[...]
EVENT
title
date
body
[...]
NEWS ITEM
name
photo
biography
URL
company
[...]
SPEAKER
name (e.g. usability)
description
time
[...]
SESSION
title
abstract
description
start time
duration
[...]
PRESENTATION
name
address
URL
[...]
VENUE
held at
featured in
valid for about
featured in presented by
title
abstract
description
start time
duration
max. attendee
prior knowledge
[...]
WORKSHOP
variation of
Content model„event“
content type
content type
brick
Correlation of content types
group
shape
Own illustration (source: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)

25. Content Structure Mapping
(in the centralized content hub / exemplified)
E-Mail
subject
-
mailtext
attachment
mailing date
sender
attachment
Evernote
title of notice
-
notice text
integrated
last date of change
originator
reference
Twitter
-
tweet text
linked content
attached
date of tweet
account
linked file
Facebook
-
text of post
linked content
attached
date of post
account
linked file
Article
Title / Headline
Short text
Long text
Image
Date
Author
Document

26. title
image (with caption, originator)
dateauthor(s)
short textlong text
Title / Headline
Short text
Long text
Image
Date
Author
Structure

27. Selection of target channels, devices and touchpoints
Example „New York Times“ article
Instapaper
Website
(Smartphone)
E-Mail
(Sharing)
Facebook
(Sharing)
Facebook
(Timeline)
Twitter
(Sharing)
Twitter
(with Summary)
Twitter
(Tweet only)
Smartwatch
(Push Notification)
Smartphone
WhatsApp
(News-Abo)
iPhone App
Desktop
(Website)
Tablet
(Video Content)

28. Touchpoints
foreign
Instapaper Facebook (Desktop)Browser (Safari / iOS)
own
iPhone App

29. Article-Headline
Building block principle Example-ID: CT001.SH001.BG001.BR001
„HTML-Marker“ or identifier for mapping the individual content brick
to the target system-template (Content → UI)
Article › BreakingNews › Text › Headline
Content type: Article ›
Shape: BreakingNews ›
Brick group: Text ›
Brick: Headline
Brick „Headline“

30. component / Element
Title / Headline
Short text
Long text (main text)
Alternative short text
Twitter / teaser text (140 char)
Description / explanation
Logo
Main image
Image gallery
Alternative image
Original image
Video
Audio
Document
Creation date
Last change(s)
Author
Sources
Direct link
News-ID
Web
X
X
X
X
X
X
X
X
X
X
X
X
App
X
X
X
X
X
X
X
X
X
X
X
X
X
Smartwatch
X
X
X
X
X
TV
X
X
X
X
X
X
X
X
X
X
E-Mail
X
X
X
X
X
X
X
Twitter
X
X
X
X
X
X
X
Facebook
X
X
X
X
X
X
X
X
Target systems for „NYT news“
Brick group
Text
Media
Metadata
Brick
Brick group
Content type Target systems

32. LARGE Medium
Small
Correlation and Mapping
(Same content → different presentation)

33. LARGE
Medium
Small
Content bricks
Category | Image | Title | Subtitle | Date | Location | Description
Content type (events)
Correlation and Mapping
(Same Content → Different presentation)

34. LARGE
Bricks
Category | Image | Title | Subtitle | Date | Location | Description
Bricks
Category | Image | Title | Subtitle | Date | Location | Description
Bricks
Category | Image | Title | Subtitle | Date | Location | Description
Content type (events)
Content type (events)
Content type (events)
Medium
Small

35. Correlation and Mapping
(Different content → same presentation)
Article
Headline, Date, Abstract, Category, Image, Author, ...
Teaser (Article)
Event
Title, Date, Location, Category, Image, Time, Admission, ...
Teaser (Event)
Generic structure
Main text, Short text (3x), Image
Teaser component (generic)
Different content types
Identical presentation

36. Correlation and Mapping
(Different content → same presentation)
Teaser (Article)Teaser (Event) Teaser component (generic)
Identical presentation Identical presentation
Article
Headline, Date, Abstract, Category, Image, Author, ...
Event
Title, Date, Location, Category, Image, Time, Admission, ...
Generic structure
Main text, Short text (3x), Image
Different content types

38. SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen)
→ www.setusoft.de

39. Outlook

40. › Standard body copy (text)
› List
› Table
› Chart / Figure / Infographic
› Interactive / application
› ...
Visual presentation of content
Way of presentation is based on basis of decision: such as target system, context of use, meta information, as well as different information
about the user (profile, previous behaviour, previous knowledge, interests, intention, motives, needs)

41. A user interface is not only visual!
Input, output and interaction also via:
› Audio / speech
› Haptics / tangency
› Temperature
› Text only
› ...
Graphical User Interface

42. Information is
translatet into speech.
Apple CarPlay and Siri
Courtesy of Zac Hall (9to5mac) and Ted Kritsonis (mobilesyrup)
https://9to5mac.com/2015/09/22/ios-9-carplay-walkthrough / http://mobilesyrup.com/2015/10/19/apple-carplay-review/

43. Information is outputted
as temperature.
brick
Tado Smart-Thermostat
Heating control via smarthpone app or browser

44. Information is „just“
interchanged by words.
Conversational User Interfaces and Chatbots
Speech recognition and processing /
Communication via automatic and personal chats

45. Thought:
That in the future information can be coherently
outputted on any imaginable channel, you must also
consider the Internet of Things and all other shapes of
interfaces when thinking about UI libraries, styleguides,
content models and mapping.

46. Thought:
That in the future information can be coherently
outputted on any imaginable channel, you must also
consider the tbd and all other shapes of
interfaces when thinking about UI styleguides, content
models and mapping.

47. Thank you!
Slides: msxbook.com/CDUIMcompact
Article: msxbook.com/CDUIMtxt
E-mail: wolfram.nagel@setusoft.de
Twitter: @wolframnagel
Website: wolframnagel.com
SETU: setusoft.de

48. Multiscreen Books
Multiscreen UX Design (2015)
Publisher: Morgan Kaufmann
ISBN: 978-0128027295
Multiscreen Experience Design (2013)
Publisher: digiparden (SETU GmbH)
ISBN: 978-3-9815872-0-3
www.multiscreen-ux-design.com