UI / UX Case study and redesign: Public transit digital ticketing app by BKK
I have been hearing a lot about how people want designers to write about their process and train of thought, not just showcase cool looking designs without explanations. Well, if you prefer cool designs and no article click here! 👀
And for the others, buckle up this is going to be a long ride!
For this redesign case study, I have chosen a pretty fresh application in Hungary made by BKK (a Public transport company), that is supposed to digitize tickets and passes for public transportation.
I have chosen this application because it’s really useful for millions of people (including me) and an amazing task, to showcase how I would improve the UI/UX of it. It’s not bad, I do like it, purchasing tickets are really painless and I have been using it since at least a year at the time of writing this article. This article is NOT ABOUT CRITICISING an app that took a long time for a lot of people to create.
But rather, I would like to showcase here how I would improve on a product, using not just fancy colors and whitespaces (as many people believe designers are operating), but solid design principles and best practices. I hope some of you will agree with my choices in regards to the redesigned product as it would mean that I have done a good job.
Alright, too much text not enough pretty designs! Here is the before and after:
What do you think? Even before you see why I have moved some items around, leave a comment about your gut feeling! Is it “just prettier”, “worse” or do you feel some sense of logic already? Interested to know!
By the way, what’s up with the colour change? This is more UI focused than UX, but interestingly enough the app doesn’t really use the company’s brand color.🤔 The brand’s main color that usually symbolises BKK is purple. I tried to put it back into the app to strengthen their design identity a bit more.
And now let’s see my process:
I. Why?
When starting a redesign project, I usually ask only one question:
What’s the purpose of this app?
This application is for passengers to help them purchase and store their tickets and passes on their smartphones. It should be as good or even more convenient to use, than a traditional paper-based tickets and passes, by making it possible to purchase tickets anywhere, at any time.
Well, in this case the app serves two users. “Passengers” and “Ticket Inspectors”. Interestingly their needs might differ but their user flow is dependent on each other.
Take a look:
By making the passengers flow faster, you also make the ticket inspectors job easier. If the app is easy to use, more people will use it and the company won’t need to spend money on paper-based printed tickets and passes.
If the app does a great job that should speed up the task of the passengers to purchase tickets, get into stations and vehicles, while it would speed up the process of validation for inspectors. Everyone wins!
II. What?
But to achieve these purposes what is actually needed for both parties? The main flows I can imagine that are important for the users and the controllers.
And again:
PASSENGER-side
I need to get into this station / vehicle as fast as possible.
Required: Camera / Location based stations / Search as easy to get to as possible. Fast and easy to reach buttons to minimise the time needed to access them.
INSPECTOR-side
I need to validate (A LOT OF) tickets as fast as possible. For that I either use an animation that is playing on the screen, or I need to scan an Aztec code to validate the pass.
Required: Two types of easy to see screens, one shown by the passengers to enter the stations and one for validation purposes.
The existing animation screen was great as it is. I just streamlined its design to fit more into other parts of the design and made it more reachable to close. I also modified it a bit to shows the station name on top of the screen as well as giving it a huge green “everything is okay” green background to make it even faster to register from further away.
Onto the validation screen. Inspectors need to scan an Aztec code that checks if the pass or ticket is valid so that no screenshot or other manipulated pictures can be just shown to them.
Let’s have a look:
I could find the apps biggest UX weakness at this user flow. For some reason the Aztec code required for validation is hidden behind a “More Info” link. Even after opening that page up the code is rather small and sometimes would require another tap on the code itself to become full sized.
Instead of hiding the code, it is always displayed. Voilá! So, the app either shows the Aztec code needed for validation right after launch by default or an animation that the user started. Reducing unnecessary steps to speed up both parties flow, amazing!
And what happens to the more info screen?
It shows more info! True to its labels meaning, not hiding other purposes like validation.
So, to recap, find a products purpose and starting from there, identify which elements are the most necessary to achieve it. Doing that you will find yourself in the unending questions of…
III. Where? And, again What?
Ah yes, the “final” step. It’s a pity that this step repeats forever after new features and feedbacks. So far, I have shown how to correct some UX errors in the old app, but I didn’t really touch on how I arrived at those navigational patterns and ergonomics. How did I create space for the items I have moved?
Let’s start with the navigation:
1. The top icons such as “Refresh” and “Show older tickets” could be replaced by gestures, as they are not the most prominent features of the app.
Solution: Implementing gestures into the app for certain situations. “Pull (down) to refresh” is a fairly common gesture with smart phone users. While a “Swipe Up” could show older tickets under the latest one. More than one pass? No problem! Swiping left or right would change between many other tickets, even for other types of transportation methods.
This have freed up valuable space in top of the app for some icons, which are currently in the most prominent place of the app, even though they are less-frequently used. So, let’s talk about that bottom navigation!
2. The bottom navigation area contains three items: “My Tickets”, “Purchase” and “Settings”.
I can understand why the company would place these here, as these do seem important at first sight.
Let’s start in reverse. 😬
The “Settings” item is probably the least used part of the app. Its needed only after the initial set-up for payment methods and for the creation of an account.
The “Purchase” item really should be considered as an action, not another area. Obviously, it takes the user to a different part of the app to purchase tickets, but as it is just an action the user will be thrown right back at the main screen after completion. It does need to be in a prominent place like this when the user has no tickets or passes.
And at last, the “My Tickets” item is the sole reason for this app’s existence. While it is definitely the most important part of the app, there is not really another space to “navigate” to, as all other things the user can do in the app are just actions and will redirect right back to this main screen (such as changing a payment method or purchasing a ticket).
Solution: Create an empty state for the app to help the user with the usage of the app, and the purchase of their first ticket or pass. After that those action will not be really needed and are safe to put them on the top of the app.
Also, the app should clearly indicate if your pass is no longer valid, while giving you the same easy to reach shop button AND a really convenient one tap “Repurchase” option to get the exact same pass.
But why remove them at all? Remember the purposes written above? Validation and entering into stations. None of these navigation elements serves those purposes. But by removing them we are left with a nice, usable space on the most ergonomic part of the screen, for the most frequently used features of the app! 🎉
Rework the app where the main attraction (the ticket or pass) is in the center. Again, the green highlights show the features the Passengers need to create a validated ticket, while the magenta highlights show the features that the Inspectors need for validation.
Two separate screens are now one neat main screen. And, on the bottom we could give the passengers all of their options for valid pass creation! ☺️
Now they could easily choose between launching the camera to scan, a location-based selector for stations nearby, or if dark environments and bad GPS signals won’t allow any of them, give them a 3rd new option: an offline search for station names.
Is that bottom bar more useful from the perspective of the aforementioned main purposes of the app? Well let’s check out the process of valid pass (animation) creation for the Passenger’s point of view (easy to reach places with one hand highlighted in green).
Old design:
And there is where ergonomics comes into play! Most of the time people will only have one hand to achieve their goal. If the tap is in the green zone, we are good, that means people hardly need to lift their finger to achieve their tasks.
As you can see, the old design is already pretty good for reaching the first steps of starting any user-flow, but right after that, it does become really difficult to reach the closest stations and after successful entering the closure of the animation screen.
Let’s see our version:
Amazing! With a new selection panel and a well-positioned close button, the users never leave the green zone!
Panels are incredibly useful, aren’t they? Probably are used more and more, because of this exact reason, as phones become larger and larger our fingers lack the yearly updates, so we are stuck with smaller and smaller tap areas that are easy to reach with one hand. 😅
And the same ergonomics also apply to *drumroll*
Well… to settings. It’s starting icon is on the top of the app now, but considering it’s the least frequently used part of the app, I would say that’s okay. What do you think? Leave your feedback in the comments section!
And here we are! Thanks for sticking by this long in this little case study!
I hope this little article helped people understand my process and shown how UI / UX professionals work. One might use fancy images, cool gradients and whitespaces for miles, but in all seriousness to create something truly better requires a great deal of ergonomics, psychology and logic. 😊
Fancy images could be found at my Behance Post:
Other ideas for improvement:
The application needs to load a considerable amount of time until usable. Because of that the application seems unresponsive for several seconds, even with great internet connection. This actually might be the most important thing that needs improvement before any UI / UX work.
As this is a really useful app, where its immediately needed, I would also suggest the creation of widgets for both iOS (as of iOS 14+) and Android, allowing users to launch it from the lock screen / home instantly.
The app could use a built-in validation system. The same animation system, that already validates the app for a station, could be used as a general validation for controllers so they would not need to carry a QR reader with them, saving the company a lot of headache from maintaining and buying those devices.
Most people have very limited internet packages and, more than anywhere else, in subways and in many stations the strength of the connection is a huge issue. The application most definitely needs an offline mode that could be instantly launched and validated.
With small modification the app could be used for multiple types of passes and tickets and maintaining it would be a fraction of the cost compared to the maintenance of lots of transportation apps and webapps.
