Summary
Hungarian State Railways is the Hungarian national railway company, with divisions “MÁV START Zrt.” (passenger transport). The website -and the smartphone application design has received pretty bad critics from the functionality point of view as from the UI and UX point of view as well. My goal is to create a new design proposal for the smartphone application of Vonatinfo. This app is the official journey planner for train travelers withing Hungary.
Problem Statement
First I went to the App Store and checked out the ratings and the reviews. It has only received 3.0 points. After I went through the reviews as next step I downloaded the app for myself to get my own experience as well. For sure that for the first look the design looks very old. The registration is very long and time consuming and to find my ticket is also annoyingly complicated. Its true , you cant make a screenshot of the ticket. Would have been a faster way to show to conductor the screenshot. I personally needed help from him to show me where do I find the ticket as via e-mail I received only a confirmation receipt but not the ticket.
The most common issues what I read in the user reviews were the next: The application doesn’t work correctly. The registration and the ticket purchase is too complicated and time consuming. The app does not work in offline mode and doesn’t let the users take a screenshot of the ticket. You can purchase tickets only within Hungary but not for international trips from Hungary. The UI is not appealing for most of the users. I have collected some reviews of the app and clustered them in 3 main groups.
User experience could be a lot better. Today I purchased a ticket before getting on the train. The payment was accepted and the ticket was downloaded into the app. Between the time I bought the ticket and the time I needed to present the ticket to the conductor, about an hour, the app shut down by itself. When I tried to open the app on the train, it stalled because I was in a dead zone, no data service available.
It is possible to buy tickets, but the user experience is only a little better than awful. Today I accidentally purchased a wrong ticket because there is no confirmation screen before payment where you could see which train you are buying a ticket for. After payment I saw that I had the seat reserved for the wrong train but couldn’t issue a refund (I got a message that I am too late for that) or buy a different seat reservation without a ticket.
Worst app on my phone. Extremely annoying to use every part of the app if it even works. Horrible design. Why not just stick with default android material theme? Took 15 minutes to figure out how to buy 2 tickets not just one then there is no option to share the other ticket with someone else which wouldn’t be a problem if I could make a screenshot of the ticket but guess what they thought it will be a good idea to prohibit that….
Design process
1. User Research
I have checked the user reviews in app store, and reached out to some of my friends in Hungary who use train transport daily basis.
3. Visual Design
I have checked the user reviews in app store, and reached out to some of my friends in Hungary who use train transport daily basis.
2. Information Architecture
I will illustrate in Whimsical tool via flowchart diagrams some of the steps and decisions that the user has to undertake in order to complete a task.
4. Development
I will prepare few short, uncomplicated usability tests in Usability Hub for the prototype.
user personas
After going through all the reviews and contacting some of my friends in Hungary who I know they use the train frequently I have created 3 main groups about the most common answers.
I have created the user story and the user needs (tends to relate to the things what we discovered in the research) and goals (what the user is trying to achieve with the design solution).
Basically functional, often illogical
“I successfully bought tickets with the app, but there are a number of windows when I cannot guess correctly what means “OK”, or how to take the information to the next screen. So there is a number back and forth. Some user interface testing and watching users where they become perplexed could improve the next version. The UI needs improvement.”
Story
Becky lives in a suburban area and works at a multinational company in Budapest and commutes daily by train. As she is single, she likes to spend the after work hours in the city with her friends and usually travels back home later in the evening hours.
personality
Needs
- improve the functions
- make it more user-friendly
- work on the UI
Goals
- fast and user-friendly registration
- pass purchase for month or for a year
- fast and easy way to show the pass to the conductor
device usage
A miserable experience
“Setting up your first profile (what type of ticket you want to buy) is a chore and the purchase only goes through half the time. Not to mention the frequent errors with the “simple app” paying method. Screenshot of the ticket is not allowed. Why??”
Story
Lucia lives with her boyfriend in Budapest. She likes to spend her free time in the nature with her friends. In the weekends they often travel by train to discover beautiful landscapes within Hungary. In the summer they camp in remote areas. Her hobby is playing guitar and singing.
personality
Needs
- less complicated profile setup
- improve functions
- change third party “simple pay”
- be able to make screenshots of the purchased tickets
Goals
- user friendly app
- fast and easy ticket purchase
- group ticket discounts
- looking for special offers
- to be able to show the ticket fast
Device usage
Not smart!
“It doesnt recognise international destinations, its only usable within Hungary. Unintuitive UI and lack of crucial options like buying a seat reservation only.”
Story
Roger comes originally from München. He works since 3 years in Budapest as a Marketing Manager at a multinational company. He has a 5 years contract, after he will move back to Germany with his family. He lives in a family house in the suburbs. In the first year he was commuting by car. In the second year he started to use the train to avoid the traffic jam and save some time. While traveling to Budapest he usually works and tries to use his time sufficient.
Personality
Needs
- international ticket purchase
- buy seat reservation only
Goals
- fast and user-friendly registration
- pass purchase for month or for a year
- fast and easy way to show the pass to the conductor
- international ticket purchase
- choose your seat
Device usage
Solution & project goals
I have read 48 reviews and talked to 15 people. The most common problems were the complexity of the processes, missing the feature of seat reservation only and to chose your seat within seat reservation, no possibility to purchase international tickets and the poor visual design. I clustered the issues in 4 main groups. Please see the project steps besteps bellow chronologically.
01.
Simplify the processes
02.
Make options for only seat reservation, and make it able to choose or change your seat in the reservation process
03.
Create possibility for international ticket purchase as well
04.
Change visual design
competitor analysis
We are talking about a Hungarian state-owned railway company in monopoly situation. I could not do a competitor analysis because there is non. Opinions are divided. For some the monopoly situation is the result of the low service. Others say that the railway is competing with the bus and car transport. I do not see it like this, because the railway has one huge advantage compared to the other two transport option. Namely that you are never stuck in a traffic jam. Some of the interviewee commuters told me, that they chose after a while commuting by car to switch to the railway, because they can avoid the traffic jam (it is faster) and while they are on the way they can work.
01. Simplyfy the process
Based on the interviews I noticed that nobody considered using some of the menu points. I find the menu options too long so I decided to make some changes based on the answers. I removed the map, trains, stations, contact, HEV information, Manual for on-board WiFi, rate journey, alarm, chat. I mold together the sign in and register options, designed differently the best offers and the news. Furthermore I added a “my discounts” menu point. I also created an option for online/offline mode in the setting menu point.
Site map
user flows
Wireframes & Hi-FI mockups
02. Seat Reservation
HI-Fi mockups
It was a common complain that the user was not able to purchase only a seat reservation separately. I find it the simplest solution to move on as you would want to purchase another ticket and at the ticket summary reduce the ticket number for zero. In this case you will buy only a seat reservation for 3€. If you would like to see where do you sit, tap on the seat reservation and this will lead you to the second screen. Green is where your current seat is reserved, grey is available (so this ones you can choose and yellow is booked by someone else.
preference test
I have sent to some of the users the new and the old visual design to compare. The preference test in Usability Hub showed 100% likes for the new design.
Ticket search current design
Train schedule current design
Travel summary current design
Ticket current design
Ticket search new design
Train schedule new design
Travel summary new design
Ticket new design
color palette
I have chosen the colors of the logo as main colors. I wanted to keep it simple and transparent so I decided not to use to many colors. I used grey for the menu icons and the rest is blue and white. The background goes from blue to transparent. The bottom is darker, I wanted to give more weight like this.
Prototype & User testing
I have changed minor things in my prototype that I thought could look visually even better. You can follow clearly in the case study how did the app develop from the wireframe until the final version of the prototype. It is not exactly the same design and functionality what I thought it will be. The user tests and my own vision formed it in every stage a bit. For example: I find some of the letters too small while I watched the video so I changed them for 15px.
We have arrived to the last phase where I test the product. I have created 5 usability tests in Usability Hub from the most important features. Please see the results below.
App Design:
- Upvote: nice colors, looks very user friendly and clean work.
- Downvote: Not to use more times the same icon in the menu
Login/Register:
- Upvote: clear, easy and fast
- Downvote: confirmation e-mail about the registration
Purchase ticket:
Upvote: quick and clear process
- Downvote: info about that you can click on the seat reservation. It would be also good when you are logged in that you see your history and your favourites
Show your purchased ticket :
- Upvote: clear and easy
- Downvote: add “add to wallet” it will be even faster to show the ticket, write to it in the end screen when you buy a ticket that you will receive it per e-mail as well and also the invoice
Usability test:
- Upvote: It was not complicated and the length of the test was just right
- Downvote: –
Conclusion
Final Product: You can take a look at the final product in the video above. If you wish to compare the current app and my design, go to the app store and search on Vonatinfo.
Results and impact of the final product: this was a personal project. I was not commissioned by MAV-start to redesign the app, but I am planning to send them my design result. I believe I have fulfilled all the project goals and created a visually nicer and functionally a better app. A travel experience starts at the point where we decide to purchase our ticket. If the application is too slow, the steps are not obvious or have some functionality problems the user will not waste much time on it. The application should save time and give convenient ticket purchasing method for the traveler (no more standing in the line at the automate or at the cashier). I simplified the processes, removed some rarely used functions and added some missing functions. I re-designed the UI so it looks more transparent the screen.
Reflections and lessons learnt: I have learned a lot since my last case study. I not just finished this project faster but I also have learned a lot from the lessons of my previous project. What I still need to work on, to follow the steps chronologically. If I skip one step and go back to it later can make lots of changes in the design and to correct them it means more work.
