Travel Pass Mobile App
Project Completion: 5 Weeks
The Problem
In an effort to mitigate the spread of the COVID-19 virus, Baguio City created an online portal for travelers to acquire travel permits before coming in and out of the City. Despite the good intention, the city received tons of complaints from confused citizens.
The Goal
Make the process of acquiring a travel permit clearer, simpler, and more intuitive for travelers to and from Baguio.
The Solution
To create a portal that is easy to use and mobile-friendly.
Scope of Work
UI/UX Design: user research, ideation, wireframing, and prototyping.
User Research
Based on complaints from citizens aired on social media, the design of the portal is made to address only the needs of the city but failed to consider the users of the portal.
![User Research Facebook Comments Screenshots](https://www.audreyestangki.com/wp-content/uploads/2022/06/User-Research.png)
Define the Problem
Affinity Diagram
I gathered the needs, suggestions, and areas of frustration from the Facebook comments and reduced it into 4 main themes that can be solved through design
Rule-Specific Questions
“How long until you grant us our travel permit?”
Individual Concerns
“How about people who don’t have email addresses?”
-What kinds of requirements are needed from them?
User Suggestions
“Kindly show us your contact numbers for further inquiries?”
“Please add a video tutorial on how to use the portal.”
“I hope someone can answer our questions quickly and properly.”
App-Specific Issues
“How would I know if my application has been granted?”
“How can we edit information in our application for a travel permit?”
“What if I forgot to download my QR code after my application has been granted?”
“Can we pre-fill the form and get back to it once we have the documents ready for upload?”
Suggested Solutions
Send status updates and instructions to users on what to do next.
Have the user answer a short questionnaire to accurately determine his/her travel profile. Retain a record in the system to avoid unnecessary repetition.
Add a helpdesk on the app including related contact numbers. Add an FAQ for quick answers to common questions.
Give the users the ability to review, edit, save, and delete their information as they see fit.
The users have the option to verify their accounts through phone numbers. QR code should also be accompanied by an alpha-numeric code as an alternative for users who don’t possess mobile phones.
Scamper Notes
I studied how they created their existing portal and took notes on which parts to improve using the SCAMPER tool: Substitute, Combine, Adapt, Modify, Put to Another Use, Eliminate, and Reverse.
![Scamper Notes 1](https://www.audreyestangki.com/wp-content/uploads/2022/06/Scamper-Notes-1.png)
![Scamper Notes 2](https://www.audreyestangki.com/wp-content/uploads/2022/06/Scamper-Notes-2.png)
User Persona
Three user personas were identified for this project.
![User Persona - Clarence](https://www.audreyestangki.com/wp-content/uploads/2022/06/User-Persona-Clarence.png)
![Persona - Julie](https://www.audreyestangki.com/wp-content/uploads/2022/06/Persona-Julie.png)
![User Persona - Michael](https://www.audreyestangki.com/wp-content/uploads/2022/06/User-Persona-Michael.png)
Ideate Solution
My proposed solution is to eliminate the unnecessary information in the portal, redesign the portal with the users in mind, and make it mobile-friendly or a mobile app.
![User Flow 1](https://www.audreyestangki.com/wp-content/uploads/2022/06/User-Flow-1.png)
Prototype
Low Fidelity Wireframes
![wireframes](https://www.audreyestangki.com/wp-content/uploads/2022/06/wireframes.png)
Styleguide
Color Palette
![Color Palette 1](https://www.audreyestangki.com/wp-content/uploads/2022/06/Color-Palette-1.png)
Typography
![Typography 1](https://www.audreyestangki.com/wp-content/uploads/2022/06/Typography-1.png)
Iconography
![icons](https://www.audreyestangki.com/wp-content/uploads/2022/06/icons.png)
Screens
![Screens 1](https://www.audreyestangki.com/wp-content/uploads/2022/06/Screens-1-scaled.jpg)
![Screens 2](https://www.audreyestangki.com/wp-content/uploads/2022/06/Screens-2-scaled.jpg)
![Screens 3](https://www.audreyestangki.com/wp-content/uploads/2022/06/Screens-3.jpg)
What I Learned
Taking into consideration the perspectives of all the stakeholders is important in creating a usable product.
Next Steps
If given the opportunity to implement the design, I would conduct usability testing on the users and collect feedback for improvement of the proposed app.
I would also have it reviewed by the city and take input from them.