+44 (0) 208 133 8210
Transport for London

User journey Planner

TfL approached J B Cole to create a service-led interactive touchscreen experience for their customers to navigate their way from A-B in the underground network. The concept was to create a screen that was extremely user friendly, aimed at those who are not necessarily 'tech-savvy' and therefore need clear instruction to guide them through.

the brief

TfL tasked us with a UX and tech brief, to create a bespoke journey planning touchscreen kiosk that allowed customers to work out routes from their current location to another location through different transport methods such as the trains, buses and tram networks. We used existing internal API's and scraped data from the website while creating an experience that felt seamless and was robust enough to cater for a large number of potential users and any security issues that brought.

We came up with an organic user experience, wireframes, architecture, design and build within a 4-week period from start to finish.


Our approach

step 01

Speccing & discovering the project

We faced a number of complexities, such as internet connectivity issues, type of touchscreen, target users, simple user interface, showing off the touchscreen capabilities, etc. We began by creating a full architecture and spec document, as well as a detailed breakdown of the system setup in the form of a system sitemap.

step 02

Wireframing the user journeys

We then moved into creating the blueprints for the final system, working from our sitemap and architecture documents. At this stage, we paid close attention to the wording content, structure of the pages and animations that were to be required to highlight key areas of the screen to touch from users who had no prior (or little) experience with touchscreens.

step 03

Creating the designs

Working closely with the head of design, we formulated a series of creative mockups that outlined the visual structure of the system and how we proposed to direct customers through it. Throughout this process, the team developed further understanding of how this would work and we began an iterative design approach working to achieve a tight deadline.

step 04

Finalising the look & feel

Through a series of design-led meetings, we developed and refined the designs and animations to finalise a slick user journey. Alongside this, we created a series of 'inactive' status boxes that prompted the user 'stay on the current screen' when they have been inactive for 45 seconds making sure that all possible issues had been explored before releasing to the public.

step 05


We built the system in PHP (Laravel) with an Angular frontend and hooked in all the API's and CSS from the existing web pages, as well as Google maps data. We also blocked any external links to stop users from accidentally clicking off to external websites, and secured the whole system by carrying out an invasion testing period.

the outcome

We created an extremely user friendly service-led touchscreen journey planning system that enabled customers to access frequently requested information without the need for using up station staff time. The system went on trial in two main Underground stations and is currently waiting to be launched across multiple stations throughout the Underground network.



Start a project with us today
Read our agency partnership approach
Ready to transform your business?
Call us today on 0208 133 8210
Let's kick start change