Processes + Patterns

EuroIA presentation by Peter Boersma on "process patterns + design patterns"

1. Peter Boersma, Info.nl EuroIA 2007 1
processes + patterns
best practices on steroids
EuroIA 2007, Barcelona
Peter Boersma, Info.nl

2. Peter Boersma, Info.nl EuroIA 2007 2
processes + patterns
best practices on steroids
EuroIA 2007, Barcelona
Peter Boersma, Info.nl
design design

3. Peter Boersma, Info.nl EuroIA 2007 3
processes + patterns
best practices on steroids
EuroIA 2007, Barcelona
Peter Boersma, Info.nl
patternsdesign

4. Peter Boersma, Info.nl EuroIA 2007 4
design patterns + process patterns
best practices on steroids
EuroIA 2007, Barcelona
Peter Boersma, Info.nl
on codeïne

5. Peter Boersma, Info.nl EuroIA 2007 5
what if we could prove that
a social network site requiresremote evaluation
a card sort improvesbreadcrumbs
an Agile team is bad fora marketing site

6. Peter Boersma, Info.nl EuroIA 2007 6
what if we could prove that
<design pattern> requires<process pattern>
a card sort improvesbreadcrumbs
an Agile team is bad fora marketing site

7. Peter Boersma, Info.nl EuroIA 2007 7
what if we could prove that
<design pattern> requires<process pattern>
<process pattern> improves<design pattern>
an Agile team is bad fora marketing site

8. Peter Boersma, Info.nl EuroIA 2007 8
what if we could prove that
<design pattern> requires<process pattern>
<process pattern> improves<design pattern>
<process pattern> is bad for<design pattern>

9. Peter Boersma, Info.nl EuroIA 2007 9
what if we could combine
<design pattern> with <process pattern>
<process pattern> with <design pattern>

10. Peter Boersma, Info.nl EuroIA 2007 10
what if we could combine
<design patterns> + <process patterns>
best practices on steroids!

11. Peter Boersma, Info.nl EuroIA 2007 11
<design pattern>
•is a general, repeatable solution to a
commonly-occurring problem
•is either proven effective or seen often
enough to be considered worth following
•is not a finished design that can be
transformed directly into code

12. Peter Boersma, Info.nl EuroIA 2007 12
<design pattern> examples
•Shopping cart
(summary of items and prices, add, delete, details,
checkout, )
•Paging mechanism
(number of results, number of pages, current page,
current results, next, previous, first, and last page)
•E-commerce site
(product catalogue, search, user account, shopping cart,
marketing, ordering process, product configurator, trust
information)

13. Peter Boersma, Info.nl EuroIA 2007 13
<design pattern> collections
•a library of patterns
•structured, layered and linked (a pattern language)
Examples
•Martijn van Welie's Patterns in Interaction Design
http://www.welie.com
•Yahoo! Design Pattern Library
http://developer.yahoo.com/ypatterns
•Chris Messina’s screenshot collection at:
http://www.flickr.com/photos/factoryjoe/
•The Design of Sites (ISBN-10 020172149X)
http://www.designofsites.com

14. Peter Boersma, Info.nl EuroIA 2007 14
<design pattern> collections

15. Peter Boersma, Info.nl EuroIA 2007 15
<design pattern> collections

16. Peter Boersma, Info.nl EuroIA 2007 16
<design pattern> collections

17. Peter Boersma, Info.nl EuroIA 2007 17
<design pattern> collections

18. Peter Boersma, Info.nl EuroIA 2007 18
<process pattern>
•describes sequences of general
techniques, tasks, actions
•works at the task, stage or phase level
•consists of reusable building blocks
•allows an organization to tailor a process

19. Peter Boersma, Info.nl EuroIA 2007 19
<process pattern> examples
•team review task
(announce review, distribute deliverable, review with team,
publish report, update & re-distribute deliverable)
•usability evaluation stage
(set goals, determine method, create prototype, create
scenarios, recruit participants (optional), perform test, report
findings)
•inception phase
(gather requirements, write business case, set scope,
identify actors, asses risks, plan, estimate, adapt process)

20. Peter Boersma, Info.nl EuroIA 2007 20
<proces pattern> collections
•a library of patterns
•structured, layered and linked (a pattern language)
Examples
•IconProcess
http://www.iconprocess.com
•Rational Unified Process
http://www-306.ibm.com/software/awdtools/rup/
•Process Patterns - Building Large-Scale Systems Using
Object Technology (ISBN-10: 0521645689)
http://www.ambysoft.com/books/processPatterns.html

21. Peter Boersma, Info.nl EuroIA 2007 21
IconProcess: UX Workflow
“The project team transforms the
Vision or Business Concept for the
application into concrete
requirements, visual designs, and
prototypes through roles, activities
and artifacts defined in the
IconProcess User Experience
discipline.
This discipline's participants analyze
users' needs and then define a
corresponding digital experience
using a mix of technical and creative
skills.”

22. Peter Boersma, Info.nl EuroIA 2007 22
IconProcess: Develop IA
Purpose:
- Organize the website's content and
features into a logical structure of the
whole website
- Define page structures for individual pages or page
types (i.e., templates)
- Develop navigation mechanisms to facilitate users' access to
information and functionality
How to Staff: In early iterations, the Information Architect collaborates with the
Content Manager to create the initial Site Map based on the Business Concept.
As the team clarifies the requirements by working with stakeholders, the Information Architect and the
Requirements Analyst work together or frequently review each other's work to refine the evolving Site Map
and Wireframes as the Requirements Analyst refines the requirements.
The Graphic Designer and User Interface Prototyper give the Information Architect valuable feedback on the Wireframes and
interaction design while applying the visual design to the Wireframes and building the prototypes.
The Information Architect uses that information to further improve the information architecture.

23. Peter Boersma, Info.nl EuroIA 2007 23
<design patterns> + <process patterns>
•are different
•yet similar
•give a feel for the work
•can be linked

24. Peter Boersma, Info.nl EuroIA 2007 24
the patterns are different
•<design patterns>
describe context of use
when is it good for the user (and the business owner) to apply
this pattern?
•<process patterns>
describe context of design
when do what types of designers deliver what (to the business
owner) and how?

25. Peter Boersma, Info.nl EuroIA 2007 25
but the patterns are similar too
•both are driven by “forces”
("users want..." vs. "the project requires...")
•both describe pre-conditions
("the solution requires..." vs. "teams want...“)
•both describe post-conditions
(“this makes users feel…” vs. “this makes sure
teams…”)
•both refer to team skills
(“an IA designs…” vs. “an IA designs…”)

26. Peter Boersma, Info.nl EuroIA 2007 26
patterns give a feel for the work
•<design pattern> collections tell you how
much you have to design from scratch and
how much can be reused
•<process pattern> collections tell you what
activities are necessary and who should
perform them

27. Peter Boersma, Info.nl EuroIA 2007 27
patterns give a feel for the work

28. Peter Boersma, Info.nl EuroIA 2007 28
patterns give a feel for the work

29. Peter Boersma, Info.nl EuroIA 2007 29
in the strategy layer you use
•<design patterns>
experience patterns, site type patterns
•<process patterns>
write business case, calculate ROI, design
thinking patterns, perform user research

30. Peter Boersma, Info.nl EuroIA 2007 30
in the scope layer you use
•<design patterns>
entire collections to see what's already
there, main user concept, mental model
•<process patterns>
run scoping workshops, estimate, plan
releases

31. Peter Boersma, Info.nl EuroIA 2007 31
in the structure layer you use
•<design patterns>
site type, main navigation, search, search
results, index, sitemap, related content,
local navigation, wizards
•<process patterns>
perform requirements workshops, perform
concept test, perform card sort, create
content inventory, create controlled
vocabulary, design reviews

32. Peter Boersma, Info.nl EuroIA 2007 32
in the skeleton layer you use
•<design patterns>
layout, visual hierarchy, tone of voice,
action buttons
•<process patterns>
apply eye tracking, perform usability test

33. Peter Boersma, Info.nl EuroIA 2007 33
in the surface layer you use
•<design patterns>
mood, grid, layout, eye direction
•<process patterns>
user research, create moodboard, create
mockup, create styleguide

34. Peter Boersma, Info.nl EuroIA 2007 34
patterns give a feel for the work

35. Peter Boersma, Info.nl EuroIA 2007 35
the patterns can be linked
•<design patterns> are used/generated
when applying a <process pattern>
Examples: review process, user research
•<process patterns> are useful when
applying a <design pattern>
Example: breadcrumbs

36. Peter Boersma, Info.nl EuroIA 2007 36
<process pattern> : review
Create Deliver

37. Peter Boersma, Info.nl EuroIA 2007 37
<process pattern> : review
Create DeliverEdit

38. Peter Boersma, Info.nl EuroIA 2007 38
<process pattern> : review
Edit Review DeliverCreate

39. Peter Boersma, Info.nl EuroIA 2007 39
<process pattern> : review
Edit Deliver
Review
Prepare
Review
Technical
Review
Team
Review
Client
Review
Project
Review
primary
designer
designer’s
senior
concept/lead
designer
primary
team
reviewers
responsible
for signoff

40. Peter Boersma, Info.nl EuroIA 2007 40
<process pattern> : review
Edit Review DeliverCreate

41. Peter Boersma, Info.nl EuroIA 2007 41
<process pattern> : review
Create Edit
Project
Approach
Review
Technical
Approach
Review
Create
Approach
Review

42. Peter Boersma, Info.nl EuroIA 2007 42
<process pattern> : review
Edit Review DeliverCreate

43. Peter Boersma, Info.nl EuroIA 2007 43
<process pattern> : review
Create Edit
Project
Evaluation
Technical
Evaluation
Review Deliver

44. Peter Boersma, Info.nl EuroIA 2007 44
<process pattern> : review
Edit Review DeliverApproach Evaluate

45. Peter Boersma, Info.nl EuroIA 2007 45
<process pattern> : review
uses/generates <design patterns>
Edit Review DeliverApproach Evaluate
<design patterns>

46. Peter Boersma, Info.nl EuroIA 2007 46
<process pattern> : user research
Set-up
research
Perform
research
Analyse
results
Determine
goals
Promote
results
<design patterns>

47. Peter Boersma, Info.nl EuroIA 2007 47
the patterns are linked
•<design patterns> are used/generated
when applying a <process pattern>
Examples: review process, user research
•<process patterns> are useful when
applying a <design pattern>
Example: breadcrumbs

48. Peter Boersma, Info.nl EuroIA 2007 48
welie.com + <proces patterns>
(warning: vaporware!)

49. Peter Boersma, Info.nl EuroIA 2007 49
welie.com + <proces patterns>

50. Peter Boersma, Info.nl EuroIA 2007 50
welie.com + <proces patterns>

51. Peter Boersma, Info.nl EuroIA 2007 51
what
how
(user research,
card sort)
welie.com + <proces patterns>

52. Peter Boersma, Info.nl EuroIA 2007 52
who
(user
researcher,
information
architect)
welie.com + <proces patterns>

53. Peter Boersma, Info.nl EuroIA 2007 53
the patterns are linked
•<design patterns> are used/generated
when applying a <process pattern>
Examples: review process, user research
•<process patterns> are useful when
applying a <design pattern>
Example: breadcrumbs

54. Peter Boersma, Info.nl EuroIA 2007 54
<design patterns> + <process patterns>
•are different
•yet similar
•give a feel for the work
•can be linked

55. Peter Boersma, Info.nl EuroIA 2007 55
what if we could
•browse <design pattern> collections and
find <process patterns> associated with
them
•browse <process pattern> collections and
find <design patterns> associated with
them
•browse pattern collections to get a feel for
the work in each phase

56. Peter Boersma, Info.nl EuroIA 2007 56
what if we gathered data on
•which <design patterns> work best for
which site types
•which <process patterns> work best for
which team compositions
•which <design patterns> work best with
which <process patterns>
•which design & process pattern
combinations create the best sites

57. Peter Boersma, Info.nl EuroIA 2007 57
then we could
•apply that data when composing:
- designs,
- design processes
- design teams
for all types of sites
•explain to our clients:
- why we design what we design
- why we design how we design
and have statistical proof

58. Peter Boersma, Info.nl EuroIA 2007 58
challenge
“in New York State, architects have developed a database
on roof design and performance.
The database tracks a growing number of the state's
10,000 buildings, recording variables of location, design
conditions, specified components, testing results, and the
history of problems and their solutions.
By correlating design information with performance
problems, the architects identify patterns of success and
failure.”
How Buildings Learn - What happens after they’re built (Steward Brand)

59. Peter Boersma, Info.nl EuroIA 2007 59
challenge
“How interesting it would be to go even deeper in the
analysis: what were the organizational patterns
associated with the roof successes and failures?
Which arrangements can detect crucial errors and correct
them, and which cannot? The answer to that question
could affect all of architecture.”
How Buildings Learn - What happens after they’re built (Steward Brand)

60. Peter Boersma, Info.nl EuroIA 2007 60
challenge
“in Barcelona, Information Architects have developed
a database on infospaces’ design patterns and process
patterns.
The database tracks a growing number of Europe’s
millions of infospaces, recording variables of location,
design conditions, specified components, testing results,
and the history of problems and their solutions.
By correlating design information with performance
problems, the Information Architects identify patterns
of success and failure.”
Adapted from: How Buildings Learn - What happens after they’re built (Steward Brand)

61. Peter Boersma, Info.nl EuroIA 2007 61
challenge
“How interesting it would be to go even deeper in the
analysis: what were the organizational patterns
associated with the infospaces’ successes and
failures?
Which arrangements can detect crucial errors and correct
them, and which cannot? The answer to that question
could affect all of Information Architecture.”
Adapted from: How Buildings Learn - What happens after they’re built (Steward Brand)

62. Peter Boersma, Info.nl EuroIA 2007 62
challenge
I challenge you
to think about ways
to combine
<design patterns> + <process patterns>

63. Peter Boersma, Info.nl EuroIA 2007 63
design patterns + process patterns
best practices on steroids
EuroIA 2007, Barcelona
Peter Boersma, Info.nl