Designing an app to help move over 5.6 million journeys a day across a Greater Manchester.

www.tfgm.com 

Google app store

Working with Transport for Greater Manchester (TfGM) to deliver the new Bee Network mobile app.

The Bee Network is Manchester’s answer to a London style joined up transit system which consists of Bus, Tram and Trains throughout the region in a bid to help cap fares and increase mobility across the region.

The app would serve as the visual ‘curtain raiser’ for the Bee Network launch and existing mobile retail apps for TfGM.

A firm deadline of September 2023 was put in place by the Mayor, Andy Burnham, for when Greater Manchester would franchise the bus services around the region and be able to realise its ambitions of being the first local authority outside of London to have a truly joined up travel network.

To realise these ambitions TfGM needed a way for customers to be able to buy tickets from an online facility, which would be the app in order to compliment the already existing bricks and mortar stores across the region.

The app would need as a minimum viable product:

• Ticketing - for users to purchase their travel

• Search - to find the nearest bee network travel option

• Travel information - real time information at each bus or tram stop and train stations

The work was high profile and highly scrutinised as other UK devolved authorities wanted to repeat the successes of the transformation.

I was a UX/UI Designer for TfGM Bee Network app, leading the design as the sole designer for 6 months, before directing the supplier Softwire who were nominated to help develop the app. As part of my role I helped to complete the following:

• Developing the new ‘Colony Design system 2.0’ to replace the previous component library example 

• User-testing online and pop-up testing across the TfGM network

• Design proof of concept for the next 9 months consisting of features for Live departures, disruptions, journey planning and the retail features of the app

• Applying UCD best practices working in Agile and utilising a range of techniques to improve the experience for users and sell the vision to the wider business

Our approach was very much driven by the political will of the Mayor of Manchester to realise the possibilities of a joined up network across the region.

This would look to re-franchise the bus network in Greater Manchester and allow greater control over more affordable trips for the residents. 

In order to achieve the ambitious targets, certain items needed to be designed and developed so that TfGm customers could use the app and the network from day 1 of the launch.

I initially focussed on search (for stops and departures), ticketing sales and travel times.

Once the concept for these were created and designs tested, focus was also shifted to look at registration, sign-in, profiles and other areas. 

This was done through:

• Agile working with development and wider teams - getting in put from stakeholders across the organisation including branding, print and web design, ticketing, operations and many more. Getting information early and circulating ideas fro review allowed us to make decisions early and hit key deadlines.

• User research both remote and in-person in the context with customers allowed us to gain valuable insights in to the needs and frustrations of users.

• Design creation was done rapidly in Figma. Prototype design were often created in greyscale wireframes before being refined further and finalised. Discussions with developers and the project team throughout and during the handover helped to remove design ambiguities.

Strategic planning was initially created using Mural boards driven by the Product Owner with myself, a Business Analyst and occasional input from other stakeholders. 

This helped as a way to plan designs and give a scope for the information architecture.

The sections and new features were then refined later when added. 

Different versions from 1 to 4 represented timings for when they needed to be developed by for live use.

I was heavily involved in the user research which helped to create our personas, inform designs and create user journeys.

We conducted user research via two methods:

• Remote testing  - we used Facebook Ads to find the the perfect user types and hosted sessions online

• Guerrilla research in and around Greater Manchester to go out and speak to customers in-situ

• Accessibility panel - which was made up of partners from Henshaws and other charities which selflessly leant their time to input on design decisions for visually impaired or neurodivergent users

Personas were created and validated using existing resources and user research. 

Quantitative data used form ticketing including purchase behaviours across all modes of transport was used to help inform customer habits and movements.

Qualitative research conducted alongside in-house user research teams 

Accessibility partners from local and national groups also helped to validated designs and proposals across both digital and print.

The design and research team conducted numerous rounds of testing for each of the different sections of the app. 

In-person guerilla testing was conducted across greater Manchester. We visited tram platforms, bus stops and interchanges, train stations and even onboard travel.  

This is an example report created in collaboration with Softwire from our user testing. 

The design work focussed on:

• Colony 2.0 design system update

• Analysis of competitors to assess best in class in the market

• User journey creation 

• Low and High fidelity designs in Figma

• Collaborating with print and online design teams

• Conducting and using user research to infrom and iterate designs

Alongside the web and print design teams, 

the Colony 2.0 design system was created in Figma to supersede the existing library which required updating with considerations for app design.

In order to assess what other competitors were doing I reviewed hundreds of transport apps from across the world.

We wanted to know what did good look like in this area and how other transit authorities were trying to solve similar problems 

Specifically those which helped to serve multiple joined up forms of transport for large urban areas.

Examples are from TfL, Moovit, Transit, Citymapper and NYC Subway, notable mentions for design inspiration were also Bus times London, MMV Munich, HSL Helsinki as well as many, many more. 

Some of the early designs allowed us to quickly test ideas and get good feedback on potential concepts. 

Low fidelity wireframes with greyscale colours were often used to remove the emotion or persuasion of colours. 

Then slowly developed and refine to higher fidelity designs with the assistance and feedback of users through testing.

Following feedback from users through testing, designs were iterated and refined as mentioned, with some of the latter design for the app after much scrutiny below:  

The Bee Network app is learning all the time through feedback in the app and via relevant channels such as the app store.

As part of any Agile team, the design of the app will develop as knowledge improves, but it is already having a great impact with lots of work still to be done, which is exciting for the team.  

Technical, operational and infrastructure changes will and have played a part in the success of the app so far. As time moves on and these elements imprive, so will the app further.

A mobile app for the UK's only authority-owned transport network outside of London, the TfGM app now supports over 140,000 users a day and has nearly 1 million downloads across the iOS and Android app stores.