Case Study: Redesigning local applying passport application
Introduction
I’m not affiliated with Direktorat Jenderal Imigrasi & Kementerian Hukum & HAM RI and the opinions I express in this case study are solely mine as for this case study is only intended for the purpose of Project on Synrgy Academy Bootcamp. This study case was done to enhance my learning experience and challenge myself to redesign the application itself.
Role: UI/UX Designer
Tools: Figma
Duration: 1 week
M-Paspor? What is the app all about?
There will be tons of people that are curious and wondering about the M-Paspor app. M-Paspor is a mobile application where Indonesian citizens can submit online requests for new passports and passport renewals via the app itself. This application simplifies the passport application process by allowing users to enter their personal information and submit required documents online anytime and from anywhere.
Why chose M-Paspor?
The M-Paspor app’s poor user interface was one of the main factors that led me to think about revamping it. Also, the app itself is pretty dated. Furthermore, certain user flows on the app could be made better so that the user can use the application efficiently.
Design Process
I’m using design thinking framework which are empathize, define, ideate, and prototype.
Emphatize
Firstly, empathize will be done by knowing how the user feels about the app when they use it and when there is a problem. I will do two things which are observation and secondary research, by getting insights from reviews on the Play store and App Store.
- Reviews
I also explored the App Store and Play Store reviews and took a few of the reviews to get some pain points where the user felt about the app.
2. Observation
By using the current M-Paspor app, I observe how I’m using it and where I feel confused. After using the application, I jot down a few things that could be a problem when the user uses the app.
- The User Interface itself seems dated and needs to be updated.
- Several buttons must be redesigned, and the UX Writing must be rewritten.
- The application flow could be more apparent here. For example, instead of using the OTP Verification method on the login page, the application used a ‘slide to the right — puzzle’ type of verification. In my opinion, that type of verification is pretty confusing.
Define
Define are being done to validate the user’s pain points about the user interface. After doing empathize, I get some of the pain points that users felt when using the app.
Pain points:
1. Login Page
The login page is clear for the user so they can directly log in using their account before using the application. However, the ‘forget password’ button can confuse the user since it has the same color as static text.
2. Account Verification
The account verification for login needs to be put in the right place and match the User Interface of the application. It gives the vibe that the user only needs to verify if they’re the one who is logged in to the account. The ‘Back’ or ‘Close’ button also couldn’t be seen here.
3. Forget Password
The title on the ‘forget password’ page could make the user wonder whether their actions are correct. The writing on the title page, ‘Lupa kata sandi anda?’ with a question mark, will confuse the user. The UX writing on the button also needs to be explained more, whether the user only ‘continue’ or after clicking the button, it will let the user change the password.
4. Home Page
The user interface on the Home Page is far more straightforward but still makes the user feel that it is easy to use the application. However, the head title and ‘notification’ button location are hard to be seen, and the notification button is hard to press since it’s far away from the thumb. ‘Pengajuan Permohonan dan Status’ is added on the same page, which is a plus point as the user can quickly press to apply for a new request and see their application status. Yet, it is scattered since you can find two pieces of information in the same place, and there are no dividers between them.
5. History (Riwayat)
Aside from the date at the appointment time, there needs to be more to improve. The application gave the appointment date information repetitively and at the wrong place.
6. Data Page
Another minor pain point on this page is the button placement could be more precise. Also, the ‘sudah terbayar’ message is confusing since it looks like a button but cannot be clicked.
Ideation
Before designing on visuals, sketching on paper is done to gain some ideas and make it easier to arrange the visual design placement on the application.
Prototype
After doing ideation, visualization is made for the application.
Login Page
I made a few changes to the login page, such as the design to have a clean look and the ‘Forget Password’ button placed on the right side, so it will make it easier for the user to click the button. The button’s color also changed to be more visible than the old design.
Forgot Password Page
As for the Forgot Password Page, I changed the UX Writing on the button from ‘Lanjutkan’ or continue to ‘Kirim Email’ or send an email. It makes the user knows what they’re tapping on. A notification was also added to let the user know if the code was sent. In addition, two pages are also added, verification for changing password page and reset password page.
Home Page
On the Home Page, I changed the looks first to be cleaner and straightforward. Also, the information page on the navigation bar was removed since it only displayed information such as requirements and registration flow. Still, I moved that information to the home page to make the requirements more accessible. All fonts on the button have the same size, so it looks more cohesive and neat.
History Page
The data on the history page needs to be classified between categories, and it won’t be easy to search for data that the user wants to see. So, I arranged the data between status types.
Data Page
It can be seen from the data page that was previously made has an odd placement of a button. On the redesigned page, it can be seen that a few changes have been made. Instead of adding a QR code at the bottom of the page, a QR code can be displayed on the new page.
Conclusion
Using this application can shorten the time when registering for a passport, which is a suitable procedure that makes user easier to apply for a new passport. The UI of the application makes it clear that it needs some improvements for the application. Through this case study, I discovered that a UI on an app that is difficult to use could prevent a user from completing a task.
It’s a wrap!
Thank you for reading my first case study. I hope you found it helpful and informative.
Your feedback and suggestions would be greatly appreciated. Feel free to reach me out through linkedin.
