UX Case Study: Re-designing Tiket.com
Introduction
Last month, I read an article about how UX design needs a psychology field. Since I held a bachelor degree on psychology major, that article gave me an idea on applying a job in UX field without knowing what UX really is. A miracle came to me, MokaPos offered me an opportunity to do an interview. I did it and it was even worse than my most horrible interview, I messed it up. But, they still gave me an another shot to continue a recruitment process: a take-home-assignment to redesign an app. Of course I seen it as good challenge to understand more about UX design and yes I accepted it, why not. On my way making this one, I failed many times and I know this is still far from perfect, but just like my idol Stephen Hawking said,”It is matter just don’t give up.”.
These are the steps I went through:
- Identifying user’s motive
- Interview
- Creating user’s personas
- Build empathy map
- Creating experience map
- Creating user’s journey
- Making a Low-fi prototype
- Making a High-fi prototype
- Looking for validation
1. User’s Motive
Why we should use Tiket.com? To be honest, I never used Tiket.com before and I didn’t know why we had to redesign it. With a lot of clueless ideas, I tried to search the problems through Google Play Store and please check what I found :
I found 5 users gave the same reason why they prefer to use Tiket.com: the discount promotions. Thanks to them, I could understand why we must use Tiket.com.
But, after knowing the strength of Tiket.com and user’s motive to use it, why should we re-design this app? To answer my own question, interview with real users is a necessary step. So, the next step that I did was doing the interview with the real users.
2. Interview
I interviewed 3 real users (1 male and 2 female) with different background. They are a student, an unemployed, and an employee. The student and the unemployed still need financial support from their parents for travelling, while the employee uses her own.
How to persuade them to join the interview? I asked two of the participants to hang out with me in a cafe and pay them a drink. While we hanging out, I interviewed them. The employee one, I called her through WhatsApp and promised her to give a reward once she came to my town. I hope with this technique, they were motivated to tell me the truth.
After I got the data, I used constructivist realism to categorizing the data, it helped me very well to manage the data. The next step after categorizing data was to make user’s personas.
3. User Persona
What is user persona? According to my interview, user persona is user’s personality towards the application. Through interview before, I could use it to make user’s personas. These are the Tiket.com user’s personas:
With these, I mapped the user’s background, habit of using smart phones, obstacles, needs, and requests. These leaded me to focusing my re-design on promotion feature. But wait, we have to be them first to make sure the actual case. How can we do that? Make the empathy map!
4. Empathy Map
An empathy map can help us to understand customers better. We pretend to be the customer and try to think like them, feel what they feel, see the actual case with their perspective, and hear with their ear. It sounds easy, but frankly it is not. Be careful of priming bias, it can lead us to the hole of mistakes!
What we have to prepare to make an empathy map? You can find it here, full with the question guide and how to map them.
Here is the empathy map of Tiket.com user:
From this empathy map, I can understand customer’s pain points. From that, we can properly know what we have to do to mend that. In this case, I choose to organizing the promotion menus since this is Tiket.com’s strength and yet still disorganized.
5. User’s Experience Map
In this step, I knew what I would do but I didn’t know how to start it. The user’s experience map was the answer, this step gave us an app’s flow and we could asses where was the pain point, where we could innovate our ideas. It was as simple as open the app and tried to draw the flow’s map. But, again, it was not as simple as I thought before. I made a lot of mistakes in this step. After the struggling moments, here is Tiket.com user’s experience map:
With this experience map, I found a way to place my innovation and how to make it more friendly. Here is the revised version of experience map:
See the differences? I made new flow from “Pick the Date” to “Promotions” so the user could pick the promotions after they were picking the booking date. Also, on the “Receipt”, I changed it to “Confirmatory Receipt” since I found some people didn’t want to get the receipt via WhatsApp.
6. Creating Customer’s Journey
Customer’s journey is the journey of the customer, as simple as that. But, the details of customer’s journey is a bit complicated. What we need are:
- Scenario
- Stages (step of time in horizontal axis)
- Determine customer’s actions, questions, emotions, and moments from each stage
- Find each opportunities that we can get from each stage
7. Low-Fi Prototype
Customer’s journey map helped me to understand the opportunities that we had, which are: 1) Promotion Feature, 2) Simple information about promo, 3) Promotion sign (it is used or not yet), and 4) Receipt by request. After we conclude those opportunities, it is time to design the new user’s flow and hope the customer will gain new experiences.
To create a new user’s flow, we need a Low Fidelity prototype, to help us analyze the flow and give us a sketch of what the application layout looks like. Here is my Low-fi prototype made with Axure:
8. High-Fi Prototype
This design is more realistic than Lo-fi design. It has more details and it can be tested with real users to get the validation. Before the validation, these the change that I made to improve the user experience:
- Home: I combined the “Attraction” and “Event” to “Attraction & Event” due the same flow of those menu. Then, I replaced the past “Event” menu into “Promotion” menu.
2. Booking Order: I give a little change on this page, add the “Promotion” feature so the user can still search promos after picking the date.
3. Booking Order: I also made the “Promotion Sign” that automatically turn on when we used the promo.
4. Airline’s Price: When promotion actively used, I think it will be helpful if we automatically changed the promo-able price.
5. Order Form: I made an addition about the information of the original price. It helped us to understand that we already used the promotion.
Also, here is the additional pages that I made for promotion feature:
Here is the full prototype:
9. Usability Testing
To validate our feature, I asked the 3 real users again to use my prototype. They were all different with the users who I asked for interview. In this usability testing, I sent a link for them without telling them that I made a change in the promotion feature. All I asked from them only one: “Please give me a feedback on this prototype.”.
There are the result of the usability testing:
User 1:
Heh you can make this one? I am impressed with the promotion feature and I hope we can use it.
User 2:
The promotion feature is really good, but the icons and the drawing are suck.
User 3:
It can functionally work, oh you give new promotion feature and it is nice.
10. Conclusion
With the usability testing, I could understand that 3 of real users appreciate the experience of the promotion feature. Even though, the User 2 didn’t like my drawing, it had a huge impact on me so I had to keep learning and designing.
All in all, I am very happy with this opportunity. I enjoy the progress and it is really fun for sure.
