Slide deck of a talk at HCID Open Day 2015 at City University.

1. Patterns and projects
Jonathan Culling
April 2015

2. A confession...
Image source: www.crossnews.am

3. Image sources: theatlantic.com & rickety.us
However...

4. Why?
Image source: australianperfumejunkies.com

5. What I’ll cover
• TfL Online
• Pattern library work in progress
• Some other projects:
• Plan a Journey updates
• Online advertising on tfl.gov.uk
• Barclays  Santander cycle hire
• Electronic status update boards
5

6. TfL’s purpose
“To keep London moving, working and growing and
to make life in London better”.
TfL Online’s vision
“To deliver digital experiences as good as the best
retail and service organisations”.

7. Awards

8. TfL Online
Image source: australianperfumejunkies.com

9. Why we need a pattern library...

10. Why does TfL need a
pattern library?
10
To promote the
re-use of code,
assets and
knowledge
To control
what goes live
on the site
To give third
parties a
definitive guide
to follow
To speed up
production
To ensure
consistency in
design and
interaction To communicate our
decision-making to
stakeholders and the
outside world
To provide a
definitive guide of
previous examples
and rationale

11. Audiences for the pattern library
11
Primary:
• UXers
• Visual designers
• Developers
Secondary:
• Content editors
• CMS architects
• RMs and internal clients
• External partners

12. How much time will it save?
12
Weeks every
year
Half the time I
spend on
projects
It would save
developers an
absurd amount
of time
It saved us 2
weeks on a 12
week project
A third of my
time, possibly
more.
Half a day
instead of 3 to 4
days
For anyone [new or]
external, it would
save about half their
time

13. Gov.uk MailChimp
Succinct guideline information, including
dos and don’ts.
Has a very strong structure.
The discussion threads on Hackpad are
good, and it’s probably best that they are
in a separate location.
Well organised, with good navigation
It’s “stakeholder-ready”
Pattern, code and notes are displayed
together

14. Governance model
14

15. 15
Maintenance
process

16. Automatic updates(1/3)
16
By using component IDs, we can update every instance of a pattern automatically
1) Each pattern in the pattern
library is linked to all live
instances via a component ID.

17. Automatic updates(2/3)
17
By using component IDs, we can update every instance of a pattern automatically
2) When the pattern is updated in
the live environment, all live
instances are updated.
Instances in RedDot CMS are
updated manually.

18. Automatic updates(3/3)
18
By using component IDs, we can update every instance of a pattern automatically
3) When a pattern no longer has
any live instances, an alert is
sent so that the pattern can be
investigated and potentially
retired.

19. Workshop co-creation
Prioritise requirements and sketch a pattern page
1) Look at the
requirements list and
add more requirements
if you want.
2) Use your £1500 to vote
for what you think are
the most important
page requirements.
You can put all your
money on one or spread
it around!
3) In 2 teams, sketch a
wireframe of what your
ideal pattern library page
would look like. Try to
include all of the highest
priority requirements!
When you’ve finished,
please present to the
group.
19

20. Pattern page sketches
20

21. Project approach
21
Project
by
project
Proof of
concept
MVP
•Technical feasibility
•Pattern audit and prioritisation
•Selection of patterns for PoC
and MVP
•Pattern library taxonomy
•Page UX and visual design
•Proof of concept build
•Test and refine
•Build out all agreed patterns on
site
•Test and refine
•Cascade documented patterns
into site
•First public release
•Add or update new patterns as
they are needed
Time
saved
No. of patterns
PoC MVP

22. And they’re off!

23. Plan a Journey updates

27. Online advertising on tfl.gov.uk

30. Barclays  Santander cycle hire

33. Electronic status update boards

36. Next year?
Image source: australianperfumejunkies.com

37. Thank you
JonathanCulling@tfl.gov.uk @UncleJ