Overview
Volare is a travel planning application aimed at helping travelers simplify their travel planning experience. Traveling should be about making memories, having fun, and decompressing – Volare helps craft a stress-free vacation experience so users can focus on what matters.
The problem
Staying organized during travel and travel planning can be challenging and time-consuming.
Users are overwhelmed with an abundance of information, different group opinions, and mapping out how much time activities take. Once the trip finally rolls around, travel details often become disseminated and lost amongst various locations.
The solution
Create a single source of truth for travel information that can be shared with other travel group members. Users can create itineraries for upcoming trips, develop detailed daily travel plans, and view the average group consensus and preferences for an upcoming trip.
Process
User Research & Synthesize
Ideate
Sketch & Wireframe
UI Design & Prototype
Usability Test & Synthesize
Redesign
My role
Sole UX/UI Designer
Tools
Miro
Figma
Adobe Illustrator
InVision
Secondary research
To find out what people perceived as the main challenges when traveling or planning a trip, I used a combination of keyword and Boolean searches on Google. Through this, I found that most referenced travel-related issues included budgeting, flight delays, missing documents, jet lag, deciding on activities, and health emergencies.
Primary research
Next, I set out to conduct primary research by interviewing candidates. My objective was to evaluate the main pain points experienced by travelers and how I might decrease these frustrations. I developed a screener survey to identify potential candidates to take part in user interviews and recruited survey participants through travel communities on social media and Discord.
Surveys
After over 70 responses on my screener survey, I realized my participant characteristics were too specific and restricted the number of qualified candidates to participate in my user interviews. To mitigate this, I adjusted my participant characteristics to gain a more holistic view of issues experienced during travel and travel planning.
Interviews
After quickly determining the qualified participants by color-coding my screener survey responses, I reached out to the potential candidates via email and sent over a Calendly link with available times to interview.
I recorded and auto-transcribed my interview sessions, which allowed me to be present and focus on asking follow-up questions rather than on taking notes.
Top Pain Points
Travel information is located in too many different places.
Planning for different people’s needs, values, personalities, and budgets.
Understanding how long things take, trip logistics, spatial reasoning.
With an abundance of information available, it is hard to find activities pertinent to each person's preferences. Research takes lots of time and resources can be biased.
Discovering new spots while on vacation.
Affinity mapping
Next, I tackled synthesizing the data. To organize and make sense of my findings, I generated an affinity map with 129 sticky notes grouped into seven sections abstracted from the interviews I conducted.
Empathy maps
From analyzing the affinity maps, I was able to identify two types of users and create empathy maps, the head honcho planner and the off-the-beaten-path vacationer.
Personas
Using my empathy maps and qualitative data, I created two personas and brought my findings to life. The personas helped me empathize with the users and drove my design decisions for this project.
Olivia Delray | The Head Honcho Planner
The organized traveler who opts for detailed, itinerary-oriented vacations.
Stella Demie | The Off-the-Beaten-Path Vacationer
The traveler who is always looking for the coolest spots and is open to spontaneity.
Problem statements (HMWs)
To wrap up my research analysis, I created 7 How Might We (HMW) statements based on the top 5 problems discovered in my research. I made sure to phrase each problem statement open-endedly, focused on how I might positively impact the user, and did not include a specific potential solution.
How might we alleviate travelers’ frustrations surrounding the abundance of travel information available on the internet?
How might we facilitate opportunities for people to discover travel information pertinent to their needs?
How might we increase source reliability when searching for travel information?
How might we enhance the organization of one’s travel resources?
How might we simplify how people view their travel assets?
How might we help clarify logistics related to time and distance?
How might we relieve frustrations on planning for different group values and budgets?
Ideate
I set a 30-minute timer for ideation and sketched out eight ideas for how I might solve some of the user problems identified in my problem statements. Through this process, I realized that some of my ideations could be combined into one solution.
User stories
I referred back to my eight iteration sketches and written explanations to create 33 user stories based on the potential user’s goals and possible ways that users may want to interact with my app. After documenting all possible user stories, I separated them by priority (high, medium, and low) to make determining the necessary features for a minimum viable product (MPV) straightforward.
Site map
For my site map, I evaluated how each of my high-priority user stories would come to life in my application. I considered how to map out the application’s information so that it would make the most sense to a potential user.
User flows
After creating my site map, I determined three red routes, the top actions a potential user may want to complete using my application.
Using the three red routes, I put myself in a potential user’s shoes and imagined what exact steps and screens they would see on the application to complete their desired action.
Sketching
During the sketching phase, I thought about what elements needed to be on each page, what the user needed to accomplish on each screen, and how they were going to accomplish it. I tested out several methods of displaying content in an intuitive and clean way before settling on the following sketches to digitize into wireframes.
Low fidelity wireframes
While wireframing, I realized that some of my concepts were slightly confusing. I had to simplify how I displayed information, focus on consistency, and use progressive disclosure so I would not overwhelm the user with an abundance of information.
Mood board
To develop the mood board, I used my marketing and branding expertise and reflected upon the underlying purpose of the product. I thought about how I wanted Volare to be portrayed in the marketplace and what UI elements might help convey this message.
Style guide
I used my mood board and existing low-fidelity wireframes to create a style guide: a set of rules and guidelines that define my brand. The style guide helped create structure and consistency for all future brand elements.
High fidelity designs
As I used my style guide to transform my low-fidelity wireframes into high-fidelity designs, I ran into some accessibility issues I needed to resolve.
Problem one
Some of the color contrast combinations I chose were not AA compliant, so I made adjustments to the style guide to meet accessibility standards.
Problem two
There were some legibility issues with the white text over cards that contained image backgrounds. To increase contrast and legibility, I added a linear gradient overlay over each image.
Prototype
The most exciting part finally arrived – I was able to put my ideas to the test and see how users react to the product through user testing a prototype.
To stay organized while developing the prototype, I numbered my Figma screens sequentially by "red route" and then exported the frames to InVision. I then created separate sets within InVision for each red route so that I would know what screen to link to when creating hotspots.
Usability testing
To begin the usability testing process, I built a Usability Test Plan that outlined the objective of the usability test, test questions, testing method, participant characteristics, and methods of recruiting potential participants.
I then created a Usability Testing Script to ensure that I asked all test participants the same questions – this helped me certify standardization and receive the most accurate feedback. After conducting a few usability tests, I quickly noticed common usability issues between participants and noted where to improve my design.
Synthesize
I then reviewed all of the recorded user testing sessions and noted the user's interactions with the application, comments, and suggestions while noting how I could iterate upon the design.
Using Miro, I compiled sticky notes of the user issues and segmented each problem based on the priority level to determine what to adjust in the redesign process.
Issue 1 | Critical
Users could not find where to add their personal preferences to an upcoming trip. Every user I tested immediately went to itineraries to attempt accessing this feature.
Issue 2 | Major
Users were confused by what the numbers on the map correlated to. Some believed them to correlate to the days of the trip rather than daily activities.
Issue 3 | Major
Users were confused by what “budget” referred to within the personal preferences section. Some believed it correlated to the total budget spent thus far.
Redesign
Of the 15 user issues discovered during user testing, 10 were addressed in the redesign to arrive at my final UI design.
Resolution 1 | Group preferences
I moved group preferences & personal preferences to a tab within the itineraries section, a more intuitive location for the user.
I redesigned the UI of the Travel Group section and moved the travel group profile images within this section to add context to the intended use.
Issue 2 | Map interaction
I moved the map’s location under the itinerary items.
I added an explanation for how to interact with the map.
I added numbers on each itinerary activity that correlated with the map's numbers.
Issue 3 | Wording
I adjusted the language from “Budget” to “Your Trip Budget” to add clarity.
Takeaways
Reflecting on my work, I now realize I got a bit caught up in the details early on, especially in ideating. Looking back, I realize now that I should spend more time focusing on the ideations' structure and concepts, and saved more of the details for wireframing.
A few challenges that I faced throughout this project:
When wireframing and redesigning, I was challenged with wanting to fit all items that tied together conceptually on one page. After taking a step back, I realized that this provides cognitive overload to the user. I overcame this by breaking up concepts into tabs and using progressive disclosure.
I was also challenged with UX writing when finding the most concise way to communicate messages without using jargon or being ambiguous. In user testing, I discovered some of my headers were too concise, which led to confusion about how to use certain features. I addressed this by clarifying my messages and adding instructions when it felt necessary in my redesign.
Overall, this project confirmed my love for constant creative problem-solving and finding room to improve visually and structurally.