Visaero E-Visa Product

Visaero E-Visa Product

Scroll down to discover the engaging UI/UX design elements crafted for this project.

Scroll Down

At a Glance

I was a senior designer and developer on mobile applications for Visaero's e-Visa platform. My role was to improve the user experience for both individual customers and business users. I used various techniques, such as discussions, sketches, wireframes, prototypes, and testing, to design the app. In 18 months, I successfully designed the mobile app, B2C, B2B solution, created a detailed design system, and collaborated with developers to implement the design.

Timeline

18 Months

My Role

User Research

Usability Testing
User Interface

Team Lead

Front End Developer

Collaboration

1 Manager

1 Business Analyst

1 Team of SWEs

Product Owners

Stakeholders

Business Partners

Platform

Figma

Adobe XD

Miro

Notion

Photoshop

Illustrator

HTML (Bootstrap)

Design Process

Mostly I follow the design thinking 5 steps for UI UX design process.

Client's Need

Visaero collaborates with visa service providers globally who currently process visa applications and document submissions manually. Our product team wants us to create a digital platform for convenient e-Visa applications through smartphones. We plan to design a user-friendly experience for individual and business users (B2C and B2B) that fits our branding. The aim is to offer a native mobile app that is easy to use and in line with our established image.

Whiteboard Exercise

Business Objectives

The E-visa mobile app aims to simplify and digitize the visa application process. Its main goals are to speed up processing times and enhance user satisfaction. The app will make it easier and more convenient for travelers from around the world, encouraging more people to use it and increasing its market share. By providing a secure and easy-to-use platform, the app also aims to boost efficiency for immigration authorities and minimize manual errors, which should lead to higher approval rates and increased customer loyalty.

Project Goals

  1. Simplify the e-visa application process by removing unnecessary steps and reducing complexity.

  2. Design a user-friendly interface for easy e-visa applications

  3. Allow users to monitor their e-visa application status in real-time, receiving prompt updates and notifications.

  4. Ensure transparent fee information and a seamless payment process in the app.

  5. Enable users to download and complete application forms without an internet connection for situations when connectivity is restricted.

  6. Implement biometric authentication to enhance application security.

  7. Notify users promptly about their application status, document requests, and any other important updates.

  8. Develop the application to function seamlessly across different mobile platforms (iOS, Android) in order to expand its user base.

Project Constraints

  1. Limited project timelines and deadlines

  2. Fixed budget limitations for the project

  3. Defined project scope, limiting the features, functionalities, or deliverables that can be included

  4. Defined quality standards and benchmarks

  5. Limited stakeholder involvement or communication challenges

Project Assumptions

  1. Users have reliable internet access to submit required documents, and receive real-time updates on their visa application status.

  2. The e-visa mobile application assumes compatibility with a broad range of mobile devices and operating systems (iOS and Android).

  3. The security protocols implemented in the application for data transmission and storage

  4. Users are assumed to have a basic understanding of mobile applications and can navigate through the e-visa application process

  5. The translation feature within the application assumes accuracy in translating content to different languages

  6. The chosen payment gateways are assumed to be reliable and secure, ensuring smooth and error-free transactions for visa fees.

  7. The biometric authentication features, such as fingerprint or facial recognition, are assumed to be effective in accurately verifying the user's identity.

Success Criteria

  1. Increase the use of the e-visa mobile application among the target user population by a substantial percentage.

  2. Ensure a consistently high average user satisfaction rating, as assessed through user feedback surveys and app store ratings.

  3. Decrease the total processing time for e-visa applications in comparison to traditional methods, guaranteeing a more efficient and expedited approval process.

  4. Achieve and maintain a low error rate in the e-visa application submissions, minimizing the need for users to re-submit information or correct errors.

  5. Deliver timely and relevant notifications and alerts to users, enhancing their awareness and engagement throughout the e-visa application process.

Deliverables

  1. A document outlining the project's objectives, scope, stakeholders, and high-level timelines.

  2. Detailed documentation of functional and non-functional requirements for the e-visa mobile application, including user stories, use cases, and system requirements.

  3. Visual representations of the application's user interface design, illustrating the layout and user interactions.

  4. An interactive prototype of the e-visa mobile application to demonstrate the flow and functionality of key features.

  5. Documentation summarizing the post-implementation evaluation, including lessons learned, feedback, and recommendations for future improvements.

Project Phases

  1. Initiation Phase: Define the project's purpose, scope, objectives, and stakeholders.

  2. Planning Phase: Conduct a detailed analysis of requirements, including functional and technical specifications.

  3. Design Phase: Create wireframes, mockups, and prototypes to visualize the user interface and user experience.

  4. Development Phase: Write, test, and debug the source code for the e-visa mobile application.

  5. Testing Phase: Conduct user acceptance testing (UAT) to validate the application's functionality against user expectations.

  6. Deployment Phase: Deploy the e-visa mobile application to the intended platforms (iOS, Android).

  7. Training Phase: Develop training materials for support staff, administrators, and relevant stakeholders.

  8. Implementation Phase: Roll out the e-visa mobile application for public use.

  9. Monitoring and Evaluation Phase: Collect and analyze user feedback for ongoing improvements.

  10. Closure Phase: Conduct a project review to assess achievements, challenges, and compliance with initial goals.

  1. Initiation Phase: Define the project's purpose, scope, objectives, and stakeholders.

  2. Planning Phase: Conduct a detailed analysis of requirements, including functional and technical specifications.

  3. Design Phase: Create wireframes, mockups, and prototypes to visualize the user interface and user experience.

  4. Development Phase: Write, test, and debug the source code for the e-visa mobile application.

  5. Testing Phase: Conduct user acceptance testing (UAT) to validate the application's functionality against user expectations.

  6. Deployment Phase: Deploy the e-visa mobile application to the intended platforms (iOS, Android).

  7. Training Phase: Develop training materials for support staff, administrators, and relevant stakeholders.

  8. Implementation Phase: Roll out the e-visa mobile application for public use.

  9. Monitoring and Evaluation Phase: Collect and analyze user feedback for ongoing improvements.

  10. Closure Phase: Conduct a project review to assess achievements, challenges, and compliance with initial goals.

  1. Initiation Phase: Define the project's purpose, scope, objectives, and stakeholders.

  2. Planning Phase: Conduct a detailed analysis of requirements, including functional and technical specifications.

  3. Design Phase: Create wireframes, mockups, and prototypes to visualize the user interface and user experience.

  4. Development Phase: Write, test, and debug the source code for the e-visa mobile application.

  5. Testing Phase: Conduct user acceptance testing (UAT) to validate the application's functionality against user expectations.

  6. Deployment Phase: Deploy the e-visa mobile application to the intended platforms (iOS, Android).

  7. Training Phase: Develop training materials for support staff, administrators, and relevant stakeholders.

  8. Implementation Phase: Roll out the e-visa mobile application for public use.

  9. Monitoring and Evaluation Phase: Collect and analyze user feedback for ongoing improvements.

  10. Closure Phase: Conduct a project review to assess achievements, challenges, and compliance with initial goals.

Primary Research

We conducted interviews with 10 travelers from various professions and industries to gain insight into their pain points and identify unexplored areas.

Ashish C

E-Visa Provider

Rajeev P

Visa Executive

Vintaa A.

NGO Founder

Ankit

Traveller, NGO

Shende Sir

UNEP

Rajkumari

NGO

Chaitanya

Traveller

Mazhar

IT Professional

Final Problem Statement

To understand the users problems, I carefully read through all the client documents and current systems in the market for competitor research. I initiated 4 meetings with the Stakeholder, Product owner, PM, BA to clarify the user situations and the user problem. The PM, BA did not plan to conduct another round of user research or user testing, so I worked within the constraint and made full use of existing resources. I incorporated the insights into the 3 problem statements.  


  1. Lengthy and Complex E-Visa Application Process:
    The existing e-visa application process via the mobile application is difficult and time-consuming, requiring multiple intricate steps and document submissions. Users frequently encounter difficulties in efficiently completing the application, resulting in a less than ideal user experience and potential abandonment of the process.

  2. Insufficient Visa Application Status Tracking System:
    Users lack a reliable and real-time tracking system to monitor the status of their e-visa applications through the mobile application.

  3. Security Concerns in Private Biometric Vault Access:
    Accessing the e-visa through a private biometric vault raises concerns about security, as the current system could be susceptible to unauthorized access or breaches. Users are reluctant to store sensitive biometric data in the vault because of perceived security risks, which impedes the adoption and trust in this feature.

To understand the users problems, I carefully read through all the client documents and current systems in the market for competitor research. I initiated 4 meetings with the Stakeholder, Product owner, PM, BA to clarify the user situations and the user problem. The PM, BA did not plan to conduct another round of user research or user testing, so I worked within the constraint and made full use of existing resources. I incorporated the insights into the 3 problem statements.  


  1. Lengthy and Complex E-Visa Application Process:
    The existing e-visa application process via the mobile application is difficult and time-consuming, requiring multiple intricate steps and document submissions. Users frequently encounter difficulties in efficiently completing the application, resulting in a less than ideal user experience and potential abandonment of the process.

  2. Insufficient Visa Application Status Tracking System:
    Users lack a reliable and real-time tracking system to monitor the status of their e-visa applications through the mobile application.

  3. Security Concerns in Private Biometric Vault Access:
    Accessing the e-visa through a private biometric vault raises concerns about security, as the current system could be susceptible to unauthorized access or breaches. Users are reluctant to store sensitive biometric data in the vault because of perceived security risks, which impedes the adoption and trust in this feature.

To understand the users problems, I carefully read through all the client documents and current systems in the market for competitor research. I initiated 4 meetings with the Stakeholder, Product owner, PM, BA to clarify the user situations and the user problem. The PM, BA did not plan to conduct another round of user research or user testing, so I worked within the constraint and made full use of existing resources. I incorporated the insights into the 3 problem statements.  


  1. Lengthy and Complex E-Visa Application Process:
    The existing e-visa application process via the mobile application is difficult and time-consuming, requiring multiple intricate steps and document submissions. Users frequently encounter difficulties in efficiently completing the application, resulting in a less than ideal user experience and potential abandonment of the process.

  2. Insufficient Visa Application Status Tracking System:
    Users lack a reliable and real-time tracking system to monitor the status of their e-visa applications through the mobile application.

  3. Security Concerns in Private Biometric Vault Access:
    Accessing the e-visa through a private biometric vault raises concerns about security, as the current system could be susceptible to unauthorized access or breaches. Users are reluctant to store sensitive biometric data in the vault because of perceived security risks, which impedes the adoption and trust in this feature.

User Persona

I incorporated the insights into the user persona named Ashish C

Figma Template

Ashish C

40 years

Pune, India

E-Visa Service Provider

Bio

Ashish, a diligent entrepreneur, is dedicated to offering e-visa services to individuals worldwide. With 20 years of experience in the visa processing industry, he recognizes the significance of utilizing digital approaches for e-visa applications.


Quote

"Simplifying visa applications for hassle-free travel"

Goals

  1. Apply for a UAE e-visa for business travel

  2. Track the status of the visa application

  3. Receive notifications about the visa application process

  4. Submit required documents online

  5. Pay visa fees securely

  6. Get information about visa requirements and processing times

Needs

  1. User-friendly interface for easy navigation

  2. Clear instructions on required documents and forms

  3. Secure payment options

  4. Transparent visa processing times

  5. Ability to provide feedback and suggestions

Tasks

  1. Fill out the visa application form

  2. Gather and upload required documents

  3. Make payment for visa fees

  4. Track the status of the visa application

  5. Contact customer support for assistance

  6. Submit feedback or suggestions

Frustration

  1. Complex and confusing visa application procedures

  2. Long processing times for visa applications

  3. Insecure payment options

  4. Inconvenient access to visa application forms

  5. Lack of transparency in the visa processing

Motivations

  1. Simplify the visa application process

  2. Save time and effort in applying for a visa

  3. Ensure a smooth and hassle-free travel experience

  4. Stay updated on visa policies and requirements

  5. Submit required documents easily and securely

Opportunities

  1. Implement a user-friendly document upload system

  2. Offer multiple payment options for visa fees

  3. Collaborate with travel agencies for visa assistance

  4. Partner with airlines for seamless travel arrangements

  5. Offer personalized visa application recommendations

User Journey Map

While showcasing there Emotions, Actions, Experiences, Pain Points we divided a Traveller's journey map into 3 major stages and each have multiple sub stages.

Figma Template

Ideation

We came up with many ideas and grouped them into 3 clusters: Planning, Finance, and Security, before finalizing our ideas.

Figma Template

Our Solution

Visaero

Visaero is a leading provider of electronic visa (eVisa) solutions for travellers around the world. At Visaero, we understand that applying for an eVisa can be a complex and time-consuming process. That's why we've developed a user-friendly platform that simplifies the application process and enables travellers to obtain their eVisas quickly and easily.

Information Architecture

We have defined the structure for users to navigate the app and access features to reach their goals.


Figma Template

User Flow

I used information architecture to plan how Ashish would navigate through the Visaero Mobile app. There are two main paths: one for Ashish applying for a self visa and another for applying for a self visa along with visas for others.

Figma Template

Example of the User Story

I'm a 40-year-old business person, Ashish who values family time. I want to apply for an e-visa for a family vacation to the UAE for myself, my spouse, and our two children.

Example of the Problem Statement

📈 Example of the Problem
Statement

Ashish travels often and requires a user-friendly platform that works on any device. As a traveler, he prefers devices that make it easy to apply for an e-visa and receive the approved e-visa at a private biometric vault.

Paper First

Ashish travels often and requires a user-friendly platform that works on any device. As a traveler, he prefers devices that make it easy to apply for an e-visa and receive the approved e-visa at a private biometric vault.

From Paper to Digital

We discussed and fine-tuned each screen thoroughly, ensuring that every element was carefully placed and spaced according to its purpose.

Miro Template

Design Systems

Basically, we followed Google Material design systems and created own design systems with our font family and color combination. Figma File

Figma Template

Design Iterations

Improved Hierarchy

Improved Hierarchy

We initially planned to ask users for a lot of information, such as country of residence, nationality, destination, and details about the applicants when applying for a visa. However, we found that this approach was overwhelming. After considering different options, we decided to simplify the process by automatically filling in certain details and assuming that users are applying for themselves. This means that users only need to provide their nationality, and if they want to change the number of applicants, they will be redirected to a different form.

Mobile Mockups

Basically, we followed Google Material design guidelines and created own mockupsMockup

Adobe XD Prototype

Final UI

Ui elements were enlarged for better distant use, while interactions were designed to be familiar and user-friendly. This project is ongoing, with all animations in the prototype stage.

Step 1

Provide basic information, including the number of applicants and travel dates

Step 2

Choose Visa, Upload Basic documents and review the auto pre-filled form

Step 3

Step 3

Payment Summary, Choose payment gateway, Setup Vault and track Visa status

Step 4

Access Vault for Approved Visa and Confidential Documents

What I learned

The e-Visa mobile application's UX and UI design taught important lessons. A user-centric approach, tailored to the needs of various users, such as business persons planning family vacations, was crucial. Clear communication, intuitive design, and explicit instructions reduced confusion. Balancing robust security measures with a seamless user experience required thoughtful consideration. Iterative prototyping and testing helped identify usability issues early. Comprehensive journey mapping, including travel planning and support, contributed to a holistic design. Cross-platform compatibility on Android and iOS expanded the application's reach. Continuous integration of user feedback refined the application, meeting user expectations. Usability testing with a focus on accessibility ensured inclusivity. Collaboration with diverse stakeholders, including developers and security experts, was essential. Empathy for end-users guided design decisions, emphasizing the importance of user-focused digital products.

Let's get to know each other.
Get in touch.

Let's get to know each other.
Get in touch.

© Sagar Sutar 2023

sagar.webxperts@gmail.com

+91 8007102187