Case Study - Family Travel Tours | UX Design | Graphic Design | AI

Family Travel Tours

UX / UI

The Product:

The site is for a new brand based in different countries. The company specializes in family package tours.

Project Duration:

November 2021 – December 2021

Role:

Lead UX / UI

Responsabilities:

User Research, Sketching, Wireframing, Prototyping

Audience:

people between 25 to 55 years old

Main Device:

Web

Understanding the User

User Research
Persona
Problem Statements
User Journey Maps

The first research group was parents who wait for vacation dates to go on a trip with their children. The second research group was parents who travel with their children, making videos for different social networks.

The first group reveals there were a few agencies focused on family travel tours that help families to strengthen their bonds and most of them are focused on one continent.

The second group revealed that there were no pages aimed at vloggers and that developing in that field is very complicated for them because they have to search many resources on different pages, which took a lot of time.

User Research Pain Points

1 Time

It takes time to look for tourist packages specialized in family trips that help families to strengthen their bonds.

2 Variety

little variety of specialized family trips

3 Profile

Most of the sites do not have a profile system that helps parents and vloggers to save their preferences and have benefits

4 Ranking

It is necessary to see what the best travel packages have been

Persona: Ricardo

Problem Statement

Ricardo is a Family Vlogger who needs to find the best tours for family travels because he recommends them through his Youtube Channel targeting families

User Journey Map

My Goal

My goal was to define how usually is the process to buy a travel ticket and find the needs and opportunities.

Starting the Design

Sitemap
Paper Wireframes
Digital Wireframes
Low Fidelity Prototype
Usability Studies

Sitemap

The main Goal was offering a different kinds of packages from different continents and overall focused on strengthen family bonds. Then add a profile and payment system that benefit vloggers.

Paper Wireframes

This is just a sample of a section “Home Page” where I made 5 sketches, marking the important sectors of each one with a star sign to define a single sample in a final sketch. Doing this same action for each important page (Tours, Tour Details, Contact, Profile, Payment System).

Paper Wireframes

Taking the time to draft iterations of each screen of the website on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

When defining the design I always had as a primary idea that the system had to be agile.

Paper Wireframes Screen Size Variation's

After designing for desktop I adjust each design for the mobile screen. In the paper wireframe, you can see each mobile wireframe design besides desktop wireframe design.

Digital Wireframes

As the initial design phase continued, I made sure to ground the screen by adding the details most relevant to users.

Digital wireframe screen size variation(s)

After the initial design for desktop I continued my work to make the site responsive for tablet and mobile.

Low-fidelity prototype

The low fidelity prototype shows how the necessary characteristics of the user are connected with the search flow, profile and payment

Usability Study: Parameters

Study Type:

Unmoderated Usability Study

Participants:

5 Participants

Location

Lima, Peru

Length:

10 – 15 minutes

Usability Study: Findings

Interaction

add interactions to help customers realize there is a second way to review details before payment.

Accent

delete the color accent of accessibility

Location

create a return link to travel Tour Detail in Payment section

Refining the Design

Mockups
High Fidelity Prototypes
Accessibility

Mockups

Based on the knowledge of the usability study, I made changes in the payment section, adding a color accent on the optional button for a second revision. Also, I added a button back to the tour detail page.

In this case, I eliminate the distractions of the site that confuse the user of its main objective by removing the color accent of the accessibility button.

Mockups: Original Screen Size

here you can see other important pages of this site

List of Tours

Tour Description

Tour Detail

Profile

Profile Edited

Mockups: Original Screen Size Variations

here you can see other important pages of this site

Tour Description

Tour Detail

High-fidelity prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as various changes while redesigning it.

Accessibility Considerations

I use heading with different sized text for clear visual hierarchy

I use color validated with WCAG which also helps to different buttons and in the checkout process

The design is focused on being responsive so the user can navigate on different kinds of screens

Going Forward

Takeaways
Next Steps

Takeaways

Impact:

Our target users shared that even when the format was different from the usual, it was easy to achieve the main goal thanks to the good location of the buttons

What I learned:

That even when you think about every aspect of the design there’s always something new to learn about the user needs in the usability tests.

Next Steps

Add a google search icon to write the destiny so the user can go directly for what they want instead of searching all over the site or searching the destiny in the main list.

Conduct follow up usability testing on the new website

Identify any additional areas of need and ideate on new features

Let's Connect

Thank you for reviewing my work on the Family Travel Tours Website!
If you’d like to see more or would like to get in touch, my contact information is provided below:

Phone: +51 987 295 478
Email: [email protected]
website: www.svenangeles.com
Behance: https://www.behance.net/svenangeles
https://www.linkedin.com/in/ruben-angeles-85b26359/