TfL: patterns and projects
1 like708 views
This document discusses Transport for London's (TfL) efforts to create a pattern library to promote consistency and reuse across its digital projects. It outlines TfL's purposes and visions. The author explains why TfL needs a pattern library, including to promote reuse, control what goes live, provide guidance to third parties, and speed up production. Audiences for the library are identified. Examples from Gov.uk and MailChimp pattern libraries are briefly described. The document then covers governance, maintenance processes, automatic updates using component IDs, and workshops to prioritize requirements and design pattern pages. Upcoming TfL projects that could benefit from the pattern library are also listed.
![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](https://image.slidesharecdn.com/patternsandprojectsv4-150505112135-conversion-gate02/85/TfL-patterns-and-projects-12-320.jpg)
TfL: patterns and projects
- 1. Patterns and projects Jonathan Culling April 2015
- 2. A confession... Image source: www.crossnews.am
- 3. Image sources: theatlantic.com & rickety.us However...
- 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
- 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
- 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