UI/UX Case Study: MyTelkomsel App
Disclaimer: This is my personal project.
Overview
MyTelkomsel is a mobile app created by Telkomsel to make it easier for they customer to buy credit/package, pay bills, check quota, etc. However, some users have complained about the apps related to the UI/UX field. Therefore, I chose MyTelkomsel App as an object for this case study to indetify any problems and improve the user interface and user experience on the apps to provide a better experience for users.
Role: UI/UX Designer
Scope: User research, analyzing, user flow, information architecture, wireframing, mockup, prototyping, and usability testing.
Timeline: 3 weeks
Tools: Figma
The Process
In this case study, I use design thinking framework as a tool in the process. Design thinking is a human-centered approach to integrate a product to provide possibilities and user needs.
Emphatize
The first thing to do at this stage is to look for problems that exist in MyTelkomsel Apps, then continue by doing a several important things including planning the research, making the research guideline, and conducting the research.
Existing App
MyTelkomsel is a mobile app created by Telkomsel to make it easier for they customer to buy credit/package, pay bills, check quota, and also other several features such as POIN redemption and rewards. MyTelkomsel App has been downloaded by more than five million users, received a rating of 4.5 (Google Play store) and 4.6 (App store). Here are some of the reviews found in the comment section that I think it needed to be followed up:
Background
Based on the reviews, I planned to redesign the “Quota Detail” on MyTelkomsel’s homepage and also improve the user purchase flow. But the current problem is, I have no clue about what type and character of users who have a constraints related, and what they really need.
Research Plan
Objective
The research objective in this case study is to find any motivations, pain points, or barriers of the users when using MyTelkomsel App; especially when they checking the “Quota Detail” page section and making a purchase of credit or packages through the apps. These are my research objective:
Understanding user’s behavior, needs, and difficulties when checking the “Quota Detail” and when they are making a purchase of credit or packages through the apps
Methodology
Qualitative — In-Depth Interview
Sample Specification
- MyTelkomsel active users who have opened the “Quota Detail” page
- MyTelkomsel active users who have made at least 1 purchased of credit or package in the last two months
- Nationwide
- Male/Female
- 18–50 years old
Key Information Areas
- User Profile
- General behavior when using check credit/quota services (through the dial-up number/sms/apps)
- General behavior when making a purchase of credit or packages through the apps
Research Guideline
After making the research plan, I set up a guideline before conducting in-depth interviews. This guide contains introduction, explanation of the interview to be conducted, a list of questions based on key information areas to be able to answer the objective, and closing.
Conducting the Research
I explore information about overall user experience, thoughts, and try to find out a problems on the “Quota Detail” section and purchasing flow. Interviews were conducted virtual using Zoom.
Define
Affinity Diagram
The insights that have been obtained are classified into a thematic grouping by using an affinity diagram. Affinity diagram is a quite simple method that can help to create a narrative story.
User Persona
User personas are fictional characters that can describe the user’s type to identify their problems and needs.
Customer Journey Map
Customer journey map is a popular UX method to help designer think sistematically through the steps of customers when they interact to a product, how does the emotional transformation, pain points, and what business or product opportunities that can be deployed. The journey map was also involved real user experiences based on insights obtained from the IDI.
Problems
Based on the results of the analysis by using affinity diagram and customer journey maps, there are 5 main problems found.
- Users confused by the credit/quota dashboard
“Tombol beli paket, pulsa, dan berbagi pulsa agak bingungin…”
“…kurang paham informasi kuotanya dibagi jadi dua tapi pas dibuka sama”
Some users have a confusion about the dashboard, it contains three important buttons (buy package/top up/care & share) that are lined up in there but not all of them looks like a CTA button and it causes a bias. Still the same problem, a lot of users doesn’t understand about why the quota information is divided into two section, and why should prioritize multimedia quota to be displayed on the first page while many users do not even buy it nor even know how to use it.
- How might we put all of that important things together in just one simple dashboard contains only information that often used by users without override the goals or business objective?
- How might we simplify the CTA button to clarify the initial point for users who want to do a related activity?
2. Back-and-forth causing less efficient user purchasing flow
“Beli pulsa yang berapa ya biar cukup buat beli kuota? balik lagi deh liat pilihan kuota dulu…”
I found a habit that so many users are not always prepared to see the quota price list unless they already have a credit balance enough. So when they went to the top up credit page to buy a package after, they will also return to the homepage or shop to make sure the credit they are going to buy will be enough for the package price. However, this journey is such inefficient flow because it has to go back and forth to certain pages that it can cause users distracted.
- How might we create a feature that can minimize the problem from the users habit that has a potential of distrction to reach a goals?
3. Payment method using virtual account is not visible on the first sight
“Ini kalo ga dicek ke bawah ga bakal tau bisa bayar pake virtual account…”
Some users thought that the payment method using a virtual account was not available. The reason behind this statement is because the white shape behind the pay button was too large and fixed position so they thought the screen couldn’t be scrolled.
4. Users do not get a clear message if something goes wrong
“Pernah mau beli paket tapi bermasalah terus, ternyata pulsanya ga cukup karena udah berkurang duluan…”
Users don’t get a clear message about the problem they are actually facing. For example, when they want to buy a package then ended up failing, it says that there is a connection problem, and they were directed to the refresh button again and again.
5. There is no pop-up message before the final transaction
“Kalau beli paket make pulsa, mestinya sih ada pop-up ya buat make sure sebelum transaksi…”
There are a lot of packages that only can paid with credit. For that thing — unfortunately, users must really make sure that they have chosen the right package before finally tap the buy button.
Limitation
- The design of mockup and prototype is limited to activities of checking the dashboard, top up a credit, and buying a package.
- The UT process is carried out on activities to try the bookmark feature, top up credit, and buy a package.
Ideate
List of Ideas
User Flow
User flow is a tool that used to describe the overall flow of users in using product from their initial entry point, through a series of steps to reach a goals, such as purchasing a product or service. The following is the user flow when they are top up a credit and buying a package:
Information Architecture
Information Architecture is a tool that used to organize a flow, content, and any design requirement in an apps/website. The IA in this case study is limited to user activities when they check the quota details, top up credit, and buy a package.
Wireframe (Lo-Fi Design)
I made a paper wireframe to get an idea of the page structure which involves the most basic content and visual before developing it into a mockup/high-fidelity design. The following is a wireframe that is limited to a few additions and changes to the user flow of activities when topping up a credit and buying a package:
Mockup (Hi-Fi Design)
Mock-up is more complete representations of product by adding all the design components. At this stage, application of the design system is only by following the existing system, but there are several components that are changed for reasons of consistency such as buttons that are not too rounded and also the distance between components.
To find out what improvements I made, I outlined the bullet points for each problems and between them I compared the old design with the new design. I also explained that there were other design improvements that I made.
Prototype
After the empathize, define, and ideate stages have been carried out, I create a clickable prototype using Figma. This prototype contains 23 screens which include activities to bookmark some packages, checking the quota detail, top up a credit, and buying a package.
You can try the prototype here:
Link Prototype (MyTelkomsel App Redesign)
Test
Usability Testing (UT)
UT is a useful method that can help to find out whether the new design that has been created can help users complete their tasks. The UT was conducted to evaluate new design on activities to use the bookmark feature, check the quota detail, top up a credit, and buy a package. The practice was carried out online using Zoom, participants share their screens when using the prototype.
Task Given
First of all, I told to the users that there is a new feature (bookmark) which able to save packages for them. After that, I asked to perform the following tasks by giving them a scenario such as “imagine, you are going to top up your credit and buy a package, what would you do to find the best offer?”
- Check the “Quota Detail”
- Find package
- Bookmarking some packages
- Top up a credit
UT Insight
I found various user flows when they want to make a transaction such as directly to top up a credit or package, bookmarking a package before purchase it, top up a credit before buying a package, etc. I thought maybe this is natural because each of users will use the application according to their needs indeed. But after all, they managed to complete every tasks well, although some of them are not used to using the bookmark feature yet so they only found out its benefit when they went to the top up credit page.
Design Recommendation
After the UT process, I made some design improvement based on users recommendation. The following is the result of the design and its explanation.
Appendix
Lesson Learned
While working on this case study, I learned a lot from the users, what I think as a designer is not exactly what they think as the users even if I positioning and imagining myself being a user, it still won’t be the same. So I’ll go with, “You are not they are, know thy users”.
This is not the end, because of course — there are still a lot that needs to be improve from this design. Please let me know if you have any feedback or suggestions. You can also visit my LinkedIn right here.