Viaggio is a travel app that incorporates a beginning to end journey to plan, organize, and manage a trip alone or collaboratively. The challenge was to redesign a new traveling app to make the user feel more excited, less stressed, and organized while booking, planning, and traveling.
User Interface, User Experience, Brand and Design Identity
UX UI Springboard Bootcamp
Help users have one singular and collaborative platform where they can plan, organize, and store their booking and travel documents during travel.
On the internet, there are on average 148.3 million bookings a year.
Of Americans are stressed
out over planning family
Don’t use all their vacation days due to being a
I interviewed a total of 5 participants who travel and book trips over three times a year. In framing open-ended questions and creating a scenario of booking and planning a trip in a large group, I got insight to their experience, behavior, emotions, and struggles as they were planning.
I found that participants avoided big decisions, didn’t feel confident about their processes nor the choices they made. To add on, participants used many platforms to do research, to book, and feel out what the best options were. This forced them to navigate through many tabs/windows which caused them to feel lost and disorganized. All participants said they would have texted their friend group to discuss possible airfare tickets, hotels, and activities.
Additionally, most of them said that receiving screenshots from a friend would prolong research and some links they would receive would expire. The participants relied on storing their travel/booking information on their iPhone in the notes app, by memory, or by their confirmation email with their reservation.
Travel 3+ a year
01. Similar booking process
02. Felt overwhelmed with options
03. Communication through texting
04. Avoided making big decisions
05. Multi platform research
User Research Questions, Quotes, and Observations
“Planning for you and your significant other and 2 couples who live in different states to Tusan, Arizona from July 14-27. Please show and tell me how you would go about doing that? Please plan the flight, stay, and activities.”
“Booking for a trip is like buying a car. A lot of discounts, promotions, then added surcharges
“So many options. Mixed reviews. "A catch" with ulterior motive, so don't know what is honest.”
He felt frustrated when the hotel price went up when changing the dates, and wanted to change the flight dates based off the price.
She was very scattered when she was conducting the task. She had many windows and tabs open and couldn’t remember where things were and if she did or did not do something.
It seems like she has a routine established and was really organized with her method of planning a trip.
Affinity Map and Empathy Maps
I organized and clustered my research together into an affinity and empathy maps. This was to understand and determine who the personas should be and what the areas of improvement are for the process of booking a trip.
At this point, I had a thousand ideas. It was time to think about the purpose of the application and identify the persons who would use it. After evaluating the research from my 1:1 interviews, creating Affinity Map, and Empathy Maps, I created two personas: Penelope: The Planner and Nicolas: The Non-Planner.
During my 1:1 interview process, there were two main groups that were strongly diversified. 60% of the participants were unconfident, hesitant, and were disorganized throughout the task. These included planning a trip for themselves in a large group including a flight, stay and activities.
Meanwhile, the 40% of the participants had a very strong strategy for the way they planned out a trip, made big decisions.
My goal is to make the Nicolas users feel more confident, at ease, and feel like planning is a approachable process like the Penelope users.
Heuristic Analysis and Competitive Research
of Competitive Research
For my competative research,
I took a look at
Pebblar, inspirock, and Geovea. I analyzed three heuristic concepts.
By sectioning each company with heuristic concepts, I organized my information on google sheets. I examined how the company had their own strengths and weaknesses and then determined how to include those strengthens into my own design.
1. Help & Documentation
2. Consistency and Standards
3. Aesthetic and Minimalist Design
With the information I gathered from my competitor research and affinity mapping, I created a site map that illustrated what I thought would best navigate throughout the application.
Initial Wire Frames
When reassessing the interview notes, I established three red routes that both the personas would need to take. Since Penelope users were familiar with booking,
I thought it would important to incorporate methods to help Nicolas users devise a step-by-step process of booking an entire trip.
Since users were too familiar with the booking process, I thought it would be best to provide a guided journey to teach from beginning to end.
1. Add Stay to Itinerary
2. Book Flight, Stay, and Activities
3. Check Notifications
User Story Sketches
User Story Process
I sketched the screens that related to the red routes and establish the use of icons, information, and rhythm that the application would have.
01. Add Stay to Itinerary
02. Book Flight, Stay, and Activities
03. Check Notifications
Due to Covid 19, I was restricted from testing in person. I tested participants on facetime and skype by reaching out on social media with a informal questionnaire to determine if they were a Penelope or a Nicolas user. I tested 5 people my red routes, and asked them to talk aloud with while completing the tasks below.
01. Help & Documentation
02. Consistency and Standards
03. Aesthetic and Minimalist Design
My findings were that all participants had trouble with one task; Adding stay to the Itinerary. They shared that the screen was very distracting with the number of icons/words, and weren’t confident to where to press. Most of them. Also, they shared that the icons I used weren’t universal enough, which created some confusion.
Facebook and Instagram
Travel 3+ a year
I made were to make the interface more minimal and have
a higher signal-to-noise ratio
I initially wanted to give the user as many options they wanted or thought they needed, but that just left them confused. I think by creating different areas with the hamburger or 3 dots icon that would include more options I initially had out in the open in the app will be necessary.
Low Fidelity Prototype
By establishing the improvements and changes I needed to make, it was easy to establish elements to create a more minimal interface, incorporated higher signal-to-noise ratio and contain more universal icons throughout the design.
Brand Identity: Brand Attributes
Based on the insights from the user research, participants felt overwhelmed and unconfident. The participants felt like the process wasn’t approachable. I wanted to create a brand where the users felt the opposite. That is why I chose these adjectives for the brand attributes.
Brand Identity: Photography
I wanted to incorporate heavy travel photography throughout the brand.
I wanted to encompass images that a traveler would post or feel relatable towards. Some of these images were a mix of people being social, posing in
front of monuments,
or traveling scenery.
Brand Identity: Color Pallete and Typography
High Fidelity Prototype
I incorporated my brand attributes, brand photography, and brand identity into this prototype.
Throughout creating my high fidelity prototype, I created more screens than my red routes. I wanted to design majority of the screens to identify the usability of the Viaggio app.
Feels logical and organized
Travel needs are met
Most journeys made sense
Essential overlays were not located on the necessary screens
Some UI elements were not clear and prominent
High Fidelity Prototype
I adjusted the screens and navigation based off my findings from the usability testing.
Altered the icon to create a drop-down for more options
Added additional flight information that was missing
Created more depth by adding a travel scenery background with the itinerary overlay
Added buttons to the itinerary for a better user experience
Redesigned the itinerary slide by reorganized information based off confusion of user
Created more depth by adding a travel scenery background
I added additional options for the user basing off their needs based off the tasks I asked them to complete.
Added three dot icon on the main chat screen to create a faster and better experience for the users.