Overview
The Immigration & Checkpoints Authority (ICA) is responsible for securing Singapore’s borders against the entry of undesirable people and cargo through land, air and sea checkpoints.
The ICA website administers immigration and registration services, such as issuing passports and identity cards to Singapore citizens, and immigration passes and permits to foreigners.
Challenge
To review and redesign a better experience for users of the ICA website and MyICA portal who need access to necessary immigration services online.
To help these users obtain necessary information in a straightforward and concise way.
To redesign the user journey to ease away pain points that are prevalent in the application processes.
Project Duration
3 weeks (part-time)
Role
Project Manager, UX Researcher, UX Designer, UI Designer.
Team
Mabel, Joanne, Dionne, Louis, Kangni
Tools
Figma, Google Sheets, Google Forms
My Role
My role was to lead the project flow from beginning to end. As the project manager, I began by finding out the strengths of each of my teammates and their interests, namely the areas that they would like to learn more about and improve on.
As a project manager, I proposed that:
We mix and match roles such that those who were more experienced in a certain area is able to become a mentor for another team member.
We had clear cut deadlines with tasks and clear agendas for the next meeting at the end of every meeting, so that everyone is constantly on the same page.
With the project plan clearly laid out and adjusted accordingly to the deliverables of each task, everyone was very clear with their duties and when a task is completed earlier than expected, they would be able to find another task to help others who may need it.
Overall we all had equal exposure to all the roles within the team, every single one of us played a part in different roles from beginning to end of the project, contributing the expertises that each of us brought along with our own personal experiences.
Design Process
Discover
User research
Usability Testing
Competitive analysis
Comparative analysis
Define
Affinity mapping
Persona
Problem & Solution Statement
Ideate
Wireframing
Mid-fi prototype
Usability Testing Iterations
Implement
Hi-fi prototype
Discover
User Research
In our discovery interviews, we interviewed 10 users about what they thought of the current ICA website and their experience with it. Although users were generally able to obtain the information they needed and complete their tasks, the process was long and frustrating.
What People Were Saying
“The huge COVID announcement is really ugly I don’t even want to look at it.”
“The horizontal bar is clear enough, but it’s a bit difficult to find what I’m looking for via the vertical bar.”
“This information is useful but it’s too overwhelming to see it presented like this.”
“Why do I have to scroll all the way back up to apply after reading the information?!”
Competitive and Comparative Analysis
Next, we conducted a competitive and comparative analysis on the CPF site, Standard Chartered website as well as the ICA equivalent of UAE to cherry-pick the best user interface elements relevant to the Singapore ICA site.
Through the analysis, we found out the following:
Clear navigation makes it easy for users to find what they are looking for.
Users need a way to compartmentalise information for easy comprehension.
Relevant images and graphics help users make sense of the information on the page at a glance.
Common services need to be easily accessible to save time from browsing the site.
Initial Usability Testing
The steps to renew a passport was simple for locals. We went to Singapore Citizens and clicked on renew passport, which turned out to be an information page on the passport application process and another link to apply online.
We then conducted a full usability test of the site with two scenarios comprising basic tasks like finding a information on long-term visit pass for a loved one or applying for a passport online.
Despite the relatively straightforward user journey with many entry points to the same goal, its system usability score was 3.4/5, which was around the 'C' average of 68.
2 of 10 users failed to find relevant information on long-term visit passes for their loved ones.
Key Insights
Define
Personas
As a team, we conducted an affinity mapping of our user research interview notes and formed the 2 distinct personas below.
Problem Statement
Users need a smooth and straightforward way to efficiently complete their immigration-related tasks on the ICA website because they find it taxing and daunting to look through a cluttered and unintuitive website.
So how might we…?
ONE.
improve the site’s experience so that it is easily navigable and intuitive for repetitive tasks?
TWO.
make the information on the site more digestible?
THREE.
make application processes less daunting for Candice and David?
FOUR.
streamline the process to reduce the time spent on the website?
Solution Statement
A revamp of the website’s content and design is required so as to increase readability and digestability of information as well as overall satisfaction and efficiency for using the site and application processes.
Ideate
Design Studio
As a team, each one of us had a different style on the kind of UI elements we would want to incorporate into the design of the new site.
Hence, rather than doing individual sketching, we actually collaborated together on Figjam to piece the ideal design through screenshots of various UI elements cherry-picked from the websites used in our competitive and comparative analysis to create a sketch of our wireframes.
This actually made the sketching process much clearer and efficient for everyone on the team.
Chosen elements
CPF Board
Clearly segregated design of the navigation bar to visualize sub-categories in one glance
Page marker anchor tab on the top of the page for pages with long information
More image cards in line with branding to declutter information
Helpful search bar that displays relevant suggestions and best results
UAE ICA
Shortcut to commonly used services at the homepage and application status checker
Standard Chartered
Accordion UI to efficiently compartmentalise content
The Initial Design
Through the collaborative team sketching exercise earlier, we were able to create a mid-fi prototype that incorporates all the ideal elements for the ICA site together.
Desktop
Navigation bar
Homepage
Information page
Passport Application page
Mobile
Homepage
Renew Passport Information Page
Passport Application Page
Mid-fidelity prototyping
Usability Testing
We conducted a usability testing of our mid-fi prototype and synthesised the findings as follows:
ONE.
Users’ satisfaction scores and average time taken to complete tasks shows huge improvement compared to the previous site.
THREE.
Users’ find the homepage more useful with the introduction of ‘commonly used services’ and ‘application status checker’.
TWO.
Users find it less daunting to read up on immigration matters with the new straightforward and clean design.
FOUR.
Specific pages of the LTVP form can get a little longwinded and taxing to enter. Some inputs to the forms are repetitive as well.
Usability Testing Iterations
From the mid-fi prototype usability test, we received a couple of feedback about what to improve on in our hi-fidelity prototype.
Desktop
Mid-fi Homepage
Hi-fi Homepage
Feedback
More emphasis should be made to the navigation bar.
Homepage banner height should be reduced.
Changes made
Added an emphasis of red down-facing triangle to indicate hover navigation bar
Homepage banner height reduced
Mid-fi Passport Application Step 2 Page
Hi-fi Passport Application Step 2 Page
Feedback
Edit button was added to modify image after upload
Changes made
The ID photo uploaded should give user’s an option to be able to reupload or change their photo.
Mobile
Mid-fi Information Page
Hi-fi information page
Feedback
Bottom anchor bar is not a mobile responsive design.
Changes made
Accordion bars’ information should all be expanded as some users may assume they are already filled.
Mid-fi Long-Term Visit Pass Application Page
Hi-fi Long-Term Visit Pass Application Page
Feedback
Accordion bars’ information should all be revealed as some users may assume they are already filled
Changes made
Accordion bars’ all expanded by default.
Implement
Hi-fidelity prototyping
Final Design Prototype
Hi-fidelity prototyping
Usability Testing
We conducted a usability testing of our hi-fi prototype following the feedback we received from our mid-fi prototype and synthesised the findings as follows:
ONE.
By streamlining the navigation bar based on citizenship status and presenting the information in a clear hierarchy, users like Candice and David are able to quickly find the services relevant to them.
THREE.
By replacing technical jargons with layman’s terms, Candice and David make fewer errors when clicking CTAs thus they are able to save time when completing their immigration-related tasks.
TWO.
By personalising the services on MyICA home, Candice and David have an even easier access to the immigration-related tasks that they have to complete.
Usability Test Result Highlights
-
53.3%
Boost in average satisfaction rate for completing tasks from original site to newly revamped site
-
60%
Decrease in average time taken to complete tasks from original site to newly revamped site.
Reflections
The prototype was a success in increasing digestibility of large amounts of information for users as well as relevance of information displayed to users. As seen in the second usability test, users were able to access the services they are looking for much faster and were able to view key information at a glance. Overall, the users were impressed with the prototype and how it successfully enhanced their information searching as well as application journey.
As my first UX group project, it was an amazing experience to have worked with a team of other like-minded UX designers in a conducive learning space. Everyone was eager to learn and impart their knowledge to one another which allowed great teamwork to shine as everyone was always ready to help to achieve the same goal.
Personally, I felt that being in a team helped me to constantly be on the right track by seeking validation with my team members and granted me more exposure to creating a better UX experience for our users. We may be working on different segments of the prototype, but we would always check in with one another on points of improvement and also generously share compliments with each other when needed.
Next steps
Besides usability testing, I would like to conduct A/B testing to measure the intuitiveness of the proposed UI solutions. The time taken as well as completion rate of the application forms would serve as success matrices for the test.
Futhermore, I would like to explore other different functions available on the ICA website that we have yet to look into, such as the “news & publications” page as well as the career page.