Viaggio

12345.png
Title 3.png

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.

Services:

User Interface, User Experience, Brand and Design Identity

Year:

2020

marten-bjork-FVtG38Cjc_k-unsplash 1.png
Screen Shot 2020-09-04 at 12.23 1.png

Problem Statement:

 

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.

89% of Americans are stressed out over planning family vacations.
44% don’t use all their vacation days due to being a “non planner”

pexels-spencer-davis-4388167.jpg

User Research

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.

Details:
Partcipants: 5 participants
Screener: Travel 3+ a year and books online
Condition: Moderated Skype and Facetime

 

Findings:
01. Similar booking process
02. Felt overwhelmed with options
03. Communication through texting




 

pexels-roman-odintsov-4553618.jpg
pexels-nadi-lindsay-5171029.jpg

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.

pexels-maël-balland-3099102.jpg

Personas

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, 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 an approachable process like the Penelope users.

Mask Group.png

Penelope

"Research is key, it eliminates the stress."

About:

Penelope lives in New York City and is a project manager for a production firm. She strives for organization and enjoys research to stay informed. Her desk is always finely organized with highlighters, post-it notes and organized folders. Penelope travels fairly often for work and needs to choreograph trips for her coworkers. She also goes often on “girl trips” and weekend getaways when she can.

Goals

She is concerned with speed, efficiency, accuracy, and wants apps to be easy on the eye.
She would use this for work and her personal life. She would use it x1 a week to book a trip.

She would need to share all the itinerary information with her colleagues before booking.
She would need to feel like this is an organized process and have easy steps.

Mask Group-1.png

Nicolas


"I get stressed when I have to plan something, I usually let my parents or friends plan vacations."

About:

Nicolas lives in Florida and is an insurance agent at a corporate office. He lives a slow-paced life and doesn’t let the “big things” overwhelm him. Nicolas is somewhat comfortable with technology but isn’t too knowledgeable about new software or apps. He mainly travels by car to visit friends in nearby states. He gets overwhelmed while trying to plan a long trip with airfare and hotel. If he were to travel, his parents or friends would do all the planning for him.

Goals:

He cares about speed, accuracy and wants the app to be easy to understand.
He would use this for personal use. He’d use it x6 times a year.

He would use this on his own and have his friends simultaneously use it to plan.
He’d want this to direct him on a step-to-step basis.

 

Mask Group12345.png

Red Routes 

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.

Group 37.png

1. Add Stay to Itinerary

2. Book Flight, Stay, and Activities

Group 39.png
Group 38.png

3. Check Notifications

User Story

I sketched the screens that related to the red routes and establish the use of icons, information, and rhythm that the application would have.

Mask Group-1.png

1. Add Stay to Itinerary 

Mask Group.png

2. Book Flight, Stay, and Activities

3. Check Notifications

Mask Group-2.png
swsedfgv.png

Guerrilla Testing

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 an informal questionnaire to determine if they were Penelope or a Nicolas user. I tested 5 people on my red routes and asked them to talk aloud while completing the tasks below.

1. Add Stay to Itinerary
2. Book, Flight, Stay, and Activities
3. Check Notifications​
 

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 wasn’t confident about where to press. Most of them. Also, they shared that the icons I used weren’t universal enough, which created some confusion.

Details:
Partcipants: 5 participants

Method: Instagram

Screener: Travel 3+ a year, books online

Condition: Moderated Skype and Facebook

ghjk.png

The improvements 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 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.

1234532.png

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.

Grad_17.png

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.

SDFS.png

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.

qwerewwe.png

Brand Identity: Color Pallete and Typography

Group 10.png
Group 9.png

High Fidelity

I incorporated my brand attributes, brand photography, and brand identity into this prototype.

Screen Shot 2020-09-03 at 2.54.22 PM.png
Screen Shot 2020-09-11 at 9.50 1.png
Screen Shot 2020-09-04 at 12.23 1.png
Screen Shot 2020-09-11 at 10.11 2.png
Screen Shot 2020-09-11 at 9.52 2.png
Screen Shot 2020-09-11 at 9.55 1.png
Screen Shot 2020-09-11 at 9.51 2.png
Screen Shot 2020-09-11 at 9.51 2.png
Mask Group.png
Screen Shot 2020-09-03 at 2.56.14 PM.png
asssssss.png

Usability Testing

Throughout creating my high fidelity prototype, I created more screens than my red routes. I wanted to design the majority of the screens to identify the usability of the Viaggio app.

Testing

1. User Friendly
2. Feels logical and organized
3. Travel needs are met
4. Brand

 

Findings

1. Most journeys made sense
2. Essential overlays were not located on the necessary screens
3. Some UI elements were not clear and prominent

Image by Ivana Cajina

High Fidelity Prototype

High Fidelity Prototype

I adjusted the screens and navigation based on my findings from the usability testing.

Solution 1: 

1. Altered the icon to create a drop-down for more options
2. Added additional flight information that was missing
3. Created more depth by adding a travel scenery background with the itinerary        overlay

4.  Added buttons to the itinerary for a better user experience

QWERT.png

Solution 2: 

1. Redesigned the itinerary slide by reorganizing information based on the confusion of the user
2. Created more depth by adding a travel scenery background

DFGGG.png

Solution 3: 

1. I added additional options for the user based on their needs based on the tasks I asked them to complete.

ASADADA.png

Solution 4: 

1. Added a three-dot icon on the main chat screen to create a faster and better experience for the users.

FFFF.png