Southern is the railway operator that serves the South East of England, and runs the train services used by several hundred thousand people each day, many of them commuting between the south coast and London.
Until recently, they had a fairly horrific web site, with an ugly and difficult to use ticket booking engine. Then, some months ago, they revamped it. And – astonishingly – made it worse. What used to be painful but manageable is now painful, long-winded and very nearly impossible.
To illustrate, I want to show a couple of ticket-buying attempts I made recently. Then I’m going to share some thoughts on how I think the experience might be improved.
Example 1: Hove to Stafford
Here’s the process I had to go through in trying to book a ticket I needed recently for a client meeting in Stafford.
First up, this is the main web site home page. On the left is the starting point for booking a ticket. This is functionally the same as it has always been (I think the rounded corners may be new…). I’m pretty sure this could be simplified considerably, but let’s run with this for now. As you can see, I’ve entered details of the journey I want – Hove to Stafford, arriving before 10:15am and leaving again after 18:00 on 4th February, for one adult with a Network Railcard.
(You can click the images to see them full-size – I’d suggest doing it in a new browser tab, but up to you.)
Here’s what I see when I click Buy Rail Tickets:
Looks clean enough and it’s pretty clear what I need to do next. Not sure what purpose the map serves – maps are useful when you don’t know how to get somewhere, but trains pretty much solve that problem for you, don’t they…
Anyway, I don’t fancy a 05:54 departure, so let’s see what later trains are available (I click ‘show later trains’):
Ah, that’s better, there’s a 7:20, arriving at 10:22. Minor aside, and not really a complaint (plenty of those to come) – it could have shown me that one up front, in the first list. Sure, I asked to arrive by 10:15 and this is seven minutes after that, but it means I can leave 1 hour and 26 minutes later. With only two options in the original list, a little bit of fuzziness in the logic would save me a click.
Let’s select the 07:20 train:
OK, it’s offering me a single. I need to come back again, but presumably it’s going to offer me return options next – and I know that sometimes buying two singles is cheaper than a return – so let’s go with this and click Continue.
Hmmm, extras. What about my return journey? OK, well maybe that will come next. I see the map has updated to show me which train operators I’ll be using – maybe useful, but you know what, right now I don’t care about that; by all means show me at the end, or let me know if it makes a difference to my ticket price, but right now it’s just a massive waste of screen space – which could be used for those extras I otherwise need to click for…
I’m going to ignore extras for now and just click Continue.
Hang on a minute! What about my return journey? I specifically entered a return date and time right at the beginning. Doesn’t seem to be any option here to go back and add another journey – my only way forward is to go to Payment Details, which I’m not ready to do yet.
Sigh. OK, let’s delete this journey and start over…
Ah, right – it’s got my journey details but for some reason it thinks I want a Single. Let’s correct that and select Return.
Well that’s just great, it seems to have lost the return date and time I put in right at the beginning. OK, let’s enter it again.
I’ve re-entered my return date, so now we’re back on track. Ahem.
Let’s click Find Trains.
Ok, we’re back here. There’s the 07:20 train, so I’ll select that.
That’s more like it. I’m being offered the same Anytime Single as before, but now I can see how to get my return, so I’ll click See Return.
The 18:43 looks ideal, so let’s select that.
Off-Peak Single, perfect. Let’s Continue.
This looks familiar. I suppose I’d better look at seating preferences then. I wonder what would happen to the map if my return journey involves different train operators to the outbound leg?
I’ll select both my journeys and set my preferences.
When I’m done, I click Check.
Well that’s just great. You know, you could have saved me 7 clicks if you’d told me that up front. Let’s Confirm and move on.
Back here again. Let’s click Continue.
This all looks fine, so let’s go to Payment Details.
NB I was already logged in before starting this journey and taking these screengrabs, but if I hadn’t been, I’d have the option here – it’s not mandatory, but if I do login, I can use a saved credit card.
So I select my card and input the CVV number, then click Pay.
Nothing happens. No page update, no refresh, no message… nothing. I’m left wondering whether my transaction has gone through. I check my email, knowing that usually a confirmation comes through within a few seconds. Nothing. Presumably the transaction failed. Hopefully my card hasn’t been charged.
To cut a long story short, I ended up quitting the browser, thinking maybe it was a glitch at my end, and starting over. I eventually discovered the problem – I needed to input more than just my CVV. There are more fields off-screen, below the fold.
I needed to scroll down – but thanks to the unfortunate coincidence of my browser being sized (per my laptop screen) to show the CVV field just above the Pay button, I didn’t know that. There’s nothing to indicate that scrolling is required, that there are more fields out of view – no scroll bar, no ‘more’ link, just what appears to be everything needed to make the purchase – my saved card details and a field for me to enter my CVV.
As it turns out, I need also to input my phone number:
Odd that they’ve managed to pull my email address from my saved profile, but not my phone number, but hey ho.
This journey ended here (in every sense), because in the event, I didn’t buy the ticket. Plans changed and my client arranged the transport – which in itself shows how long this took! (Granted I was screen-grabbing as I went, but it still took far longer than it needed to).
I’m going to continue though with some extracts from a subsequent booking I did make, to illustrate a different set of problems I encountered there.
Example 2: Hove to London
So here’s the home page again, with the form filled out for a different journey, this time Hove to London, using a one-day all zones travelcard (a fairly common requirement, I imagine), arriving before 13:00 and leaving again after 19:00.
And here’s what I get when I click Buy Rail Tickets.
Oh dear. It’s still showing details of a journey I was looking at earlier. I’m guessing some cookies haven’t been cleared, or some form data hasn’t been passed through properly.
So I re-input the journey details.
Only this time, London All Zones Travelcard isn’t in the list…
… so I’ll try London Zones 1-4. That should do it, as I basically need to go up to London, then take a few underground journeys within Zone 1, maybe Zone 2, then back to Hove.
I’ve corrected the dates (same as before, but repeating for both outbound and return legs, a total of twelve extra clicks), and we’re ready to go.
And here’s what happens when I click Find Trains:
Wonderful. I go back and this time let’s try London Terminals (bit of a pain as I really want to include tube travel with my ticket, rather than use my Oyster card, but let’s see what options come up).
I click Find Trains (again).
I did say I wanted to arrive by 13:00. Interesting that here we get a long list of options, starting with arrival over an hour before I need to be there, yet on my earlier search for the trip to Stafford we got just two results, excluding one just seven minutes after my intended arrival…
I’ll scroll down.
The 11:50 looks good, so let’s select that.
Super Off-Peak Day Return for £13, that looks good. But wait, I’d better check the ticket details, as I’m pretty sure I recall something about Super Off-Peaks not being valid before 19:30, or maybe it was 19:15?
Scroll down…
Ah, “show ticket restrictions”, that’s probably what I need. Ok, we’re off to a different site in a new tab…
Best I wade through that lot. Looks like the important bit is that I can’t take a train from London before 19:16 – ok, that’s fine, I can live with that.
Let’s go back to the Southern tab.
Oh hang on, there’s a Super Off-Peak Day Travelcard there, lurking just beneath the recommended option. Only £2 more, and exactly what I need (thanks for the advice Southern, no really). I’ll select that and Continue.
Why on earth do I need to select a return journey when I’ve just selected a Day Travelcard?! I can’t proceed unless I do – but it will make no difference whatsoever to my ticket and there’s no option to reserve seats, so what’s the point? Two more clicks I shouldn’t need to make.
Oh and the map. Hadn’t even looked at it until now, but while I’m noticing it – interesting that, having asked for London Terminals and ended up with a Day Travelcard, it’s only showing London Victoria (as is the list at left) – I know there are trains that go to London Bridge as well, not to mention various other terminals (and the ticket is valid via any route) so why not do something useful and show them on the map so I can see my options?
Extras? No thanks. Another unnecessary click.
This all looks fine. I click Payment Details.
This time I’m not logged in, so I’ll do that now.
Minor glitch – I have my details saved in my keychain, which results in some redundant error messages. No biggie, but not an ideal user experience.
So I’ve logged in, and I now have my stored card details, as before.
Interestingly, this time when I click Pay, the system at least throws an error and auto-scrolls me to the two empty fields I need to fill in (not sure why my email address isn’t included this time – it’s in my profile). Perhaps this is something they’ve added in the last couple of days, or maybe the Javascript just didn’t work on my browser last time, but either way – wouldn’t it just be easier to give the user an indication of further fields below the fold? And disable the Pay button until all required fields are complete? Another click I didn’t need to make.
And finally, I’ve bought my ticket. Nice of them to show everything twice – no wait, FIVE times, in the case of the price – just to make sure I get it… I wonder how many people confuse order reference and collection reference? And as for targeting me with a ‘book a car’ advert – mmm, I just bought a travelcard that allows me to use train, underground and buses in London…
Oh one final thing… that little “Back to Southern Railway website” link at bottom left of every screen… Isn’t that where I already am?!
There are many, many more technical and design glitches throughout the booking process, but I’m sure this is enough to give you the general idea.
So How Would I Improve It?
Of course, it’s easy to criticise, much harder to suggest alternatives. Actually no, in this case it’s pretty damned easy to suggest alternatives. So what would I do?
Well, for starters I’d do some proper user research to identify actual real-world use-cases, user preferences, pain points etc. Maybe they did do that – but I’m not seeing any evidence of it. They seem to have designed this (badly) to suit one use-case only, and ignored all the others.
I wouldn’t want to pre-judge what some proper research would tell us, and I’m also conscious that I have no knowledge of whatever business, technical or political constraints may be going on behind the scenes at Southern (not that they provide any excuse for bad user experience). But as a starter-for-ten, with all the usual caveats of being subject to testing and validation yada yada, I would be looking to:
- Quick win: drop the booking form on the main site home page (given how often the subsequent booking engine forgets the details entered there) and just have the “Buy Rail Tickets” button on its own. (Top tip for Southern customers – submit the form empty…)
- Get rid of the map, or at least make it an optional slide-in or popover.
- Use the map space to show an infographic, probably interactive, of ticket time / route restrictions and corresponding price bands. Because what I really want to know when I buy a ticket, at least for my regular journeys, is either: What ticket gives me flexibility of time and route (and what will it cost)? or How much can I save if I sacrifice flexibility? or What will it cost to get me there by a given time? Choosing a specific service is unlikely to be top priority (although given the state of some of the trains, knowing which operator is running it might be).
- To which end, avoid forcing the user to select a specific train. Perhaps some prefer to do it this way, but given that most of Southern’s customers are likely to be regular travellers, I’d hazard a guess that most know exactly what ticket they want (I need a travelcard, or I need a day return to Victoria, I need a period return to Zone 1, etc). The exact train time is secondary. The only point where time matters is at the threshold between pricing bands.
- Focus on reducing the number of clicks through the journey. Right now (and in the old version to an extent) the user journey appears to have been designed primarily from a business perspective, to ensure the user can’t avoid any opportunity to be sold optional extras. That just shouts “We don’t give a damn about our customers”. It’s perfectly possible to meet business needs while still providing a nice user experience. Compare with the on-station ticket machines which, nasty as they are, at least boil it down to essentially three steps: Where To, When (today or tomorrow), What Ticket…
- A small detail, further to the last point – as it stands, selecting a date requires 6 clicks per journey, so 12 for a return. Perhaps have outbound radio-button options for Today, Tomorrow and Choose Date, followed by the date picker, then for return, have options for Same Day, Next Day and Choose Date. Depending on how you handle the timetable display, the user might not even need to specify times.
- Simplify (and clarify) the ticket selection process. Clunky and ugly as it was, the old site’s approach, with outbound and return ticket options shown side-by-side and a list of available journeys shown below, with those ineligible for a given ticket type being disabled / hidden as that type is selected, was far better. Shame it’s too late to get a screen-grab now.
As a rough direction (and at the risk of putting my head above the parapet only to have it shot off!), I think I’d do something like the wireframe below (for non-designers: a wireframe is a functional outline, akin to an architect’s blueprint; it’s not a visual treatment). Click to enlarge, read on for my rationale.
I toyed with a bunch of other ideas first, from using a pie-chart / clock device to show when different ticket types are valid, to keeping the step-by-step wizard approach but offering a range of starting points to cater to different use-cases – e.g.:
- “I know when I want to travel, let me choose my trains” (the one the current site caters to).
- “I want the cheapest ticket.”
- “I know what ticket type I need, show me when I can travel.”
- “I’m not sure when I’ll be travelling, but I know it will be between this time and that time.”
- “I want a Super Off-Peak Day Return, show me which services I can use it on.”
- “I’m happy to save money by restricting myself to certain train operators.”
- Etc etc.
Ultimately I settled on this approach, because I think it has the best potential to meet all of these needs. Obviously that needs testing and validation. Conceptually, it’s not far off what Southern had before, but I think we can improve on that – it wasn’t the idea that was wrong, more the execution of it.
For what it’s worth, here’s my thinking:
Let’s assume the user wants to go from Brighton to London, out in the morning and back in the afternoon. We divide the display into outbound, on the left, and return on the right (obviously we’d omit the latter if only a one-way journey was requested).
Before we get to the list of available train services, we show the time/operator options, allowing the user to see and choose the level of flexibility they need, if that’s their priority. If they choose to click an option here, let’s say Off-Peak / Not Gatwick Express (as illustrated in the wireframe), then any ineligible services would be greyed out in the list below. We might also at that point insert or pop-up a display of the actual tickets available.
Below, in the list of train services, we use colour to show the operator (though we should probably add logos or some other device also so that we’re not relying on colour alone to differentiate) and, via the columns, indicate which services can be taken for the various ticket types. For each service in each column, we show the cheapest return ticket price; the user can select a service to see an insert or pop-up (I think I’m favouring an insert – fewer clicks, easier to switch choice) of the relevant tickets available and, on choosing one, would see any no-longer-valid services become greyed back (but not disabled – the user still needs to be able to change their mind). Similarly the ticket-types grid above would update to highlight the selected column / valid options.
In the right-hand half of the display, the return options would similarly update / grey-out depending on the user’s outbound choices. My thinking is that for a return journey, we don’t show pricing on the right (because it’s included in the return fares shown at left, and showing both return fares on the left and singles on the right, or even duplicating the return fares, risks confusion). But were the user to select a single ticket for their outbound journey (or perhaps we should provide a mechanic on the left to switch between ‘show cheapest return fares’ and ‘show cheapest single fares’) then we would show single prices at right also. Something for further exploration and user testing.
That’s basically it. Sure, there’s some detail to flesh out (e.g. we might want to include passengers/railcards options, or anything else that affects pricing, at this point, rather than up front, and there are various ways we could display actual tickets), and it would need testing with a range of users to see who it does and doesn’t work for, and where any problems crop up. Obviously I haven’t shown the before and after steps or the different states that would be needed on this screen. It’s just a rough concept. I’m sure it could be refined and improved. I daresay also that others can come up with alternative approaches that may well work better.
My point isn’t to show ‘the solution’ but rather, I hope, to illustrate that there are other ways to do this that are arguably better than the mess they have now, which make better use of screen space, and reduce the number of clicks to get to what you want.
An Aside…
…And a warning for Southern customers. In putting together this wireframe, I did spend half an hour or so going through the list of trains shown in the current booking engine, in order to get a more-or-less realistic set of example services and work out which ticket types were valid for each. I noticed that the current booking engine appears not always to give you the full list of valid tickets for a given train…
For example, on the 10:02 Thameslink service to London Bridge, a Super Off-Peak Single can be had for £17.20 and a Super Off-Peak Day Travelcard for £22.70 (which oddly is the same price as an Off-Peak Day Travelcard…), but there’s no sign of the £17.90 Super Off-Peak Day Return available for the preceding Southern service to London Victoria, which I believe would also be valid on the 10:02 service.
Similarly, for the 10:18 Gatwick Express service, the best value ticket is suggested as a Super Off-Peak Travelcard at £22:70, but there are no options to buy a Super Off-Peak Single or Return fare. Possibly a pricing anomaly rather than a web site glitch, as it looks like the Super Off-Peak Single and Return fares are not valid on Gatwick Express services, while Super Off-Peak Travelcards are.
Perhaps what this demonstrates above all is how complicated train ticket pricing structures are – and hence all the more reason to make the online booking process as easy as possible. To be fair to Southern, they have at least tried to do this by presenting the ‘best value ticket’ first in the list of available options – but you have to select the train you want to travel on before seeing this, which won’t work for everyone – e.g. the “I don’t know exactly which train I’ll take, show me what tickets are valid for a given range of times” use-case.
Finally…
I hope this provides food for thought. Again – I really want to emphasise this – I’m not saying this is the right solution. It would take some proper research, ideation and testing, and a lot more time than I’ve spent on this, to get to that. But I am pretty confident that something along these lines would be more useful to more people more of the time than what they have now.
But above all – Southern, if you do nothing else, please just thoroughly TEST your booking engine, and FIX at least the technical glitches. But better still, do the job properly. You have a service that affects the daily lives of tens, hundreds of thousands of people. The train journeys are miserable enough; you could at least ensure the web site doesn’t make the customer experience even worse.
And Southern, if you’re reading this – you may disagree with what I’ve said. I’ve made quite a few assumptions, I don’t have the inside knowledge of your business that your design team should have, and I haven’t spent all that much time on this. So how about you publish a case study of the process you went through, the design decisions you made and why you made them, the constraints and challenges you faced and how you overcame them? I daresay we could all learn from it.
Update – 15th February
Shortly after posting this article, I emailed a link to it to Charles Horton, CEO of Govia Thameslink Rail (Southern’s parent company). Today I received an encouraging reply on his behalf. Having heard so many stories of people failing to get Southern to listen to problems and resolve issues, I have to admit to being pleasantly surprised, both at the speed and substance of this response – it’s very welcome.
Dear Jon
Thank you for taking the time to contact Charles, although I’m sorry you’ve been drawn to do so. Charles has read your comments and asked me to reply on his behalf.
As you’ve noticed, we’ve recently made numerous changes to our online system. Having listened to customer feedback and in preparation for the development of products that are swiftly becoming aspects of future railway improvements – such as smartphones and smartcards – we decided to construct a brand new online system from scratch as this was the best way to guarantee that we could provide the full spread of services that will be required.
However, due to the magnitude of the task which includes amalgamating systems from multiple train operating companies since Southern Railway merged under the umbrella of Govia Thameslink Railway, it has not been possible to deliver the full potential of the system overnight and some bugs have become apparent that our developers are working hard to address. We’re aware that the current system and especially the booking engine is not performing as well as you should expect.
Although improvements are being progressed, the work is on-going and further developments will continue over the next year. This will culminate at the end of autumn when we plan to launch a brand new website to front our new background system, but I apologise for the inconvenience you’ve been caused in the meantime.
Charles and the rest of the team would like to me to extend their thanks for the time you’ve put in to constructing the webpage which is an invaluable insight into customer experience and will prove incredibly helpful when constructing the final version of our new site.
Thank you again, and I hope our new site will fulfil your requirements.
Kind regards
David Rankin
HQ Customer Relations
Govia Thameslink Railway (GTR)
Let’s see what emerges in the autumn, but at least we now know that they’re aware of the problems and are working to fix them. I can well imagine the technical complexities going on behind the scenes, but I hope they’ll take a proper user-centric approach to the front-end interface, rather than the technically-led approach so many organisations fall into. Doing so will save them money and better serve customers.
This is an excellent piece of work, Jonathan, well done! I hope you also sent it to NR? That map is an absurdity – what could possibly be the use case for it? BTW, have you been a teensy bit unfair at the start of this? It looks from your screengrab that you overlooked checking the “Return Ticket” checkbox (however, if so, the interface should not permit you to enter dates if it was unchecked).
Thanks Bob. Good spot! ;-) It’s possible I did omit to check it – but I shouldn’t have to. It’s a redundant click. Entering a return date should be sufficient to tell the system I want a two-way journey…
An excellent piece of work, well done and thank you. Their booking engine and app have been driving me mad. Whilst Southern are amending their front end, I do hope they consider providing the ability to retrieve your ticket via your smartphone as airlines now do with boarding passes, thus avoiding the need for collection at station.
Meanwhile, if we MUST collect tickets at stations, wouldn’t it be a good idea to offer each user the chance to set up their own collection password, rather than the random generated 8 characters which are a major controbution to queueing at the collection machines? You know what I mean – find glasses, find the bit of paper with the code written down, enter it onto an unfamiliar keyboard where the touch sensitivy isn’t always calibrated correctly – it turns a 20 second job into a 60 second one!
Thanks Alan. Yes, I know exactly what you mean! ;-)
Agreed. At one of my local stations, the key debounce is so bad that most of the time is spent hitting backspce. Give us a qr code that we can hold up to a camera?
I have had exactly the same experience resulting in a return booking with two changes rather than a direct one. The customer services’ department said that I had to buy a new ticket! After pushing them, they said that an administrative fee of £10 could be paid to change the booking. Spoke to a very competent person in the Press Office who was able to help me sort it out. She deserves a gold star! Their site is super UN user friendly.
my problem was pretty much at the get-go, when I couldn’t log in because my old password has been made redundant, and when I did the ‘forgot your password’ bit, I was told I’d been sent an email to re-set, but no such email has arrived, after several attempts. When I contacted Southern customer (dis)services, I was asked if I’d emptied my cache etc, which I suspected to be bs (code for – our website is work in progress but we’re not allowed to say that) but tried it anyway, with predictable lack of result. very annoying, especially as every delay in booking tends to increase the ticket price (anyone for a conspiracy theory?)
trying to book a Zones 1-3 London Travelcard from Brighton, click on option provided on drop-down list, option offered to purchase Off-peak day return, no mention of travelcard. ????
Your wireframe is very, very, very similar to the CrossCountry trains booking engine – take a look.
Not surprisingly, I choose to book through them for all TOCs because it is so easy to see the prices and differences between tickets.