GWR Digital Smartcard

I worked on this unsolicited redesign inspired by a personal experience with the GWR app. While attempting to purchase a ticket via the app to avoid station queues, I discovered that my ticket had to be collected at the station. I found this to be inconvenient, and thought that the experience could be improved.

My goal was to make it possible for commuters to access tickets digitally, without having to physically collect tickets. My solution was a digital version of the GWR Smartcard, which can be added to smartphone wallets and loaded with tickets via the app.

Continue reading to learn more about this project, or click here to view the prototype.

Table of Contents

The Problem

I recently needed to travel by train from Slough into London during peak morning hours. To avoid busy queues at the station, I tried to purchase my ticket in advance via the GWR app. However, when selecting my ‘ticket delivery’ method, I was presented with three options:

  1. Load to smartcard now
  2. Load to smartcard at station
  3. Collect ticket at station
Ticket Delivery Options

As I didn’t own a Smartcard at the time, my only option was to collect my ticket at the station. That limitation defeated the purpose of using the app to avoid queuing at the station. So, I put my designer’s hat on and decided to investigate.

The Process

Step 1: Research

I took some time to play around with the app, inputting different travel scenarios to test if the ticket delivery options changed. I discovered that there are four ticket delivery options in total, but each has its limitations.

All Ticket Delivery Options

1. Download a mobile ticket

This is what I was looking for! However, research uncovered that this option is only available for some journeys/stations. Mobile tickets require special barcode scanners, which TfL stations don't currently have. That explains why I was not presented with the mobile ticket option when I was trying to purchase my ticket. Otherwise, this would be ideal!

Mobile Ticket

2. Load to Smartcard now

This option allows commuters to load tickets to their Smartcards, and is available for all journeys. Great idea, however, you have to scan your Smartcard with your smartphone to load a ticket. That's like having to scan your debit card when trying to make a payment or transfer through your banking app. Why the extra step?

Load to Smartcard

3. Load to Smartcard at station

This option didn’t make sense to me. If I had a Smartcard, why would I purchase my ticket through the app and then queue to load it at the station? And even if I wanted to do that, I would have to wait 2 hours before I’m able to load my Smartcard. Bizarre! Perhaps there’s some data behind these decisions, but I found it to be the most nonsensical option.

Load at Station

4. Collect ticket at station

This was my only viable option – and it would be the same for any other commuter without a Smartcard. Also, it comes with a caveat… you can only collect a ticket if you are purchasing it at least one hour before travelling. I was well within that time frame, but if I wasn’t, I wouldn’t have been able to purchase my ticket through the app. Bizarre, again!

Collect at Station

The conclusion of my investigation was that the GWR app experience could be improved. I wanted to come up with a more convenient and intuitive way for commuters to purchase and access tickets.

Step 2: Ideation

Idea 1: Mobile Ticket Expansion

The first idea that naturally came to mind was making the mobile ticket delivery option available for TfL journeys. However, it would require substantial investment to install the barcode scanners at TfL stations, meaning it wouldn’t be a feasible idea today. Perhaps an idea for the future!

Idea 2: Digital Smartcard

Then, I thought of a simpler solution. Why not have a digital version of the Smartcard that commuters can add to their smartphone wallets? Much like the mobile tickets, commuters can tap and go using their smartphones and negate having to carry around a paper ticket or physical card. And, you wouldn’t need to scan a physical Smartcard to load a ticket onto it!

Unlike mobile tickets, the Smartcard would not have any compatibility issues due to it utilising NFC/contactless technology – which is already present at all stations. GWR would just need to make software updates to enable the integration of mobile credentials, allowing commuters to add their cards to their mobile wallets. This idea still requires effort, but a lot less than installing barcode scanners at TfL stations... and consequently a lot less costly!

Step 3: Design

1. User Flow

I mapped a user flow to better understand how the digital Smartcard would work, using my own use case (taking a return journey from Slough to London) as an example.

First, I made a high-level list of the steps in the flow:

  1. Set departure station (Slough)
  2. Set arrival station (Paddington)
  3. Set to return journey
  4. Select outward option
  5. Select ticket option
  6. Review order
  7. Sign in to purchase
  8. Pay using Apple Pay
  9. Add Smartcard to wallet

Then, I expanded these steps into a more detailed user flow using FigJam. This also helped me to identify all the screens and states I would need to design to build a prototype.

User Flow

2. Screen Sketches

Before jumping into Figma and designing my prototype, I made a list of all the screens and states in my user flow. I learned that there would be three new screens, and two existing screens would require small edits. So, I proceeded to roughly sketch these screens, making it easier for me to visualise how they would need to appear in my prototype.

1. User Settings Screen

I needed to add a ‘My Smartcard’ link to the settings menu. When tapped, it will take users to the screen where they can view their Smartcard and add it to their wallet. In my opinion, the most suitable location for this was between the existing ‘My tickets’ and ‘My Railcards’ links. 

User Settings Sketch
2. My Smartcard Screen

Next, I sketched the new ‘My Smartcard’ screen. I drew inspiration from similar screens I’ve seen before and kept it simple – the Smartcard and a button. I also sketched the confirmation screen that appears when adding a card to the Apple wallet, and a view of the Smartcard in the wallet itself. These are standard iOS screens, so little creativity was required here.

My Smartcard Sketches
3. Ticket Purchase Successful Screen

Finally, I sketched a tweaked version of the confirmation screen that appears after a ticket has been purchased. As the ticket will be automatically loaded to a Smartcard, I added the small message that appears to notify the user once they have manually loaded a ticket.

Ticket Purchase Successful Sketch

3. Prototype

Now I was ready to create a high-fidelity prototype in Figma. Most of this process involved replicating existing screens and animations from the GWR app. I dissected every little detail and redesigned everything from scratch, in order to make my prototype as realistic as possible. Continue reading to learn more about the final product, or click here to view the prototype.

Below are before and after images of my sketches vs their final designs.

User Settings Sketch vs Screen
My Smartcard Sketch vs Screen
Add Smartcard Sketch vs Screen
Use Smartcard Sketch vs Screen
Ticket Purchase Successful Sketch vs Screen

The Product

The final product is a more seamless, intuitive way for commuters to get instant access to their tickets when purchasing via the GWR app. Click here to view the prototype.

It works very simply:

  1. Purchase your ticket (as you currently do).
  2. Your ticket is automatically loaded to the Smartcard linked to your account (no collection or scanning required).
  3. Add your Smartcard to your smartphone wallet (much like bank/reward cards).
  4. Travel from station to station by tapping in/out using your smartphone (just like a contactless payment).

Nice and easy!

Benefits for commuters:

  • Convenience: No need to join station queues or carry a physical card.
  • Familiar: It works exactly like making a contactless payment using your smartphone.
  • Reliable: Contactless technology is already being utilised every day by commuters.
  • Reduced Risk: No need to worry about losing or damaging a paper ticket/Smartcard.
  • Flexible: Those who prefer existing ticket delivery methods can still continue using those, as this solution is an enhancement, not a replacement.

Benefits for GWR:

  • Improved Commuter Experience: Especially for those commuters short on time. Happy commuters, happy operator!
  • Low Effort: As this is a software update utilising existing hardware infrastructure.
  • Cost Savings: Reduce production/distribution of physical Smartcards over time.

To the great people at GWR... if you are reading this, I strongly urge you to please take this solution seriously. I believe there’s so much upside for something that can be achieved so easily. And I would be more than happy to help!