Travel.State.Gov
Designing the US online passport renewal process.
UX/UI - Mobile App
My Role: UX/UI Researcher
Duration: 2 Months
Tools Used: Figma
About
Many of us have visited the U.S. Department of State’s website at some point, especially for passport and official travel documents.
While the website provides resources and guidance, the renewal process often requires applicants to print forms, fill them out by hand, and mail them with accompanying documents.
This can feel inefficient, especially when compared to the streamlined online services offered by other government agencies. A fully digital renewal process could save applicants time and reduce hassle, modernizing the experience to meet today’s digital expectations.
The forms
There are 3 long pages of instructions before we get to the form
Finally we get to the form
Additional documents must be mailed in
The Digital Experience
Research Guide
1. Define the Problem and Objectives
Set goals that align with objectives based on user pain points, behaviors, or needs
2. Choose the Right Research Methods
Select appropriate methods to gather valuable insights based on your goals
3. Analyze and Apply Insights
Collect data, analyze findings to identify patterns and actionable insights
Research Methods
Usability Test
5 participants were invited to walk through the existing passport renewal site to provide a base to launch research.
After testing, users will be invited to have a conversation to provide feedback of experience and insights on areas for improvements.
User Interviews
U.S. government websites were compared and analyzed alongside countries offering online passport renewal options.
Competitive Research
Usability Testing
Round 1: Testing the Original Passport Renewal Site
Participants were set up to navigate the existing passport renewal website, aiming to identify pain points and usability issues within the original design.
Each participant was instructed to proceed through the renewal process as far as they could manage, noting any points of confusion or frustration. Their feedback was collected to highlight areas needing improvement.
Participants were set up to navigate the existing passport renewal website,This initial round of testing provides a baseline, allowing us to compare when participants later test the redesigned wireframes. This approach ensures that you can gauge the effectiveness of design changes by contrasting their experiences on the old and new versions.
Round 1: Feedback for improvements
1. “Mailing and going in person is the only way I’ve ever applied.”
While applicants recognize the convenience of online services, they haven't anticipated an online option for passport renewal because of the long-standing practice of applying by mail or in person.
How might we make it easier for people to switch from the old way of renewing to the online option?
2. “I wouldn’t go trust the site, I would google it first.”
Users are reluctant to visit the site first because its outdated appearance reduces trust and interest. Instead, most prefer to Google the information and then visit the site only to verify the details.
How might we create a trustworthy first impression that encourages users to rely on the site as their primary resource?
3. “There’s a lot of texts and information to click through.”
Users find the passport renewal process tedious because each page is filled with overwhelming text and content, including lengthy videos and instructions, before they can even begin the application.
How might we simplify the application process to reduce overwhelm and make it easier for users to get started?
Competitive Analysis
This competitive analysis looks at how the travel.state.gov site compares to the main US Department of State website, focusing on making their designs more consistent. I’ll also review how other countries handle online passport applications to see what they’re doing well and where there’s room for improvement. The goal is to find ways to make the US process easier and more user-friendly.
US Department of State website
The U.S. Department of State site features a modern layout with organized navigation and clearly presented content, facilitating user access to relevant information.
Drop down options help show and hide relevant information to consolidate information and create a cleaner space.
Travel.State.Gov
We want this to be consistent with the site above.
The passport renewal site has an outdated design, which includes extensive text that may make it more challenging for users to find necessary details.
While the U.S. passport process falls under the U.S. Department of State, a comparison of the sites highlight significant differences in design, usability, and functionality.
Here are some examples of online passport renewal from other countries:
Singapore Passport Renewal
Glitches often force users to complete their applications in person
Difficulty navigating through the site
Users have expressed that the lack of reliability in the online system leads to increased frustration
UK Passport Renewal
Website is designed to facilitate easy navigation
Form boxes are straightforward to fill out
Overall smooth experience, with fewer glitches, which enhances satisfaction
User Persona
Wireframing
Adding a questionnaire to qualify users for online renewal
Documents should still be mailed in, but application can be easily filled out online
Usability Testing
Round 2: Lo-fi Wireframes
We ran testing of the lo-fi wireframes with the same participants as the first round to see how our draft compares.
Problem: Concise Instructions. Users prefer minimal wording—too much text can be confusing. and then some more problem.
Solution: Suggestion to clear up or break up text and include imagery to aid understanding. Add links for user to hover over to expand information.
Problem: Documents Page is Wordy. Some instructions on this page do not apply to all users, causing confusion. Need to refine the instructions to ensure relevance.
Solution: Break up long texts but using bullet points and concise language. Separate sections by using cards or grouping of 4.
Problem: Showing Relevant information. Users only need to see information that pertains to their situation.
Solution: Tailor instructions to be more user-specific by using a questionnaire. Remove or clarify any non-applicable instructions.
Problem: Managing time expectations. Users would like an estimate of how long the process will take before starting the application.
Solution: Provide a clear time estimate for the overall process to manage user expectations.
Final Product
The final wireframes addressed all the issues from user feedbacks.
Homepage: Keeping consistent with the design of the Department of State.
Passport Page: Breaking down large amounts of texts with bullet points and adding visuals.
Questionnaires: Asking questions help filter relevancy of information shown to applicants.
Form Page: Application form is broken down to manageable sections to be filled out.
Confirmation: Assures users their application has been sent through and is being processed.
Tracking: Applicants can easily track their application and status of their passport renewal.
Mobile Ddesign
Why it didn’t work: participants prefer to fill out forms on desktop rather than on a mobile for convenience.
The mobile app design for the online passport renewal form faced challenges because users overwhelmingly prefer using desktops for tasks involving sensitive information.
While a mobile option seems convenient, users feel more comfortable scrolling and navigating on larger screens, where they can easily move back and forth without fear of losing their place in the process.
If a mobile app were to be developed in the future, its focus could shift to features like tracking application progress while directing users to complete the renewal form on a desktop for a smoother experience.
Conclusion
The next phase of this project involves running another usability test to identify sections of the passport renewal process that can be condensed or simplified for a smoother user experience.
As for the mobile app, based on current findings, the app concept doesn’t seem essential as a standalone app and will likely remain a responsive mobile website, ensuring accessibility while aligning with user preferences.
It was exciting to see the real-world application of this concept and compare the official beta with my project’s design. I also had the opportunity to use the online application to renew my passport, which further reinforced the value of this UX exploration.
Shortly after the project was completed, the U.S. Department of State launched a beta version of their own online passport renewal system on Sept. 15, 2024.
View more projects
Square One: End to End Application
Whatsapp: Adding a Feature