Vacationer
My Role: User researcher, UX designer, UI designer
Timeline: April-June 2022 (10 weeks)
Context: I designed Vacationer in a design ideation and prototyping class completed towards my Master's of Science in User-Centered Design. I worked with a partner for the initial research and ideation phase, and later, I took on the role of the sole designer and usability test coordinator. Through this project, I gained valuable experience in team collaboration, user research planning and execution, wireframing, prototyping at multiple levels, and facilitating usability tests.
Project Overview
Problem Statement
Trip planning is time-consuming and overwhelming. People spend hours navigating different websites and apps researching destinations, activities, and accommodations. A user-friendly platform that centralizes, simplifies, and streamlines the process and provides guidance during vacations is in demand. As tourism recovers from the pandemic, such a product is highly desirable.
Proposed Solution
Vacationer is a travel planning app that caters to the needs of travelers who wish to create their perfect getaway with minimal stress. It offers a simple way to discover and organize destinations, activities, lodging, restaurants, and more. Vacationer provides users with a centralized location to find ideas, keep lists, and create itineraries.
Discover
User Research
My partner and I conducted contextual inquiry research on our target audience's travel planning habits. We interviewed four people and observed their trip planning process to gain insight into their goals, actions, and challenges informing our design direction for a more convenient trip planning experience.
Contextual Inquiry Methods
Interviews
My partner and I talked to four people about their trip planning process.
Field Observation
We then observed the users as they followed their typical steps for planning a trip.
“I have to keep going back through all the different places and activities I’ve looked at, going back and forth, back and forth, back and forth between all the options. I mean it takes hours and hours to plan a trip.”
–Participant 1
“I like to have a couple anchor activities planned each day, then I’ll build around that so I don’t have to spend too much time searching while on vacation.”
–Participant 2
“I save travel ideas everywhere. I have a section in my to-do list, and lists in a couple apps about travel and different places I want to go and lists of what I could do there with links. I also have notes in my phone.”
–Participant 1
Key Insights
Our research revealed several insights into user behaviors and needs, with a few particularly impactful findings shaping our design direction the most.​
​
-
Travelers feel frustrated by the process of navigating multiple websites, apps, and tools to decide where to go, what to do, and where to stay. Additionally, they keep notes of their travel ideas in multiple locations, making it difficult to keep track of them all.
-
Users like to do some planning in advance to maximize enjoyment during their trip, and to avoid spending time figuring out next steps on the spot.
-
Common goals include a centralized location for trip planning, a flexible itinerary planner, and organized lists of activities to do while on vacation.
Define
Whiteboarding Session
After contextual inquiry, my partner and I met up for a whiteboarding session, where we identified common user goals and brainstormed ideas for a product that meets these goals and created our first preliminary sketches. We developed two scenarios for how users would interact with our app and generated ideas for features like an itinerary builder and centralized vacation activity wishlist.
Scenario Maps
Next, my partner and I developed two scenario maps, adapted and expanded from the whiteboarding session, outlining steps we imagined a user would take when using our proposed app to plan a trip. These scenario maps helped us record ideas, questions, and comments we wanted to address. This helped us better understand our target users, analyze and expand our ideas, and identify opportunities for key features and tasks before beginning the design process.
Choosing a destination and creating an itinerary
Finding a place to stay near preferred destinations
_edited_edited.jpg)
Sketches
At this point, I began working individually on my design ideas, using the 10x10 method to create sketches inspired by each scenario map to visualize possible app appearance and functionality.
By putting my ideas down on paper, I was able to quickly generate and evaluate multiple options in order to begin evaluating them and making decisions about which ones to move forward with and which ones to discard. This process enabled me to visualize my ideas, refine my thinking, gain a fresh perspective, and uncover any gaps or inconsistencies early on.
Storyboards
Next I used storyboards to develop and communicate my app concepts and generate new ideas in a narrative formata, showcasing the user's experience interacting with the app in common trip planning scenarios. This helped me identify design opportunities, determine finer details of proposed features, and establish design goals. It also helped me evaluate and prioritize ideas, enabling me to make informed decisions about what to include and what not to include in the final product.
Design Direction
Because of the key insights we discovered that were common to both users and the ideas generated during brainstorming, sketching, and storyboarding, I developed a design direction that includes two key features.
Wishlist to centralize and save ideas for activities and locations.
Itinerary builder tool to plan activities in advance.
Ideate
Paper Prototype
To quickly test my ideas, I created a paper prototype. This low-fidelity version was beneficial because it was quick to create and modify on the fly, and helped myself and my usability testers focus on the features and ideas instead of the visuals.
​
Usability Testing
I conducted two usability tests with travel enthusiasts to see if the prototype was functional and effective, and to gauge user interest in proposed features.
​
After assessing usability and receiving feedback, I identified areas of improvement for the next prototype iteration, such as adding a map feature to the wishlist page and activity description pages to show nearby destinations and help users plan their day. I also made changes to app navigation based on user preferences, and to the processes of accessing activity descriptions, adding destinations to wishlist, and accessing the itinerary builder, with a design more optimized for smartphone dimensions.
Low-Fidelity Prototype
Next I created a low-fidelity clickable digital prototype to build out my concepts and test if they functioned together as intended. I prioritized two key features, the Vacation Wishlist and Itinerary Builder. This focused approach allowed me to refine and dedicate more attention to detail for these two specific features in the limited timeframe. As a result, I was able to create a comprehensive and detailed design. Although Balsamiq offers limited control over visual design, this helped me focus on features and usability over aesthetics at this point.
Usability Testing
I ran two usability tests, testing user tasks such as adding items to the wishlist, finding attraction info, creating an itinerary, and using the itinerary. Testers were asked to reorder itinerary, add new activities, and find suggested destinations. Observing users interact with my app design helped assess the user experience and app usability.
​​
Usability tests revealed key findings that led to several design changes and additions. I added a button to quickly add activities to the itinerary instead of having to loop back to the main wishlist page, optimized the itinerary page layout and intineray directions to improve clarity, revised the wishlist page layout and labeling, and changed the activity page's "add to itinerary" call-to-action and search function. Additionally, I created an itineraries homepage and a new itinerary creation screen.
“The map is really helpful to show me where the locations are. If I'm there [on vacation], the first thing I probably want to know is like the proximity of things that I want to do related to where I am currently.”
“I gotta try this itinerary builder. If I'm planning a day trip, I would definitely want to do that.”
Design
Final Prototype
Following the design and usability testing of the first two prototype iterations, it was time to convert my designs into a higher-fidelity version and fully build out the final prototype design solutions in Mockups. At this stage, I finished developing the Vacation Wishlist and Itinerary Builder tools and added more intermediary pages to complete the processes.
Vacation Wishlist
The Vacation Wishlist is a key feature that fulfills the target user groups' goal of having a centralized location to save vacation plans and ideas. Users can view their saved activities and restaurants on a map or in a list, search and filter them, and select a destination to learn more and plan their day, another main user goal. From the destination description pages, they can also see saved and nearby attractions and restaurants on a map, saving time on searching. The Vacation Wishlist is also a way to add activities to an itinerary or create a new one, which is the second major feature of Vacationer.
1
Itineraries
The Itineraries tab is the second major feature, where users can create and view saved itineraries. Planning travel days in advance is a main user goal, and the itineraries fulfill that. Users can add activities from their wishlist or discover new things in the area and input preferred transportation to create the itinerary. They can reorder and edit the itinerary as needed and get directions between each destination. With directions easily accessible, users can focus on enjoying their day instead of worrying about logistics, fulfilling another main user task.
Annotated Wireframes
I created annotated wireframes to explain the functionality of four key pages. These instructions would help a development team understand the app's elements during the build process.
User Flow
I created a user flow of the overall app, which includes both tested flows and upcoming features and screens, alongside the final prototype for Vacationer. This step was helpful for understanding and illustrating the prototype flows in context and determining how they will fit into the overall app.
Usability Testing
After running two final usability tests on my prototype I made some last updates and usability improvements to my prototype. Firstly, the "add to wishlist" plus button on the main page was deemed to be distracting, so I changed the color. I also discovered that users found the some iconography on the itineraries preview page confusing, so I replaced it with something more subtle. I added a notes feature to jog users' memories about itinerary contents. I changed the checkboxes next to itinerary destinations into check circles and added a pre-checked circle to the starting point to address user confusion. I ore sharing options and a separate "completed" tab was added to the itineraries main page.
What I learned
This project provided an opportunity for me to learn about prototyping at different levels of fidelity. As one of the first projects in my program where I created prototypes, I gained valuable experience in this area. In addition to learning about prototyping, I gained valuable experience in collaborating with a teammate during research and ideation. I learned how to effectively delegate responsibilities and synthesize research findings from multiple sources and researchers.
Next Steps
To further improve the prototype and app, there are several next steps I want to take. I would like to do real-world testing with someone on vacation to ensure the design is intuitive and realistic in context. I want to explore adding more and different information to the activity description pages. I plan to design and add the remaining features to the prototype with finalized interactions, UI design, and content. Lastly, as I've improved my prototyping skills since completing this project, I want to port the design to an industry-standard prototyping app like Figma, Axure, or Adobe XD for a more realistic look with polished animations.