UX Planet — Medium | Vitaly Dulenko

Being a fan of city transport, I am excited about tram e-tickets we can use now in Dnipro. To get it, you have to download the Privat24 app on your smartphone and scan the QR-code on stickers in the wagons. Sounds rather very easy, eh?

I made several trips using the e-ticket, and then I noticed some trouble with it. The e-ticket buying process was long and not very convenient. So I thought, how can I make e-ticket usage faster and more usable?

I had the following goals:

1. Analyze the current process and define pain points.
2. Find solutions to make using e-ticket more convenient.
3. Improve my design skills — researching, analyzing, prototyping.

After making research and analysis, I got these results of improvement:

In this article, I examined the existing method of using the e-ticket — without additional equipment or apps. Also, I wasn’t supposed to redesign Privat24 app itself. And I’m not affiliated with PrivatBank, it’s only a portfolio concept.

Research

I started with research and conducted online analysis to collect users’ and conductors’ feedbacks. Most of them had a common point — a cool idea, but difficult to use.

Based on the data, I created a provisional persona to understand who is the potential user of e-tickets.

Usability Testing

Also, I conducted the field study and made several trips by tram to analyze this process from inside. I used the cell internet, I provided every step with screenshots, notes and time measure.

So to get the e-ticket you have to:

1. Find the sticker with QR-code. They are commonly placed under the doors and between the windows. So I had to reach the nearest sticker and launch the Privat24 app.

2. Log in to your account. Next, I had to log in to my account. It was hard to enter the password using one hand while holding the handrail with the other. Depending on the cell internet speed, it took about 15 sec to log in.

3. Scanning. QR-code scanner is available on the first screen of the app. The scanner worked only in the horizontal position so I had to rotate my smartphone using one hand. It wasn’t so easy due to the modern smartphone size (~5′).

4. Payment confirmation. The scanner worked rather fast while the request processing took about 8 sec. After that, I got a screen with the ticket details and the payment card choice. Payment confirmation took about 20 sec.

5. Get your e-ticket. After the payment, I was suddenly brought to the app’s main screen. I saw the success payment message but didn’t see the ticket. After 5 sec my e-ticket was loaded in another screen. It contained the details about the wagon number and the payment time. The conductors use this info to validate e-tickets.

6. E-ticket validation. The ticket was automatically composted so the conductor validated my ticket without any problem.

Analysis

I used the affinity mapping to group feedbacks, ideas to define and organize the pain-points into categories.

Affinity mapping

I used 2×2 map to prioritize each category of issues based on their importance for the user and for business. I noticed that users had the most problems with QR-code stickers and scanning.

2×2 map

I created a user’s flow pointing the time needed for every step. I found out that the most time-consuming steps were payment processing and log in. Let’s say that we can’t enhance the technical side of this process, but we can optimize the other steps.

Hypothesis

We can make the e-ticket buying process faster and easier if we optimize log in, scanning and validation.

As a result, we may get the e-ticket 1.5 times as fast, even without improving technical issues — the server and cell internet speed aa well as request processing time.

Solution

First, I made some sketches to quickly visualize my ideas.

Next, I created a Hi-fi prototype using the existing app’s design style.

1. We can’t use the app without the log in due to security. But this process could be faster if there were alternative login methods — fingerprint authentication (only Samsung smartphones are supported now), a graphic key or PIN code.

Fingerprint authentification

2. One of the internet users offered an interesting idea — to buy tickets inside the Privat24 app without QR-code stickers. In this way we wouldn’t have to spend time finding stickers and scanning them.

First screen

3. We can’t buy 2 or more tickets now. This function could be added on payment confirmation screen instead of showing 0.00 fee.

Payment confirmation

4. To validate an e-ticket without the wagon’s number, we need to remove latter so that the ticket can be validated by its state: active or overdue. The recently bought ticket is active for a certain period of time — an hour for example. After this period the ticket is overdue and it is displayed grayed out. The validation text can be displayed in a more readable way.

E-ticket

Validation

I created two clickable prototypes using CanvasFlip to test the existing method and the hypothetical one. I conducted 5 testing sessions for each prototype.

As a result, the hypothesis was approved — e-ticket buying speed increased by 1.5 times, while the average interactions decreased twice.

Afterwords

I’ve got interesting and useful experience improving such a simple daily action as using tram tickets. Sure, it’s not an ideal method at all. We can buy e-tickets faster and easier using physical travel cards and validators or contactless bank card. But even the current process could be improved by optimizing the already existing app. Thanks for reading!

Redesigning tram e-ticket — UX Case Study was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.