Mango

A all purpose ticketing solution designed for a multi operator bus group

Back in early 2020 we were approached by the local bus company trentbarton, who were in the progress of upgrading their buses from smart card to an app. We instantly jumped at the chance to work on something customer facing and began researching as many options as we could. Working closely with the development team, myself and the senior designer spent a few weeks designing and prototyping the bare bones of the app, primarily focusing on 3 key areas. These areas were the ticket, travel history and account management.

Each section was divided up in to sub groups and split between the UX team to design. The app is part of a system to offer the best price travel for users while also offering security for the operators. Using a back office system we are able to register taps, create journeys and charge the correct amount for the travel. Because we are using a modular system, we can easily adapt the system to work for any mode of transport from buses, to electric scooters.

Sketches

As mentioned in the intro we spent our initial few weeks absorbing as much information as we could, everything from travel apps to how people use buses. From this, we began putting pencil to paper and started forming the bones of the app. The sketches below are just a small sample of our inital thoughts.

Payment Cards

These sketches were the original idea for the how we would handle payment cards, there were many iterations.

Price Capping

An early idea was visualising the state that a users caps were at. Inspired by the Apple Watch movement rings.

Concessions

To ensure every customer can get the best price, we investigated possible options for applying for discounts.

Designs

Next was the most obvious step, we began adding details, iterating our ideas and testing prototypes. Due the time restraints on this project the UX team worked in a compartmentalised state and focused on smaller sections at a time, this was however beneficial as we had just made the leap from Sketch to Figma, which reduced the inconstancies in our designs.
Several phones showing different screens from the mango app.

Ticket

The ticket screen was the from the start the most important part of the app. It’s the key feature and most used part of the app. To ensure we started on the right foot, we were able to acquire one of the ticket machines trentbarton are using on their buses, which allowed us to adjust the design and positioning of the QR on the fly. There were several other requirements for this screen that were needed and we had to balance all the features. A quick break down of these include: the concession banner, quick pay and account balance.

Each of these features are designed to enable quicker use of the app for both the use and the bus driver. For the user being able to see their balance and quickly add funds to their account from a saved payment card was key to help reduce the stress at a the bus stop. For the driver the concessions banner and balance are both useful for trying to confirm if the person is eligible for using the bus. We tested this section on internal staff before taking a prototype to the customer and asking them to get feedback from their focus groups.

Travel History

Travel history is an important part for understanding why you have been charged what you have. We quickly decided to show only full journeys, the thought was that it would help reduce the confusion over how a user is charged. We wanted to ensure the screen would be easy to read and accessible to all, and to this end we tried to ensure all the elements and colours would meet WCAG standards.
Mock up of 2 phones displaying different states of the travel history.
Illustrative sad looking mango.

Challenges

I want to be honest right from the start here, the apps score on the stores is not very high. There are several reasons for this and some were due to things we missed as a team. Nobody wants to admit the project they put everything into didn't have reception you expected, but it happens and all you can do it learn from it.

One big problem that was out of our control was that both us and the customer were not prepared for the resistance to the app, all the research had be pointing to this being a good thing that users wanted. But from reading the App Store reviews it became clear there are areas that the old system provided that we have no been able to replicate in the current app.

Other challenges have been due to time constraints and low dev team numbers. We designed & developed this app within 3 months and then have spent the next 9 months improving it. While it would have been preferable to have the numbers the other way round, the team did incredible work under incredible pressure to produce and improve this offering.