TfL:

TfL:

Journey Planner

Project

mindfulness

This vital service was having technical issues and also made bus journeys hard to find. Also, there was a policy to promote walking and cycling. We needed to rethink the journey planner while still keeping it familiar to regular users. Also, we needed to make the mobile experience faster!


Method

service_toolbox

We did standard but light user research and worked closely with the technical architecture team to define requirements before working through many iterations of the new journey planner. I led the UX and worked closely with a visual designer as we explored multiple options.


Outcome

Elevation

  • Improved the mobile load times.

  • Reduced the calls needed to deliver the information by over 50% to better handle ‘snow days’.

  • Brought bus journeys up a level as a proxy for cheaper travel.

  • Quicker access to walking and cycling options.

  • Improved accessibility.

  • Improved the visual clarity and built in ways to expand transport options.

TFL Journey Planner Results
TFL Journey Planner Results

The design of the new journey planner needed to feel familiar yet we improved every aspect of the visual design, especially mobile devices.

TFL Journey Planner
TFL Journey Planner
TFL Journey Planner

I created initial scenarios, sketches and wireframes and worked with a visual designer as we iterated the design for different scenarios.

TFL Journey Planner
TFL Journey Planner
TFL Journey Planner

Design worked closely with engineers to reduce back end calls and load times and improve accessibility.

This is an unused version of the bus loading animation design for errors! We explored other animations for other forms of transport like river and cycling

We made many improvements to standard user scenarios, such as ensuring the next and previous times were easy to access.

Journey Planner Sketch
Journey Planner Sketch
Journey Planner Sketch

I provided initial sketches for the key scenarios and worked with designers to finalise the final mockups.

Design Portfolio V5.9

Created using Framer

Design Portfolio V5.9

Created using Framer

Design Portfolio V5.9

Created using Framer