A complex and lengthy Visa application process, redesigned for ease, simplicity and enhanced usability.
OdysseyPass helped travelers apply for Travel Visas with a simple-to-use application so they can stress-less when planning for travel abroad.
I worked directly with the business owner of OdysseyPass to redesign their existing Visa application process.
People traveling internationally must obtain the correct Visa for their travel circumstances. The Visa application process is intended to capture all of the right information based on the customer's travel details to eventually apply for the Visa on the customer’s behalf.
✓ Compiling best practices in form design
✓ Establishing the form components for each step
✓ Creating a design concept through low-fidelity design
✓ High-fidelity design
✓ Visual & responsive design
Compiling best practices in form design
Since the redesign of this particular user interface was largely form-based, I started by collecting a list of best practices with regards to forms that may apply to the project. This resulted in over 30 best practice tips that I shared with the client and kept in mind while designing. This process was in part to ensure the UI took into consideration the best way to design with forms but was also a chance to help educate the client on form-based design as well as how and why specific design decisions were made.
Here’s a small snippet of the more than 30 best practice form design tips.
Establishing the form components for each step
Before embarking on any design, sketches or wireframes, I began by establishing the form components that would be inovlved in each step of the Visa application process.
This resulted in 13 screens that represented the form inputs you’d see as part of the application process.
We iterated on this step just once, making minor refinements. Using the best practices collected at the beginning of the project, this helped the client and I get on the same page about what the user would see and how they would provide information.
↓ Below: form compents for different steps in the applicaiton proccess
Creating a design concept through low-fidelity design
My aim is work quickly during the conceptual phase in order to reach a point where I can create the most realistic visuals as the best feedback comes from looking at something real.
I produced only one screen for the design concept to establish how main components on the screen might be organized.
The design concept allowed us to review quickly and move right into high-fidelity wireframe designs.
↓ Below: the initial design concept
I started the high-fidelity design process by working through several screens and steps in the process. This provided clear insight into how the process would look and work, and how much content might be included in appropriate stages, all in just over 10 days from starting the project, boom!
I provided all the screens in Dropbox, where the client would leave comments via annotations. I transferred this feedback to a task list to use for iterating.
Iterations on the high-fidelity designs took place over three rounds of design in 10 days.
↓ Below: Initial high-fidelity design example and screens
↓ Below: client feedback in Dropbox
Visual & responsive design
The last step in the process was establishing the visual design and designing responsive screens to illustrate what the user interface would look like on phones and tablets, while also showing what error handling for various inputs would look like. I did this over the next 10 days, sharing designs and updates with the client every 2-3 days.
↓ Below: Visual design example and screens
↓ Below: responsive design templates