UI, Research, Prototyping, Testing
Figma, InVision, Optimal Workshop, UserBit
Complete redesign of the MÁV app, based on user feedback as well as primary and secondary research data, interviews, and insights
Create a wireframe, prioritize features, test prototypes with users
iOS 13 and iPhone 11 Pro
Persona, wireframe, clickable prototype, hi-fi screens
Disclaimer: I do not have a contractual relationship with MÁV-START, and the recommendations in the case study below reflect my professional opinion only. Unlike the designers working at MÁV-START, I do not have access to all the research and analysis data that had impacted the development of the current version of the MÁV app. Consequently, this case study cannot be considered complete, nor do I claim that MÁV-START should accept the recommendations described below in all circumstances.
I've always loved traveling. I had my first train journey when I was five years old, as far back as I can remember. Later as a student, I traveled weekly.
The Hungarian State Railways (MÁV) experience meant this for a very long time:
Then things slowly started to change to their advantage; MÁV started to modernize. They seem to have been paying more attention to the passenger experience for a while.
Today, trains are clean, have free Wi-Fi, and offer an electric outlet for work.
At MÁV, online ticket sales initially took place on the Elvira platform. It has a unique, long history, which I wouldn't go into details now, but it's worth knowing that in 2004 it was one of the first Hungarian websites where you could shop online.
Since then, a lot of water has flowed down the Danube, and MÁV may have felt the need for change because time has passed over Elvira.
Not only is the user interface outdated, but unfortunately, in 2020, Elvira still cannot be appropriately used on a mobile device. The website is not responsive, and there is no mobile-optimized version, which is unfortunate because, with the gradual increase in the number of mobile users, at least half of the people now browse the web from mobile.
In response, MÁV came out in 2018 with an Android and an iOS application whose undisguised goal is Elvira's deposition in the world of mobile train tickets.
Through the apps, passengers purchased 'only' 880,000 tickets in 2018, but by the end of 2019, the number of tickets purchased on mobile had reached 4.6 million. Add to this the fact that the registered user base of the MÁV app exceeded 283,000 in February 2020, which is a considerable increase.
It is no coincidence that, according to the statement of the CEO of MÁV-Start, the company's goal is now to reach 60 percent in e-ticket sales by mid-2021.
Spectacular development and admirable ambition, but user opinions about the MÁV app are, to put it mildly, divisive.
The basic idea of train tickets purchased on a mobile device is good and useful. Still, the checkout flow—especially concerning train search and selection of passenger discounts—was not thought through by the app's creators.
And this, coupled with negative user feedback, is a straight path to revenue loss, rising opportunity costs, wasted resources, growing passenger dissatisfaction, and persistent brand erosion.
I also ran into a usability problem in February 2020 during a Budapest-Miskolc train journey. I think even if I hadn't used a similar app before, I should still be able to buy a train ticket in 10 minutes on my smartphone.
Unfortunately, since it did not work out for the first time, I decided to redesign the MÁV app from scratch (precisely this one).
Since I'm geared towards UX since early 2020, I wanted to see what value, as a designer, I can add to a product with a large user base.
Finally, with my recommendations below, I would like to help a vulnerable state-owned company create a high quality, valuable, and useful mobile app that will generate more profit for the company and delight passengers.
In this case study, we will cover the following topics:
In retrospect, one of the most useful steps in the entire project was to define design guidelines.
These guidelines helped a lot in keeping focus and deadlines, prioritizing, documenting the project, and making day-to-day decisions (e.g., choosing from many right solutions, deciding what to include in a prototype, determining whether the function or form is more important for the UI).
At the beginning of the project, I defined the following design guidelines:
Then I interviewed 24 users to map their travel and ticket-buying habits and conducted usability tests on the MÁV app with 15 users.
With the interviews, I had the following two main goals:
Competitive analysis in Miro
And then interviews, research of similar mobile apps (Omio, Trainline, SBB Mobile, DB Navigator, Oui.SNCF, SJ, Rail Europe), and more than 15,000 user reviews in the App Store and Google Play revealed that passengers expect the following features in a train ticketing application:
The most significant issues I had to address during the redesign
The most requested features based on the interviews
It seemed feasible (at least from a developer's point of view). However, two things ruined the original concept:
These underlying problems were the following:
Note: The usability testing was not free of technical issues because I didn't know how to record the interview and the test to see what the user was doing on the screen.
Eventually, I solved this by taking an iPhone, giving the user the MÁV app downloaded from the App Store, and recording what the user said and did with the iOS's built-in screen recording feature.
After analyzing the research data, the following two personas represented the users of the MÁV app:
The next dilemma was how to include all the content (train information, discounts, menu items, journey details) in the app.
However, it failed in the user tests.
I tested the concept with the Treejack tool in Optimal Workshop, and the image below clearly shows that unfortunate users ran around like poisoned mice in each submenu.
Testing the information architecture in the app
If the original idea didn't work, let's ask the users what menu system they think would be the right solution.
Plus, at the same time, I tried to sort passenger discounts into logical groups with the users.
Because the two card-sorting tasks in Optimal Workshop required too much mental effort, many people clicked through on the first day, but few completed the studies.
So I had to get testers as soon as possible. That's when the idea came up to buy a couple of online gift vouchers from a Hungarian book store and post them on Facebook to incentivize participation. It worked great, and I got valuable insights.
Recruiting test participants in a private Facebook group
Later the following idea came up for the tab bar:
And I have added the following features to the MVP for testing:
After researched the context, domain, business and user requirements, technology limitations, and similar apps and conducted user interviews and created personas, I was ready to define the core problem.
It's a fact that with the spread of mobile devices and mobile broadband, more and more people in Hungary are now shopping online.
On the other hand, in rail transport, the share of train tickets purchased via digital channels (web, mobile, ticket machines) is still lower than tickets purchased offline: passengers buy 60% of tickets at ticket offices and 40% via digital.
The top management's declared goal at MÁV-Start is that the digital channel should reach 60 percent of all ticket sales by mid-2021.
However, there are some limitations to this:
Based on the above facts, I defined the core problem as follows:
In an environment where the number of sales transactions via electronic channels is continuously growing and knowing that the use of the technology that enables this—mobile broadband, online payment methods, and mobile devices—is spreading rapidly in Hungary, what could MÁV-START do so that the e-tickets it sells reach a minimum of 60% of total ticket sales by mid-2021, taking into account user needs, as well as financial, time, and technical constraints?
Based on my hypothesis, the solution is a complete redesign of the MÁV app from the ground up.
I present the rationale for this through designing, testing, and iterating the MÁV app prototype.
I based all my decisions about the prototype on data obtained from user research and usability testing.
My goal was to develop an app concept (an MVP) that MÁV-START could later develop—as fast, efficient, and value-added as possible—into a thriving, full-featured solution.
After having defined the core problem and created a hypothesis for the solution, I sought answers to the following questions to build a prototype for idea validation:
Based on the ideas, I ranked the possible functions of the prototype in the following value/effort chart:
After researching the domain, defining the problem, and generating product ideas, I made various user interface sketches with pen and paper.
And then these sketches were followed by wireframes in Figma:
Each screen had to go through the usability heuristics, so I evaluated them one by one and fixed them if something was wrong.
At the end of each iteration, I performed rapid usability tests and implemented the next iteration insights.
Thus, the interface gradually changed in parallel with the tests.
Wireframes in Figma
The scenario was that one of our personas, Eszter, would travel home to her parents on 21st May 2020 from the Budapest-Déli Railway Terminal to Székesfehérvár.
She buys a single ticket, is already logged in to the app with her user account, travels with a student ID, and selects a regional train.
She pays HUF 1,300 in the app with her debit card; she doesn't need a VAT invoice. She shows the e-ticket to the inspector on her smartphone.
In the next section, I will show the usability testing process and the results.
I performed the usability tests in InVision. I chose InVision because Figma's prototyping and user testing function seemed cumbersome and complicated compared to InVision. Though, it's a matter of taste.
So, I exported the screens from Figma, uploaded them to InVison, and then connected the individual screens. Then I got a clickable, more or less interactive prototype, which was already enough to gather user feedback on the concept's usability.
However, the early version of the prototype failed due to the following issues:
I fixed all of these problems in the next iteration. I continued user testing but then ran into even more issues.
In the second iteration, I had to fix these issues:
I fixed the issues in the next iteration and tested again.
Proof of concept
And this time, the booking process was completed by all users.
The results were the following:
Based on the above results, I created the following high-fidelity screens:
Below, I would like to quantify the MÁV app project's top results, share a few ideas for the future, and draw some key lessons from the last six months.
In the official MÁV app, 40% of ticket buyers could not get past the first screen. In contrast to this, all users of the prototype could go through the booking process quickly and easily without getting stuck.
In the official MÁV app, only 20% of ticket buyers could choose the passenger type and discount. In contrast to this, all users of the prototype were able to perform this task.
And last but not least, each test participant used the prototype with delight, unlike the official MÁV app.
Comparison of home screens (left: current MÁV app, right: the prototype with a redesigned home screen)
A redesigned and optimized application can offer MÁV many benefits. Just a few ideas for the future:
We might also introduce a joint ticketing solution in which passengers could buy their bus and train tickets in a single interface.
I reached out to MÁV-START with the concept outlined in this case study.
As soon as I have any info about the project, I will update the case study.
Finally, I would like to share some lessons I learned in the previous six months:
For me, it was incredibly useful to decide what to delve deeper into (e.g., problem definition, prototyping) and learn from my own mistakes (see the section 'Reflection' above).
But best of all, the learning process is still not over.
New challenges and opportunities will await in a new project.
Thank you for scrolling!
Let's build something great together