Illona Delarosa Widjaja PORTFOLIO
i
Illona Delarosa Widjaja Creative UI UX Designer Hi! I'm Illona, people call me Ona. I am a passionate, dynamic, and full of curiosity creative designer. I have so much interest in design and would love to keep growing and learning, especially in UI UX Design. To make my dream come true as a UI UX Designer, I tried to learn more about it and took a mastery class at habiskerja.com and Udemy. Learning about basic theory, hands-on practice, and gaining more skills with Figma, Adobe XD, HTML 5, and CSS 3. I also learned to be more empathic and user-oriented. Design creatively for finding the best solutions for users.
i
Contact Phone : +62821 7775 0077 Illona Delarosa Widjaja
E-mail : illonawidjaja@gmail.com
LinkedIn : Illona Delarosa Widjaja 1
UI UX Case Study For UIUX Case Study, I am going to revamping PeduliLindungi application. PeduliLindungi is an official COVID-19 tracing application and developed by Indonesian Government. This app is now a mandatory requirement before entering public spaces like shopping malls, sports venues, public transportation and etc. The citizen must scan for check-in with a barcode for entering public spaces. It is also used as a personal data saver, such as vaccination certificates, ID card numbers, e-HAC, etc. With this app, you can check your own status code, easily entering the public areas, saving vaccine ecertificates, looking for travel regulations and many more!
Illona Delarosa Widjaja
2
Problem Statement With COVID-19 entering the pandemic era for every nation in the world, we need a change to get through it together, a new normal. Instead of being inside of our home for 24 hours, we might want to go outside, stock supplies, and socialize with people. Then we need something that helps us trace COVID-19 in that area. This is what the app is made for.
Possible Solutions This study case aims to revamping PeduliLindungi application to be more user-oriented. I want to give my best and possible solutions for the problems which occur in users' journey. I want to make PeduliLindugi application easier to be accessed, to be more understandable, and to be more useful for user.
But users find it difficult to understand. 'What is this? What is it used for? How to do it?' Because it is a new kind of application and some new kinds of phrases are also input into the features.
Illona Delarosa Widjaja
3
Design Process
Emphatize
Ideate
User Interview Analysis Responses
How Might We User Flow
Define User Persona User Journey Illona Delarosa Widjaja
Testing Prototype validation Study results Prototype Updated
Prototype Wireframe High Fidelity 4
Emphatize I did research by making questionnaire to my relatives and people who constantly using PeduliLindungi App for going in and out public area. I gave them the questionnaire via Google Form. This questionnaire aims to gain more insight into the user experience in using PeduliLindungi application.
User Profile
User Behavior
What is your age ? Have you ever used PeduliLindungi application? For what purpose you use PeduliLindungi application? How often do you use PeduliLindungi application? i
Illona Delarosa Widjaja
How do you describe PeduliLindungi application? What do you think about it? How do you feel when using PeduliLindungi application? Is there any difficulty to use PeduliLindungi application? Please describe What features do you use the most? What features do you wish to be input on PeduliLindungi application ?
5
Analysis of Responses Received User Age 4.8% 9.5%
Ever Used The App 5.4%
14.3%
5.4%
8.1%
10-20
10-20
21-30
21-30
31-40
31-40
41-50 over 50
28.6%
41-50 32.4%
over 50
48.6% 42.9%
Purpose Using The App
Frequent Use
10.5%
6.8%
8.8%
31.6%
4.5%
Check-in
Everyday min. 1x / day
Travel/e-HAC
Often 5x / week
Vaccination Check Covid-19 News
50%
Healthcare Facility
Rarely 3x / week
38.6%
26.3%
hardly 1x / week
22.8%
Illona Delarosa Widjaja
6
Activities History
'Need Help' Button
Color Status
Check-in with Group
already exist
In-app Chat with Doctor
already exist
Booking for Antigen and PCR Test 0
10
20
30
40
In this chart, we can see there are some features that may need to be added to PeduliLindugi application and there are some features which actually already exist in the application but user might not notice them yet.
Illona Delarosa Widjaja
7
User Persona Profile Veronica is a Content Creator. She likes to post about travel vlog and her collaboration with the brand sponsorship. Her job requires her to meet a lot of people and also tend to go outside/travel for making content.
Pain Points
Veronica Huang Age
: 25 y.o
Location
: Jakarta, Indonesia
Occupation : Content Creator
Personality hard-working
introvert
passionate
professional
Illona Delarosa Widjaja
need to go outside for jobs requirement does not understand what and how the regulation is less information The check-in button is too small feeling hard to go with people who does not have the app (foreigners,etc)
Needs clear information about the regulations simple feature for people who don't have the application
Goals travel/go outside easy check-in go to public area with people who don't have app easily
8
Empathy Map I want to quickly see my own status
In order to get a deeper understanding of the user behaviour and decision, i used Empathy Mapping Method.
i
Why is there so many colors in home page?
what is this for ?
Where is the check-in button ?
it is hard to look my own certificate
Confuse how to add member
Says
Thinks
Does
Feels
Open one by one the features to get knowing what is it
searching on google what is e-HAC
rarely tap the check-out button
Illona Delarosa Widjaja
hard to reach from down to up for check-in with my thumb
This app is useful
still looking for help with COVID-19 related in other platform
Satisfied for personal data saver especially for vaccine certificate
There are features that help me
happy, because I can go outside again while in pandemic
feel annoyed about waiting for the internet to work for checking-in
9
Meet with her friend from America to go to event together
go to destination
YAY! I can go to event with my friend, been so long not meeting her
excited to meet with people from all over the world
arrive and prepare the phone for opening the app
open Peduli Lindungi application
tap check-in and scan barcode at entrance
helping friend to get in with app because she doesn't have the app
Must prepare my phone for check-in
where's the button ? oh here. I hope my signal will be good for checking in
oh? we can check-in with group? but how ?
Ugh it is so complicated. I want to get in with my friend real quick
enter the event
finally we can get in! hah. .
meet and greet with people
go home and rest
wow it is amazing we can meet again in pandemic era
what a long day! time to get some rest. .
Opportunites
Emotion
Mindset
Journey
User Journey
Scenario Veronica wants to go to public events, which is a gathering event for content creators with luxury brand xxx. She wants to come with her friend from America
Illona Delarosa Widjaja
make the button more reachable for the thumb, more contrast, and bigger button
showing group check-in at home page so user can know the feature of adding member in app for check-in
10
How Might We
How might we make How might we make easier access for checkeasier access for checkin with or without in with or without group ? group ?
How might we create a minimal experience to get the information the user need ?
How might we make an easier way to book the COVID-19 test with inapp purchase ?
Illona Delarosa Widjaja
How might we improve the UI design for buttons (check-in, color status, etc)
How might we improve the way of the content information for the features?
11
Main User Flow To outline the necessary functionality, I created a simple flow diagram of the main task. The first scenario is the user wants to check in with or without group and the second is to book a COVID-19 test in-app purchase. The flows are shown below.
#1st Scenario Registration
log in succesful self check-in
success adding member
Home Page check-in with group
have not added member
Add member
Scan for check-in
check in option
Just me
already added member
Scan for check-in
Edit member
check in option
Group
Illona Delarosa Widjaja
12
#2nd Scenario
Registration
log in succesful
Home Page
COVID-19 Test select location
Location
This scenario is for the new feature, in-app purchase. This is the user flow for booking COVID-19 Test via PeduliLindungi
select swab test type
Swab Antigen
Swab PCR
Booking Details
Payment Methods
Payment Confirmation
Fulfill Data
input personal data from account ?
Illona Delarosa Widjaja
Succesful
yes no
add personal data
you will get a barcode or number ID to show it at the lab/clinic of your choice
13
Wireframe Before making the design with high fidelity, I made a low fidelity wireframe to make sure this is the best design and solution for user. However, I did not change everything that has been good before
Illona Delarosa Widjaja Illona Delarosa Widjaja
In this process, I tried to revamping some of the features.
1
14
Illona Delarosa Widjaja
15
Design System
Color Primary
Secondary
Typeface
Complimentary
Illona Delarosa Widjaja
16
High Fidelity Home Page After Wireframing, I design the app with UI component such as colors, typeface. symbols for user best experience.
this is where the user status is shown in home page in order for user easily see their own state. Easily recognize and understandable by user I change the name from Telemedicine to Chat with Doctor so user can understand
Activities history in home page Check-in is the main feature of the app and very important for user. So it comes with bigger and contrast button, and also right for the access of user's thumb
Illona Delarosa Widjaja
17
Profile Account Page
i
Make a statement for information below to make sure user can understand User status of Covid-19 test and test history
Easy access for showing to others user's Profile by QR Code
i I make 'Home and Profile' button
Illona Delarosa Widjaja
18
Group Member Group Member is a feature that already existed in app before but users did not notice because it was hardly noticed.
When adding group member, it will be shown in this page. User can edit member afterwards.
Illona Delarosa Widjaja
19
Scan QR for Check-In Check-in process with user self check-in or check-in with group
i Member of the group status will also be shown after checked-in
Illona Delarosa Widjaja
20
COVID-19 Test Booking Process
i
By making this new feature, I hope user can easily book for the swab test
An overlay to make the design more simple for user experience
Illona Delarosa Widjaja
21
After select the date
i This way, the user may booking the test for other people. And the user can also add another profile in case they want to book the test more than one
there will be an option for fulfil the test requirements data
Illona Delarosa Widjaja
22
After fulfil the required data
i
i
Illona Delarosa Widjaja
The user must select the payment method in order to continue the booking process. If it have not been selected, the button will not be able to be tap by user
The button will change its color and can be tap by user
23
After select payment method
There will be a Booking ID and the status of the Payment
i
i
And success! User can open the app and show the QR to the lab/clinic Right after user make payment in other app, the user have to confirmed to get the QR code for the booking.
Illona Delarosa Widjaja
24
Others Screens
i
I made some illustration added to some page to make it feel attractive
Illona Delarosa Widjaja
25
Prototype Validation This phase, I want to test the prototype on t users. I wanted to know if the main user flow of check-in and booking process is smooth without any friction. This was tested and carried on inperson using Figma's prototype mirror share app. The tasks are included check-in with group or without group ( self check-in ) and adding one booking purchase for COVID-19 test. Throughout the tasks, I asked users to talk their own thought process and speak out when something is hard to do, unclear or somehow irritated. After collecting insights from the participants, I made an conclusion base on research and apply them on updated prototype.
Illona Delarosa Widjaja
26
Study Results 4 out of 5 users were asking how can they see their booking after exit the page ; 5 out of 5 were looking for the virtual account number ( if virtual account method was chosen )
Prototype Update i
There is new page and also an edited on for booking process.
An edited page A new page
Illona Delarosa Widjaja
27
i add virtual account number. Detailing 'bold' in important words
add some small instruction / reminder before tapping the payment confirmation button With this page, user can see their booking history and their current booking
Illona Delarosa Widjaja
And the process is running the same but there is a few changes on Payment Confirmation page
28
My Learnings Revamping and adding some features in application was fun and also challenging experience. I have learnt a lot about diversity of opinions which taught me the importance of User Research. While on UX Process, I I learnt so many process and try to be open minded, board, but also be precise when it comes to analysis responses.
i
I also learnt lot of new features and tricks on Figma which definitely can improve my work on the next project and can make the process faster in future. Lastly, I learnt that "no design is perfect, there is always a room for improvements"
Illona Delarosa Widjaja
29
Thank You