In a half day workshop at EuroIA 2017, Konstantin Weiss and Koen Peters taught how to create, design, and adapt digital places with help of Information Architecture based on the Container Model. These are the slides used in the workshop, primarily meant for the workshop's participants.

1. Rapid Prototyping of Adaptable
Digital Places with Container
Based Information Architecture
Konstantin Weiss, Koen Peters
EuroIA 2017, Stockholm (#euroia17)

2. Intro

3. @2pk_koen
@KonstantinWeiss
Koen Peters
Konstantin Weiss

4. stacking containers…

5. intro & design brief
PART I - creating places
PART II - designing places
PART III - adapting places
wrap-up

6. warming up
find a group name!
(5’)

7. framing
desk research
user research (personas)
design brief
container-based IA
detailed & visual design
…
in the design process…

8. Design brief

9. design brief
You work for a design agency and you are asked to design an online place
where Swedish bikers can buy ebikes and share their biking experiences.o sd

10. Persona 2: Lars
Description
o 39 years old
o married with Laura
o 2 kids (3 and 2 years old)
o in Stockholm
Needs
o groceries
o going on short trips
with kids
o fishing trips
Interests
o outdoors with kids
o fishing
o cafés
o ice hockey

11. Persona 1: Anne
Description
o 27 years old
o single
o just started working after
study
o lives with her parents 20
km away from Stockholm
Needs
o something to get around
o cheap commute to work
o being independent
o not sweating
Interests
o meeting friends
o climbing
o music

12. design brief
o d
o sd

13. Basic
needs
Get
inspired
Buy
Use &
maintain
Share

14. design brief
Main areas and user needs:
o Being inspired (a journal with professionally written articles)
o Buying (an online shop and product catalogue)
o Repairing & maintaining (a help section with practical advice and support)
o Sharing (a community section)o sd

15. Part 1
—
Creating
Places

16. Placemaking

17. Space vs. Place

22. What kind of place is it?

31. Online places

38. Making a place

43. Purpose1.

44. Purpose
Approach
1.
2.

45. Purpose
Approach
Content
1.
2.
3.

46. Arrangement
Purpose
Approach
Content
4.
1.
2.
3.

47. A Bag example

49. user task
context

50. name and picture

51. name and picture
price

52. name and picture
price
description

53. watches
name and picture
price
description

54. name and picture
watches
price
description

55. name and picture
price
description
watches

56. name and picture
price
description
watches
other bags

57. name and picture
price
description
other bags
watches

58. about company
name and picture
price
description
other bags
watches

59. name and picture
price
description
other bags
watches
about company

60. name and picture
price
description
other bags
watches
about company

64. A web page
is a stack of
autonomous
containers
The Container Model

65. Object-Oriented UX

66. Sophia Voychehovski

67. OOUX is putting object design
before procedural action
design. ”
— Sophia Voychehovski
“

68. Containers
e.g. bag
bag picture
price
description
other bags
about company
etc.
e.g. chef
OOUX
name
profile pic
recipes
followers
bio
etc.

69. priority list

70. identifying the objects
o d
o sd

71. identifying the objects
o d
o sd
biker ebike accessory rating experience
advice brand technician writer article

72. o d
o sd
biker
ebike accessory
ratingexperience
advice brandtechnician
writer article

73. Basic
needs
Get
inspired
Buy
Use &
maintain
Share

74. division of work (by theme)sd
o Shop (= buying)
o Community (= sharing)
o Journal (= being inspired)
o Help (= repairing/maintaining)
biker experience
ebike accessory
writer article
advice brand technician
rating

75. list the content for your objects
(1 sticky note per item)
(15’)
Content
element
Text, images, metadata…
Nested
object
Link to another object
Content
element
A
Nested
object B
Content
element
C
Content
element
B
ebike
Nested
object A
etc.

76. prioritization

77. order by priority
(from top to bottom)
(10’)
Content
element
A
Nested
object B
Content
element
C
Content
element
B
ebike
Nested
object A
etc.

78. call to actions

79. Cores and Paths

80. “Websites must be designed from
the inside out, with primary focus
on the core tasks its users need to
accomplish.”
Are Halland, Ida Aalen

82. add the call to actions
(1 sticky note per item)
(15’)
Call to
action
e.g. add to shopping cart…

83. one group presents
(5’)

84. Part 2
—
Designing
Places

85. Containers — some history

92. Malcom McLean Keith Tantlinger

101. The Container Model

102. A web page
is a stack of
autonomous
containers
The Container Model

103. Container Model
Principles 1–4

105. 1. Stacking

109. 2. Placement

113. 3. Repetition

117. 4. Conditions

121. Principles of the Container Model
1. Stacking
2. Position
3. Repetition
4. Conditions

122. Containers as Form

125. Container arrangements

126. Home
F-Collection
R-Collection
ProductDetail
About

127. Home
F-Collection
R-Collection
ProductDetail
About

128. Home
F-Collection
R-Collection
ProductDetail
About

129. Home
F-Collection
R-Collection
ProductDetail
About

130. Home
F-Collection
R-Collection
ProductDetail
About

131. Home
F-Collection
R-Collection
ProductDetail
About
New!
New! New!

132. Home
F-Collection
R-Collection
ProductDetail
About
What
F-Collection
What
F-Collection
What
R-Collection
What
F-Collection
What
R-Collection
What
F
Which
F

133. Home
F-Collection
R-Collection
ProductDetail
About
Where from
Where from
Where from Where from Where from

134. Home
F-Collection
R-Collection
ProductDetail
About
Why
Why
Where from
Where from
Where from Where from Where from

135. Home
F-Collection
R-Collection
ProductDetail
About
New!
What
F-Shopwindow
What
F-Collection
What
R-Shopwindow
Why
Why
Where from Where from
Where
What
F-Shopwindow
Where from
Where from
New!
What
R-Collection
What
F-Product
Which
F
How
How
Where from
New!
How
Who

136. Example: 4. Conditions

140. Places vs. needs

142. projects
contact
samples
news

144. projects
project
details

147. 2016.euroia.org

148. 1
2
3

152. morning of day 3 end of day 3 a few days after

153. now back to our ebike website…

154. group the sticky notes into containers
+
draw the containers
(20’)

155. one group presents
(5’)

156. Part 3
—
Adapting
Places

157. Container Model
Principle 5

158. 5. Reuse

161. Principles of the Container Model
1. Stacking
2. Position
3. Repetition
4. Conditions
5. Reusage

162. Containers as referrers

163. Home
F-Collection
R-Collection
ProductDetail
About
A
A
A

164. Home
F-Collection
R-Collection
ProductDetail
About
A
A
A
B B

165. Home
F-Collection
R-Collection
ProductDetail
About
A
A
A
B B
C C

166. Home
F-Collection
R-Collection
ProductDetail
About
A
A
A
B B
C C
D
D

167. Home
F-Collection
R-Collection
ProductDetail
About
B B
C C

168. Containers as boilerplates

172. 2016.euroia.org

174. Session
info

176. Placemaking, Part II

181. 6. Federation

184. Properties of Federated Containers
Origin
Structure
Skin

185. Origin = URL

186. Skin

187. Structure Skin

188. Federation of containers

191. droplog.org
droplog.org

192. droplog.org
droplog.org

193. Principles of the Container Model
1. Stacking
2. Position
3. Repetition
4. Conditions
5. Reusage
6. Federation

194. design brief (2)
Your client wants to set up a separate site, about rent-an-ebike, with a
different brand, but building on the same infrastructure
Most important page types:
o Find & rent a bike (map)
o Pricing & sign up for the service
o Trouble shooting
o Topical landing pages, e.g. ‘Doing a week trip with your family’

195. design the landing page for
‘doing a week trip with your family’
reuse containers of other groups
adapt where needed
(30’)

196. Persona 2: Lars
Description
o 39 years old
o married with Laura
o 2 kids (3 and 2 years old)
o in Stockholm
Needs
o groceries
o going on short trips
with kids
o fishing trips
Interests
o outdoors with kids
o fishing
o cafés
o ice hockey

197. one group presents
(5’)

198. Icons from the Noun Project
Arved Bünning, Felix Brönnimann,
Pundimon, Rockicon, Satisfactory

199. @2pk_koe
n
@KonstantinWeiss
http://konstantinweiss.com/ and http://containerist.org/ (about the container model)
https://medium.com/@2pk_koen/ (about the euroia.org website)

201. Printouts

202. design brief
Main areas and user needs:
o Buying (an online shop and product catalogue)
o Sharing (a community section)
o Being inspired (a journal with professionally written articles)
o Repairing & maintaining (a help section with practical advice)
Konstantin Weiss, Koen Peters: Rapid Prototyping of Adaptable Digital Places with Container Based Information Architecture – EuroIA Stockholm, 29 September 2017

203. sd
o Shop (= buying)
o Community (= sharing)
o Journal (= being inspired)
o Help (= repairing/maintaining)
biker experience
ebike accessory
writer article
advice brand technician
rating
part I: creating places
Konstantin Weiss, Koen Peters: Rapid Prototyping of Adaptable Digital Places with Container Based Information Architecture – EuroIA Stockholm, 29 September 2017
colour coding
[=object]
[=content
element]
[=call to
action]

204. o d
o sd
biker
ebike accessory
ratingexperience
advice brandtechnician
writer article
Konstantin Weiss, Koen Peters: Rapid Prototyping of Adaptable Digital Places with Container Based Information Architecture – EuroIA Stockholm, 29 September 2017

205. part II: designing places
Group the sticky notes into containers
Divide the tasks within your group and draw the containers
Reuse containers of other groups and adapt where needed
Konstantin Weiss, Koen Peters: Rapid Prototyping of Adaptable Digital Places with Container Based Information Architecture – EuroIA Stockholm, 29 September 2017

206. part III: adapting places
Design the landing page for ‘Doing a week trip with your family’
Konstantin Weiss, Koen Peters: Rapid Prototyping of Adaptable Digital Places with Container Based Information Architecture – EuroIA Stockholm, 29 September 2017

207. design brief (for part III)
Examples of content/functionality:
o Prices for renting ebikes
o Which ebikes are available in this week, and where?
o How to use an ebike you can rent.
o Promoted trips
o …
Konstantin Weiss, Koen Peters: Rapid Prototyping of Adaptable Digital Places with Container Based Information Architecture – EuroIA Stockholm, 29 September 2017

208. Persona 1: Anne
Description
o 27 years old
o single
o just started working
after study
o lives with her
parents 20 km away
from Stockholm
Needs
o something to get around
o cheep commute to work
o being independent
o not sweating
Interests
o meeting friends
o climbing
o music
Konstantin Weiss, Koen Peters: Rapid Prototyping of Adaptable Digital Places with Container Based Information Architecture – EuroIA Stockholm, 29 September 2017

209. Persona 2: Lars
Description
o 39 years old
o married with Laura
o 2 kids (3 and 2 years old)
o in Stockholm
Needs
o groceries
o going on short trips
with kids
o fishing trips
Interests
o outdoors with kids
o fishing
o cafés
o ice hockey
Konstantin Weiss, Koen Peters: Rapid Prototyping of Adaptable Digital Places with Container Based Information Architecture – EuroIA Stockholm, 29 September 2017

210. Basic
needs
Get
inspired
Buy
Use &
maintain
Share
Konstantin Weiss, Koen Peters: Rapid Prototyping of Adaptable Digital Places with Container Based Information Architecture – EuroIA Stockholm, 29 September 2017