View Prototype
End-to-End App:
Visa Voyage
A mobile-first website that allows users to manage their visas with a professional and access relevant information about where they are.
Role
Project
Year
Product Designer
End-to-End Mobile Web Design
February-April 2023
01
01
02
03
04
05
Research
Synthesis
Analyze
Design
Test
My Design Process
03
User Personas
Using the affinity map and user interview insights, I created 2 distinct personas that encompassed many of the qualities of those 8 participants. This helped me to ensure that my design decisions were grounded on real user needs, goals and expectations.
Empathetic Exploration: By conducting extensive user interviews and research, I immersed myself in the stories and experiences of individuals navigating the visa process. Through this empathetic exploration, I identified commonalities, pain points, and aspirations, which formed the foundation for developing our user personas.
Distilling User Insights: Analyzing the data and user interviews, I synthesized the findings into meaningful insights, uncovering recurring patterns and motivations. These insights provided valuable clues about user behaviors, preferences, and goals, enabling me to craft personas that represent the diversity and needs of our target audience.
Through this process of empathetic exploration, distilling user insights, and bringing personas to life, we now have two powerful user personas that serve as a compass for designing a visa app that caters to the unique needs, motivations, and desires of our target users.
Synthesis
I created an affinity map to synthesize my qualitative data. Affinity mapping helped me to group my observations made during user interviews and notice themes that I could then use to develop insights, which includes the below:
User Frustrations Transformed: The affinity mapping exercise revealed a common thread among users - their frustrations with the complex and time-consuming visa process. By grouping their feedback and pain points, it became clear that simplifying and streamlining the visa application experience was a top priority.
Need for Clear Guidance: The mapping exercise highlighted the users' desire for clear and concise guidance throughout the visa journey. They expressed the need for step-by-step instructions, informative resources, and interactive tools that could demystify the process and instill confidence.
These key insights from the affinity mapping exercise have paved the way for developing a visa app that addresses user frustrations, provides clear guidance, and taps into the emotional aspects of travel. By distilling these findings into actionable design principles, we can create an app that empowers users to navigate the visa process with ease and embark on unforgettable journeys around the world.
Affinity Mapping
View Mapping
02
90%
60%
Analyze
I recruited 8 people for my initial user interviews, all of which are in my peer group. I had some hypotheses and preconceptions going into the interviews, but i also learned new information that influenced my designs.
It became evident that navigating the visa process is a daunting task for many, filled with confusion and frustration. Users expressed their longing for a solution that would demystify this intricate journey and provide them with the guidance they crave.
But beyond the practicalities of visas, the interviews uncovered a deeper layer of human emotion. The desire to explore new horizons, immerse oneself in diverse cultures, and create lasting memories proved to be the driving force behind their travel aspirations. These interviews illuminated the innate yearning for adventure and the transformative power of travel in shaping individuals' lives.
Another remarkable finding was the sense of community that users sought. The interviews highlighted the longing for connection, shared experiences, and support from like-minded individuals embarking on their own visa journeys. They expressed a strong desire for a platform that would not only assist them in obtaining visas but also provide a vibrant space where they could connect with fellow travelers, exchange stories, and seek guidance.
used various Google Suite Products as part od their travel research toolkit, including Docs, Sheets, Maps, Reviews, and Search.
had experience living abroad or living as a digital nomad
Interview Analysis
expressed a need for a mobile-friendly app to used for visa information and related travel content
100%
My Role
User Research
UX/UI Design
Interaction Design
Graphic Design
Timeline
Feb 2023 - April 2023 (7 Weeks)
Tools Used
Figma
Optimal Workshop
Vowel
The Problem
Obtaining a visa can be challenging and intimidating as it can be time-consuming, tedious, or overwhelming, leading to low motivation and ultimately giving up on it.
Project Goals
We want to know what users who live, or want to live nomadic lifestyles need and value so that we can create an experience with features useful to them to sign up and integrate into their life.
Simple and fast way to obtain a visa
Motivates users to track and learn about available options
User-friendly interface
01
Research
What is a Digital Nomad?
The MBO Partners 2022 State of Independence research study found that 16.9 million American workers currently describe themselves as digital nomads, increasing 9% from 2021 and a staggering 131% from the pre-pandemic year 2019.
Digital nomads defy a single definition, yet all choose to combine working remotely and traveling for various reasons and lengths of time. Some nomads travel for years, regularly moving across countries and continents.
Although digital nomads report high satisfaction levels, being nomadic is not without challenges. The top challenges reported by current digital nomads are personal safety (34%), being away from family and friends (32%), time zone differences making work difficult (30%), loneliness (26%), travel logistics (25%) and managing work and travel (25%).
Research Goals
Identify the specific needs and pain points of digital nomads, and use this information to develop a user-centered app that meets their unique requirements.
Determine the most effective features and functionalities for a digital nomad app, and prioritize these based on user feedback and market research.
Develop a comprehensive understanding of the competitive landscape for digital nomad apps, and use this information to differentiate the app and position it for success in the market.
Conduct user testing and feedback to ensure that the app is easy to use and provides value to digital nomads in their daily lives.
Methodologies
Competitive Analysis
User Interviews
Competitive Analysis
I researched the top (5) competitors in the marketplace for similar travel/visa services in order to asses how they meet their target customers needs, as well as pain points. (SWOT Analysis). This helped me identify any missing features that I could add to Visa Voyage and address any potential design patterns to adopt or avoid
View SWOT Analysis
One important insight learned was the significance of personalized visa support. The top contenders in the market recognized the diverse needs of users with different citizenships and backgrounds. They seamlessly integrated features that provided tailored visa information, ensuring that users could easily navigate the complexities of international travel.
Moreover, I witnessed the immense value of real-time updates and notifications. The leading apps excelled at keeping users informed about their visa application status, providing timely reminders, and alerting them of any changes or additional requirements. This level of transparency and communication instilled trust and confidence in the users, eliminating any uncertainties or anxieties associated with visa applications.
Lastly, the power of user reviews and testimonials cannot be overlooked. Successful visa apps harnessed the influence of social proof by showcasing positive feedback and testimonials from satisfied users. This served as a powerful validation and reassurance for potential users, encouraging them to choose the app with confidence.
Site Map
View Site Map
Before jumping into my designs, I wanted to explore the information architecture and develop the conceptual structure for my site. I created a site map to visually represent the website's structure and organization, outlining the pages and sections that make up the desired experiences with three key pillars:
User-Centered Design: To form the site map, I began by placing the user at the center of the design process. I carefully considered the user's journey and identified key touchpoints, from initial research and visa information gathering to application submission and tracking. By mapping out these user interactions, I ensured that the site map aligns with the user's goals and needs.
Content Hierarchy and Organization: With a clear understanding of the user's journey, I focused on establishing a logical and intuitive content hierarchy. I categorized and organized information in a way that enables users to easily locate the desired visa-related resources, such as visa types, requirements, and application guidelines. This deliberate structuring of content ensures that users can navigate the app effortlessly, finding the information they need without confusion or frustration.
Scalability and Flexibility: Recognizing the evolving nature of visa regulations and user needs, I designed the site map to be scalable and adaptable. I considered future enhancements and potential expansion, allowing for the seamless integration of additional features, such as visa status updates, appointment scheduling, and personalized user profiles. This forward-thinking approach ensures that the site map can accommodate future growth and deliver an ever-improving user experience.
Through a user-centered design approach, strategic content organization, and scalability considerations, the site map for the visa app is a well-thought-out blueprint that guides users on a seamless journey, helping them navigate the complexities of the visa process with ease and confidence.
User & Task Flows
View User + Task Flow
In order to help users achieve their goals, I prioritized key tasks and developed task flows that outlined the necessary steps to complete actions. I selected these tasks based on their importance in enabling users to achieve their objectives After gaining a deeper understanding of the user, I developed a user journey that was informed by the needs and pain points of my user personas. Taking their perspectives into account, I identified the key tasks and decision points that would be most effective in resolving their pain points.
User Journey Analysis: To form the user and task flows, I delved into a comprehensive analysis of the user journey. By understanding the specific actions, decisions, and interactions users undertake to accomplish their visa-related tasks, I identified key touchpoints and pain points. This analysis allowed me to design user flows that address user needs and minimize friction, streamlining the visa application process.
Task Sequencing and Prioritization: With a deep understanding of the user journey, I sequenced and prioritized tasks within the user flow. I carefully considered the logical order in which users need to complete various actions, ensuring a smooth progression from one step to the next. By prioritizing essential tasks and eliminating unnecessary steps, I optimized the flow, enabling users to navigate the app with clarity and efficiency.
Lo-Fi Wireframes
Starting from low fidelity designs I was able to plan out my minimum viable product features and screens. I quickly iterated desired functions and desired user flows.
Throughout the formation of the low-fidelity wireframes, I emphasized simplicity and clarity in the design. By employing a minimalist approach, I aimed to convey the core functionalities and content of the visa app without overwhelming the user with unnecessary visual elements. The wireframes focused on key features and interactions, guiding users through the app's flow and ensuring a seamless and intuitive user experience.
Through ideation, iterative design, and a focus on simplicity, the low-fidelity wireframes for the visa app were carefully crafted to provide a visual blueprint of the app's structure and functionality. They serve as a foundation for further design iterations, enabling stakeholders and users to envision the app's interface and providing valuable insights for the next stages of the design process.
View Lo-Fi
Mid-Fi Wireframes
View Mid-Fi
Creating the mid-fidelity wireframes for the visa app involved refining the design concept and adding more detail to the user interface, bringing the app's functionality to life:
Design Concept Refinement: After gathering feedback on the low-fidelity wireframes, I embarked on refining the design concept for the visa app. This involved translating the user requirements and feedback into specific design elements, such as visual styles, color schemes, typography, and iconography. I ensured that the design concept aligned with the app's branding and user expectations, creating a cohesive and visually appealing interface.
Content Integration and Information Architecture: In the mid-fidelity wireframes, I integrated actual content and refined the information architecture. This involved organizing information in a logical and intuitive manner, ensuring that users could easily navigate through the app and find the relevant information they needed. I also paid attention to visual hierarchy, using typography, spacing, and visual cues to guide users' attention to key elements and important content.
The mid-fidelity wireframes served as a bridge between the low-fidelity wireframes and the high-fidelity prototype, providing stakeholders and users with a more detailed representation of the app's interface and functionality. These wireframes allowed for further feedback and refinement before moving into the final stages of the design process, ensuring a user-centered and visually engaging visa app.
Hi-Fi Wireframes
View Hi-Fi
Creating the high-fidelity wireframes for the visa app involved refining the design details, incorporating visual aesthetics, and preparing the wireframes for implementation.
Design Detail Refinement: Building upon the mid-fidelity wireframes, I focused on refining the design details to achieve a polished and visually appealing interface. I paid attention to elements such as button styles, form input fields, icons, and typography, ensuring consistency and clarity throughout the app. I also refined the layout and spacing to create a balanced and visually pleasing composition.
Visual Aesthetics Integration: In the high-fidelity wireframes, I integrated the visual aesthetics of the app, including the chosen color palette, typography styles, and visual branding elements. This step helped create a cohesive and engaging visual experience for users, aligning the app's design with the brand identity and overall user expectations.
The high-fidelity wireframes represented the final stage of the design process before moving into the development phase. These wireframes provided a comprehensive visual representation of the app's interface, design details, and visual aesthetics, setting the foundation for the creation of the fully functional visa app.
Branding
My icons, typography selections, and logo were all chosen and created to authentically represent the values and ethos of Visa Voyage. My goal was to infuse the design with vibrant colors and iconography to create an uplifting and energizing tone. To achieve this, I first established the brand identity and then created a UI Kit to ensure consistency throughout the design. This allowed me to define the specific elements, including colors, typography, and icons, before moving on to creating high-fidelity wireframes and prototypes.
Hi - Fi Prototypes
View Prototype
Developing the high-fidelity prototype for the visa app involved bringing the design to life, enhancing interactivity, and preparing for user testing:
Design Realization: Building upon the high-fidelity wireframes, I translated the visual design into an interactive prototype. I focused on accurately representing the app's functionality, navigation, and user interactions. By utilizing prototyping tools, I brought the static design elements to life, showcasing how users would interact with the app's features and functionalities.
Enhancing Interactivity: In the high-fidelity prototype, I incorporated interactive elements such as clickable buttons, navigation menus, form fields, and animated transitions. This allowed users to experience the flow of the app and understand how different components interacted with each other. By adding interactive elements, I aimed to create a more immersive and engaging user experience, simulating the actual usage of the visa app.
User Testing Preparation: As part of the high-fidelity prototype development, I prepared the prototype for user testing. I ensured that all key features and user flows were included in the prototype and that the interactions were intuitive and user-friendly. I also created a testing plan, defining the tasks and scenarios for users to complete during the testing sessions. This step aimed to gather valuable feedback and insights from users, enabling further refinement and improvement of the app's design before its final implementation.
Task Flows:
Task 1 - Please navigate to and add the Digital Nomad Visa for Spain to ‘Your Trips.’
Task 2 - Please add a new item to your upcoming trip to Barcelona, Spain.
Task 3 - Please fill out the ‘Preferred Preferences.’
Task 4 - Please fill out the Sign-up Fields.
Usability Testing
05
Test
(Screen with feedback)
To determine the success of my design, I recruited 5 participants and conducted usability tests. Each participant went through a series of tasks and were tested on their ability to complete them. The success of each task given was based on: task completion rate and level of difficulty for user task rating.
Results:
(Rated from 1-5, with 5 being the most difficult)
Task 1 - Difficulty Rating = 3.4/5 & Avg time: 2 Minutes 17 Seconds
Task 2 - Difficulty Rating = 2.4/5 & Avg time: 1 Minute 14 Seconds
Task 3 - Difficulty Rating = 1.4/5 & Avg time: 2 Minutes 46 Seconds
Task 4 - Difficulty Rating = 1.6/5 & Avg time: 0 Minutes 38 Seconds
Key Findings:
Navigation Challenges: Users expressed difficulty in finding specific visa information and navigating through the app's menus and sections. Some struggled to locate important features or access relevant resources, leading to frustration and confusion. This highlighted the need for clearer navigation and more intuitive labeling to help users easily find the information they were seeking.
Clarity of Instructions: Participants raised concerns about the clarity of instructions and guidance provided within the app. They found certain tasks or processes confusing and requested more explicit instructions or tooltips to assist them. This highlighted the importance of providing clear, concise, and context-sensitive instructions to ensure users can complete tasks effectively and efficiently.
Visa Process Transparency: Users expressed a desire for greater transparency and visibility into the visa application process. They sought real-time updates, notifications, and status tracking to stay informed about their application progress. This emphasized the need for integrating features that provide users with timely updates and notifications to enhance their confidence and peace of mind throughout the visa process.
By uncovering these findings during the usability tests, I gained valuable insights into the pain points and challenges users faced while using the visa app. These findings will inform iterative design improvements to address navigation issues, enhance the clarity of instructions, and provide a more transparent visa application experience for users.
04
Design
Interview Debrief
In order to better empathize with users, I conducted user interviews to learn their perspective and get a better understanding of their motivations and pain points around traveling and obtaining a visa.
User Interviews
Method
Particpants
Created an interview discussion guide based on open-ended questions to allow participants to share their experiences
Conducted and recored interviews for 8 participants
Organized notes to generate an actionable interview debrief
8 participants
Age: 29-34
4 Males & 4 Females
Various level of Travel & Visa experience
Users desire simplicity and clarity: The key learning from user interviews is that visa app users crave a simple and clear user experience. They want an app that can demystify the complexities of the visa process by presenting information in a straightforward and easily understandable way.
Emotional connection is essential: User interviews revealed that beyond the practicalities of visas, there is a strong emotional aspect to their travel aspirations. They seek an app that captures the excitement and possibility of exploring new cultures and embarking on life-changing adventures.
Community and support are valued: Users expressed a strong desire for a supportive community within the visa app. They want a platform where they can connect with fellow travelers, share experiences, and seek advice. Building a sense of belonging and fostering connections among users emerged as a crucial element for their visa journey.
Overall, these key learnings underscore the importance of creating a visa app that balances simplicity, emotional engagement, and community support to meet the needs and aspirations of users.
Key Findings
Final Design
After a series of iterations and incorporating user feedback, the final design of the visa app emerged with the following key features:
Streamlined Navigation: The app now offers a simplified and intuitive navigation system, allowing users to easily find the information they need. Clear and concise labels guide users through the different sections, ensuring a seamless browsing experience and reducing frustration.
Enhanced Visual Design: The visual design of the app has been refined to create a visually appealing and cohesive experience. A clean and modern interface, along with a well-structured layout, promotes readability and highlights important information, making the visa application process more engaging and enjoyable.
With this final design, the visa app provides an aesthetically pleasing and user-friendly experience. The streamlined navigation, enhanced visual design, and interactive features combine to create a seamless and enjoyable journey for users, simplifying the visa application process and empowering them with the information they need at their fingertips.
06
Final Design
Let's work
together.
Key Takeaways
The insights gained from this UX case study have reinforced the importance of user-centric design and I have grown as a designer. I am excited at the opportunity to have worked on a project that prioritized the user, and I now recognize the value of continuously improving designs based on user feedback.
The time constraints of this project had an impact on my design process and overall product execution. I had to prioritize the features that were most important for users to achieve their goals.
This experience taught me to design iteratively and seek feedback throughout the design process. I learned to avoid becoming too attached to one particular design and to remain flexible in my approach.
To provide a more personalized experience, I plan to add additional pages to the website that allow users to automate their travel document collection and view/track their visa applications in real time.