small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="http://ift.tt/2qwsMh7">UX Planet &mdash; Medium</a> | Vitaly Dulenko <img alt="" src="http://ift.tt/2pd1h8e">
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:
<ol>
<li>Analyze the current process and define pain points.</li>
<li>Find solutions to make using e-ticket more convenient.</li>
<li>Improve my design skills — researching, analyzing, prototyping.</li>
</ol>
After making research and analysis, I got these results of improvement:
<img alt="" src="http://ift.tt/2pCUI1D">
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.
<h3>Research</h3>
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.
<img alt="" src="http://ift.tt/2pcFKg9">
Based on the data, I created a provisional persona to understand who is the potential user of e-tickets.
<img alt="" src="http://ift.tt/2pCMXbU">
<h3>Usability Testing</h3>
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.
<h4>So to get the e-ticket you have to:</h4>
<ol>
<li>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.</li>
</ol>
<img alt="" src="http://ift.tt/2pcHw0C">
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.
<img alt="" src="http://ift.tt/2pCXiVr">
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&#8242;).
<img alt="" src="http://ift.tt/2pcB9ut">
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.
<img alt="" src="http://ift.tt/2pCJU3y">
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.
<img alt="" src="http://ift.tt/2pd1qIU">
6. E-ticket validation. The ticket was automatically composted so the conductor validated my ticket without any problem.
<h3>Analysis</h3>
I used the affinity mapping to group feedbacks, ideas to define and organize the pain-points into categories.
<img alt="" src="http://ift.tt/2pCIZ2S">Affinity mapping
I used 2&#215;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.
<img alt="" src="http://ift.tt/2pcTaIP">2&#215;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.
<img alt="" src="http://ift.tt/2pCHiTm">
<h3>Hypothesis</h3>
We can make the e-ticket buying process faster and easier if we optimize log in, scanning and validation.
<img alt="" src="http://ift.tt/2pcEmKh">
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.
<h3>Solution</h3>
First, I made some sketches to quickly visualize my ideas.
<img alt="" src="http://ift.tt/2pCO37A">
Next, I created a Hi-fi prototype using the existing app’s design style.
<ol>
<li>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.</li>
</ol>
<img alt="" src="http://ift.tt/2pcQV8h">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.
<img alt="" src="http://ift.tt/2pCQqqP">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.
<img alt="" src="http://ift.tt/2pcUviW">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.
<img alt="" src="http://ift.tt/2pCRye7">E-ticket
<h3>Validation</h3>
I created two clickable prototypes using CanvasFlip to test the existing method and the hypothetical one. I conducted 5 testing sessions for each prototype.
<img alt="" src="http://ift.tt/2pcWnbB">
As a result, the hypothesis was approved — e-ticket buying speed increased by 1.5 times, while the average interactions decreased twice.
<img alt="" src="http://ift.tt/2pCUI1D">
<h3>Afterwords</h3>
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!
<img src="http://ift.tt/2pCOCOP" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2pcWp3d">Redesigning tram e-ticket — UX Case Study</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Redesigning tram e-ticket — UX Case Study

Redesigning tram e-ticket — UX Case Study

Top Stories