Post on 07-Aug-2015
Patterns and projects Jonathan Culling
April 2015
A confession...
Image source: www.crossnews.am
Image sources: theatlantic.com & rickety.us
However...
Why?
Image source: australianperfumejunkies.com
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
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”.
Awards
TfL Online
Image source: australianperfumejunkies.com
Why we need a pattern library...
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
Audiences for the pattern library
11
Primary:
• UXers
• Visual designers
• Developers
Secondary:
• Content editors
• CMS architects
• RMs and internal clients
• External partners
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
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
Governance model
14
15
Maintenance process
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.
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.
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.
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
Pattern page sketches
20
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
And they’re off!
Plan a Journey updates
Barclays Santander cycle hire
Electronic status update boards
Next year?
Image source: australianperfumejunkies.com
Thank you JonathanCulling@tfl.gov.uk @UncleJ