Family Travel Tours


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


Lead UX / UI


User Research, Sketching, Wireframing, Prototyping


people between 25 to 55 years old

Main Device:


Mockup Presentation - Site on Desktop
Mockup Presentation - Site on Tablet
Mockup Presentation - Site on Phone
3 -Case Study - Design a Website for a Travel Agent - Project Overview

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



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



little variety of specialized family trips



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



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.

User Journey Map Travel Agent-2

Starting the Design

  • Sitemap
  • Paper Wireframes
  • Digital Wireframes
  • Low Fidelity Prototype
  • Usability Studies


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). 

Bocetos - Homepage

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.

Bocetos - All Pages

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.

Bocetos - All Variations Size

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 Website

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.

iPad Pro 11_ - Tablet
Homepage App

Low-fidelity prototype

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

Wireframe links

Usability Study: Parameters

Study Type:

Unmoderated Usability Study


5 Participants


Lima, Peru


10 – 15 minutes 

Usability Study: Findings


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


delete the color accent of accessibility


create a return link to travel Tour Detail in Payment section

Refining the Design

  • Mockups
  • High Fidelity Prototypes
  • Accessibility


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.

Payment Experience - Before and After 1st Usability Study CHANGES

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.

Home Page - Before and After 1st Usability Study CHANGES

Mockups: Original Screen Size

here you can see other important pages of this site

List of Tours

Tours List

Tour Description

Tour List - Description

Tour Detail

Tour List - Detailed



Profile Edited

Profile Edited cropped 1

Mockups: Original Screen Size Variations

here you can see other important pages of this site

Tour Description

Tablet - Home Page-417x947

Tour Detail

Web App - Home Page-196x947

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.

High Fidelity Prototype

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



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]

UX Designer- Ruben Angeles

UX Projects

Portada - Euroamerican Assitance

Update Soon ( June 15, 2022)

Design 2U

Update Soon ( April 15, 2022)

Albina Salon Spa

Update Soon ( Mayo 15, 2022)


International calls
+51 987295478

National Calls only on Whatsapp

[email protected]

Ir al contenido