Redesigning apps, 2
Madrid’s Transport Card app (using Flutter)
Did you know that there exists an app that lets you check the balance of your transport card of Madrid? Well, I didn’t. But there’s more… there are actually TWO! The old version (App Store and Play Store) which has an old design, with some text fields that you can’t see and have to guess where they are… and it’s not adapted to bigger screens on iOS. The newer app has a better design (App Store and Play Store) and includes information about public transport.
I’ve been living in Madrid for a year now and I’ve never used any of these apps (nor I think I will) because I see the balance information every time I take the bus or the metro. I could use the newer version to check the timetables but there are better apps to do so on the App Store. So, this time I won’t be just redesigning the app, but adding functionalities to make it “useful”. This time I will be using Flutter. Also, I’m using some assets from DrawKit.
First, I’ll design the home page which will show two bottom navigation buttons, one for the information of the card and the other one for the new functionality (I’ll explain it later). The first page shows a splash screen and a button to add the user’s card information. To add this information, I used the design of the original app, but I’d add the option to read the card using NFC. Once the app has the card number, it shows the balance information.
Up to this point, I haven’t added any new features, so let’s start. The first thing that I’d add is the possibility to see the usage history of the card, to know exactly when and where a user has used it. Once the card’s information is given, there’s a button that allows the user to see its history.
Finally, a feature that I’d really appreciate if Madrid would implement it, the possibility to recharge your card using your phone. At the moment, there is a pilot project for this (https://pilotoapprecargattp.crtm.es/) but hasn’t advanced since the beginning of the pandemic. I’m just proposing a different UI design idea, but I think that it would be really useful for a lot of people. For example, when you’re going to take the bus and realize that the card has no balance. Also, with the COVID-19 going around, it’d help to reduce the queues to recharge the card at the metro stations and fewer people would touch those machines’ screens.
“How could it be implemented?” you may ask. As they do in other cities, they could use the NFC of some of the phones or upload the “recharge petition” to a server and recharge the card automatically the next time the user uses the card in any transport.
In addition to the design and features proposals, I implemented an animation for the pages in Flutter that you can find in the GitHub repo.
In conclusion, I don’t think that another app to check the balance of the card is necessary, but what I do think is that new functionalities are required around the card. I know that some of these functionalities may be expensive to develop but the overall user experience of using the public transport of Madrid could be increased.
Let me know what you think, how you would improve the design and tell me if you want me to redesign another specific app. If you have read to this point, thank you very much!
