Redesign and development of the GorodPay mobile app for the transport system

It was important not to rebuild the project from the scratch, but to pick it up and carefully lead it to the desired result

All we need is to know where the user is located. Then we customize offers and content based on this information.

We studied all existing world practices, transport applications used in Russia, and their features. There were too many. For example, one card could be replenished unlimitedly and all funds are recorded at once, but another card can be replenished only once. There are also two types of payment/balance: delayed and off-the-book payment. We deeply plunged into the topic, figured out the intricacies and supported it in the UX/UI design, and worked out the necessary scenarios.

We studied transport apps in different cities and tested more than a dozen services. The MobileUp team identified several interesting features that were offered to the customer — for example, QR code payment, which we are going to implement in the next series.

We conducted a UX audit of the already existing customer’s admin panel. The MobileUp team thought about how to make the admin panel more convenient and speed up operators’ work. So we provided recommendations for improvement. Some of them have already been implemented — we have reduced the number of transitions within the interface and revised the data aggregation methodology.

Users don’t move in mysterious ways. At the start of the project, the customer holds a presentation where he told us about the research and the internal UX team’s recommendations. We also conducted our independent audit, the outcome of which the MobileUp team created an updated and improved main screen design. We added integration with Yandex. metric to track the business performance of the app. The MobileUp team created events for the client’s main actions to analyze the customer journey and understand the conversion.

We kept the existing style, carefully added new sections, and improved the old ones.

The redesign of the main screen became one of the biggest changes there because we rebuilt its logic completely. Now the user sees all transport cards at once and can add new ones, or replenish old ones.

We carefully rebuilt the elements and created a new design vocabulary that is easy to develop and maintain. We could keep the visual style of the app and improve the elements to speed up further development.

The app is a full-fledged part of the city transport infrastructure. We wanted the user to have more interaction points with transport within GorodPay.

The next sections were added:

We worked with MVI — a new for the MobileUp team architecture pattern. Our developers were Clean’s adherents, but that didn’t stop them from figuring out the unusual approach quickly and starting working on the app with lightning speed. There was no goal to rebuild the project to follow our canons, we adjusted to the existing ones.

Now you can add a transit card via NFC to your Android device. It is much easier than manual data entry — the probability of mistakes is higher when you need to enter more than 20 numbers.

Before implementing this, our developers first checked whether it is technically possible to do it.

As weird as this may sound, we had no keys to Podorozhnik. Egor, our talented Android developer, figured out how to get out of the situation — he made a demo version of the service to help us learn more about Podorozhnik and understand what data we could get from there. Spoiler: most of all we needed user IDs.

This is our first project where Android builds were divided into Huawei and Google ones. Google Play does not tolerate third-party service builds and threatens to remove applications if it detects unidentified objects. The build will use Google services if the application is installed on the phone purchased before the sanctions. If the phone is post-sanctioned, the build with HMS will be used.

Interestingly, Huawei’s operating system is called Harmony. It works on an Android basis.

The transport card has a number, but it is pretty long — about 20 characters. It is inconvenient to enter it by hand, so we made it possible to add a card to the app using a barcode.

We added push notifications to inform users. Now they receive information on a card status without opening the app.

The backend has been developed by the DEX team, our partners. We have built a good relationship with them and do great things together. We get used to applying such modern practices as Backend-Driven UI to display icons right from the server to update content faster. Besides, these guys helped us to implement the option to create region-specific content. For example, we could demonstrate different stories depending on the region.

We practice functional testing on the project: regression testing and smoke one. The MobileUp team tested whether the stop lists work correctly on a special terminal. We also wrote test cases to run new builds. However they changed periodically because of the sanctions, but we did not forget to use common sense.

Not only the QA department took part in the testing, but the whole MobileUp team. The project manager Margarita connected all our transport cards to her account. She went to the subway several times a day to check the replenishment of transport cards in real time. Margo wrote down every card replenishment manually to be sure that everything worked smoothly for users.