Edinburgh Tram POS
A self initiated concept project that tackles the flawed experience of buying a tram ticket in Edinburgh.
— —
Role: Product Designer
Existing Design
Concept Design Proposal
I live in Sweden and visit family in the U.K. often.
The trip is long and involves 6 different modes of transport. It sounds worse than it really is. Bring a book, snacks and you’re good.
But there is a step in the journey I can’t ignore any longer.
The Edinburgh Tram Ticket Machine.
Context
The opening screen isn’t terrible. It’s not going to win any design awards but it does the job.
The pain, so much pain.
But the station selection screen hurts my head.
Here’s the thing
The people who use these machines the most, are often the least familiar with the city.
Locals/commuters tend to have monthly passes. So for tourists & rookies, this screen is a spaghetti of names that aren’t relatable. Not just that but there’s so many choices (All blue) to pick from.
Simply put:
Too busy. Lacks context.
My first priority was to simplify the screen.
I wanted to show all the stations in a less intense way.
Early Sketches
Early sketches of possible layout
These concepts could have been fun…
But I’m sure all of us have experienced a kiosk screen before. They’re often slow and glitchy. Adding a big scrolling interaction would likely have been an even more frustrating experience.
Was there a better way to reduce the options?
Every station has a machine on both sides of the track. Which means we can suggest a handful of stations the customer will likely want to go to from the station they’re at.
And these smart suggestions would vary at each station.
i.e. We’re not going to show Edinburgh Airport as a popular station if you’re travelling in the opposite direction.
Being smarter with context
Sketches focused on “popular stations”. Each still has access to search & full map if they need it.
I wanted to get an alternative perspective so I experimented with a handful of AI platforms, including Lovable, Magic Patterns and Stitch.
The results were interesting and it also raised the idea of having popular stations, however the output was average. I imagine with more tokens and time, I could have refined them to be much better.
Involving AI
Ai Design Concepts
I decided to go with the concept of station stops spread out like a deck of cards.
By making the deck curve, it subtly suggested that there was no need to scroll. This is all you need to look at right now.
(I also thought it looked great.)
Making pixel magic
As I mentioned, the station names mean very little to people unfamiliar with the city. The original design has a few small train station icons but they’re easy to miss in a rush.
So I made sure to keep the cards larger providing space for secondary labels and icons.
Icons and Labels
Early HiFi concept. Too Dark.
Brighter Concept. Easier to process.
I reworked the search feature to display results that would update with each letter typed. Assuming the customer didn’t find what they wanted in the popular stops, the first suggested results would be different stops.
Search
The ticket selection screen is less painful on the brain but it still needed work. Particularly the sin of making the “Confirm” button red.
The new design felt much clearer and faster to process. That being said, it only works well for 4 ticket types or less. If there were more, it would likely need a different solution.
Selection
Current Ticket Selection Design
Final Concept Ticket Selection Design
This being a concept project, the only impact I can talk about is the satisfaction I felt in theoretically improving a painful part of my journey. Who knows, one day Edinburgh Trams might see this case study.
The process was incredibly fun and user centric (I was the target user after all). The hypothesis of providing limited dynamic options, based on your station and direction felt like a clever, intuitive solution.
I also enjoyed incorporating AI into the process. With more time and tokens, it will be great tool to help me to move through the design process with greater efficiency.
impact & reflections
More projects
H&M On Demand
Hospital AR Glasses (Coming Soon)