Case Study — Improving the HKSAR Passport online application tool

Because everybody dreads online forms.

Project Summary

This assessment focuses on a specific online application flow for individuals residing outside of Hong Kong, looking to apply for a Hong Kong Special Administrative Region passport for the first time. The GovHK website hosts a library of information, and the application tool is an attached platform that allows the user to submit all the necessary documentation for officials to then process. This report explores a concept design for what an improved experience may look like.


1 week


Devise a new feature that would align well with the application, or identify an all-around redesign improvement for the platform.


Web (Desktop)

Design Methods & Tools

Heuristic Evaluation, Comparative Analysis, Paper Wireframes, Sketch (Mid and Hi-fidelity wireframes)

My motivation for creating this case study was motivated primarily through my own own frustrating experience, as well as a family member who had also recently applied for the Hong Kong passport online about the process. I was told that the process was quite straightforward and simple, and thus I had prepared to complete this task with some expectations in mind.

Because this was an application for an important document, I spent a considerable amount of time reading about pre-requisites, qualifications, and eligibility. This design challenge is not focused on the redesign of the GovHK content strategy; it strictly focuses on the application process once a user has done their due diligence in determining all these above factors, and has made the decision to start the online application process.

As a person with multiple citizenships, I recently needed to apply for a Hong Kong passport for the first time, in which the online application process admittedly took me a lot longer than I felt it should have, and caused me a lot of unnecessary stress.

Though the application process is outlined very clearly, the challenge was to find ways to improve upon the existing platform/workflow, on both the UX and UI front. A lot of information needs to be conveyed to the user, thus it’s important to ensure that no information is lost, but also to ensure the user isn’t overwhelmed with too much information.

Research & Planning

User Feedback — Error Analysis
As I prepared to complete the online application, I triple-checked the requirements to make sure that I was in the right place with the right documents. Here were some frustrations I encountered along the way:

  • Because I filled in the PDF electronically with a Mac, I used Preview to annotate on the PDF (Disclaimer: the platform did advise I should use Adobe Acrobat/Reader. I did not have this installed, and reckoned that the recommendation was simply to help those users who did not have a way to digitally complete a form.) Once I uploaded the PDF file onto the platform, the system rejected the file claiming I had not filled in any of the fields.
  • Consequently, I then took the extra step of installing Adobe Reader. Sure enough, the PDF was already configure with text fields. However, one specific field (current address) did not allow me to fill in specific details. Also, Adobe actually crashed several times when I activated that special text field.
  • Because of the number of trial-and-error attempts, I needed to redo the entire application from scratch each time. This was time consuming and added to my frustration, each time having to re-fill in the exact same fields on the application. The system did not provide me any reference number or a way to pick up where I last left off.
  • I had apparently filled out the wrong 'version' of the correct PDF form. I was given the option to download the correct 'version' of the same form during the Upload step, so I did so. By then I had already spent a good deal of time finishing the original application PDF numerous times. Once I had the latest version of the PDF, the application was finally successful.
  • Payment was a headache. The system collected payment near the end of my application process. It leveraged some third party payment processing gateway, which had very slow loading times and actually failed to initialize the gateway during my first 2 attempts. Interestingly, the application instructions actually advise regarding this exact issue, but simply advises to 'wait and try again later’. There wasn’t an option for me to do this, other than to completely start the application over again.
  • The instructions provided to me advised not to submit/create multiple applications due to the possibility of a double charge or confusion when processing. It was stressful considering this, while going through all the trouble I had experienced getting up to the payment portion of the application process.

Comparative Analysis
To better align with design standards and consistency, I conducted research into other government websites that hosted online application platforms, or platforms related to applying for citizenship documents.

One case study is the Government of Canada website. In helping immigrants determine their eligibility for Canadian citizenship, a survey is utilized to help guide the user down the correct options by answering simple questions regarding their residential status in Canada. The user does not necessarily need to read through any lengthy articles to figure out their eligibility — the system checks based on user responses and advises the user on the result. This design is desired, as it removes the cognitive burden on the user, especially since often times, government sites use jargon that can be misunderstood. This design is analogous to consulting with a human, by means of a quick question-and-answer process to help the user get to their desired goal.

Heuristic Evaluation
In order to more comprehensively identify other potential usability concerns, in addition to the ones I had personally experienced, I conducted a heuristic evaluation of the entire end-to-end application process.

User Flows

Based on the insights gathered through the heuristic evaluation and user feedback, I mapped out a user flow of what would be most ideal in relieving some of the stress and reducing the cognitive load of the users.

Because the application PDF was the primary cause of a lot of frustration and grief, my decision was to leverage a webform to replace the need for requiring the user to download a PDF and complete digitally.

From a form design consistency perspective, the payment step was bumped forward and wrapped into the application process. As the system already advises the user that, without payment, an application won’t be processed, it becomes much more encouraging for the user when they understand that entering payment as a final step is just a part of the application process.


With a user flow defined, I began planning the information architecture of the application process by quickly paper sketching and designing screens around content. One of the main concerns identified during the heuristic evaluation was the excessive amount of text that the system puts in front of the user. While it’s important for the user to read everything carefully on when applying for an important document, it’s also requires a high level of effort and cognitive focus. The content strategy for this project was to reduce text, but maintaining the communication required to ensure important information was being conveyed through progressive disclosure.

Design & Testing

In ensuring a consistent look & feel, I designed the UI to follow the styling of the existing GovHK website (similar color palette, font, layout).

Existing GovHK website

The following are examples of key design elements.

Reduce cognitive load for users via progressively asking for data input
Progress indicator more in line with design standards
Ability to save/resume application
Incorporating the full PDF form as a webform

I conducted user testing early while planning the content strategy through paper sketches of rough wireframes. My users were not necessarily qualified to apply for a Hong Kong passport, but were immigrants themselves who had (in recent years) applied for some form of government identification. Based on their feedback, I incorporated several adjustments that would be reflected in the mid/hi fidelity wireframes.

  • Incorporating a bread-crumb trail for the eligibility-check survey
  • Increase line-height of body text
  • Replaced illustrations of the passport photo, HKID, with actual sample photos to improve visual aid


You can view the fully-clickable prototype here:


There are additional action items I would look to pursue, given more time and access to resources to flesh out a more robust and comprehensive prototype:

  • Incorporating subtle use of motion in UI to support the notion that the application process should be a “smooth” experience, albeit with many steps.
  • Identify from government stakeholders any regulations that need to be respected in designing a viable online application form/solution, and designing with those restrictions/limitations in mind
  • Further user research with the appropriate target audience to identify any additional frustrations when completing the application process.