top of page

Wayfarer

Wayfarer is a place for travelers to discover new locations to visit around the world. Although it doesn’t directly sell any trips, flights, or accommodation on the site, people use it as a tool for researching where to travel next, based on their preferences.

Target audience:   Anyone between the ages of 21 and 30 who travels frequently and is in search of new adventures.

Industry:  Travel and tourism

Role: UI Designer

Duration: 10 hours | Mar 2023

Tools:  Figma, pen and paper

Mac Studio and Studio Display.png
Surface Laptop Studioway.png
ROG Flow Z13.png

Purpose

Wayfarer wanted to create a new landing page and mobile app design. They wanted to design a homepage that users will see when they first find Wayfarer. It needs to show featured destinations, explain briefly what Wayfarer is, and include a call-to-action to sign up for the newsletter.

Challenge

Stand out from the competition and increase user traction.

UI process

As a UI designer on this project, Wayfarer wanted me to focus on just designing the landing page and few mobile screens to enhance the visual appeal of the app. User research was already conducted by Wayfarer's research team.

Keeping user needs and project needs in mind, I came up with the below UI process.

Empathize

Define

Ideate

Prototype

Test

I browsed through user research data provided by the Wayfarer team to empathize with user needs and make sure the product is designed to simplify user interface. The problem statement was already defined by the Wayfarer team. I wanted to deep dive into the findings of user research task and know how was the problem statement derived. My area of work on this project was to ideate on the User interface of the product, develop a prototype and run iterations post usability testing conducted by the Wayfarer team. 

Problem

During research, Wayfarer team got below response from the user interviews.

82.7%

Users said they are motivated to explore new and popular destinations

99.3%

Users find visual appeal and ease of navigation as  important factors in wanting them to come back to the website / app.

Users want all travel related information and guidance under a single app

This brought them to the primary problem, how might we help travelers discover new locations, get information and travel tips from travel experts, and increase user traction?

Let's know the users more

After thoroughly analyzing user research data, I categorized Wayfarer's list of users as mentioned below:
 

  • 21 to 30 age group

  • Digital technology savvy

  • New travelers and explorers

  • Frequent travelers who are a part of Wayfarer community.

  • People looking to explore new activities and destinations

  • People looking to seek help with planning for travel and customised itinerary.

  • People looking for recommendations or resources for accommodation, flight booking, and more


I recognized the roadblocks and pain points to correct, by identifying improvement opportunities. An example of this would be understanding user's frustration of spending hours browsing travel options endlessly while going through complicated user interfaces on other websites and apps.

I was able to hone the idea of providing them an easy to navigate user interface by incorporating UI design principles. 

Persona.png

Let's know the competitors more

After studying Wayfarer's competitor analysis report, I was able to draw below inferences:

  • Popular competitors like trip advisor and expedia have too many ads, recommendations and travel options running in the background which can distract target users from finding what they want, making the entire experience time consuming.

  • Very few travel websites provide an option for new travelers to seek guidance from authentic travel experts.


 

Identifying gaps and opportunities

How might we help travelers discover new locations, get information and travel tips from travel experts, and increase user traction?

 

Through detailed study and analysis, I came up with below ideas:

1. To design a landing page for Wayfarer that consists of:

 

Header

  • Navigation pane - Users can directly look for accommodations and popular destinations without having to go through the entire site. Existing users can log in and new users can sign up with ease.  

  •  Hero banner - has a prominent search option which allows the user to search by place, hotel,           activity and more.

 

About Us

  • Users can learn about Wayfarer in this section. By clicking on wayfarer recommendations, wayfarer community and wayfarer travel tips, users can get recommendations on accommodation, flights and more as per their preferences. Users can network with the community and get travel tips from the experienced staff. 

 

 

Itinerary 

  • Users can get ready-to-go itineraries or they can get directed to experienced staff that can help them with personalized itinerary.

 

 

Newsletter

  • Users can enter their email Id and click on the subscribe button to get weekly updates on new travel destinations.

 

Explore

  • Users can explore new and popular destinations by clicking on the scroll arrow buttons located on the right of the featured destinations section.

  • Users can search other destinations by place or activity when they click on the ‘more’ option located on the right of the ‘Explore destinations’ and ‘Explore activities' section.

  • On the landing page, users can click on the name of the place on the image to get detailed description about that place . Users can click on the button on images in the activity section to get list of destinations related to the selected activity.

 

 

Footer

  • Through resources, quick links and contact us sections, users can get directed to verified agencies for booking accommodations, flights and more. Users can access FAQs and reach out to the support team.

 

2. To design a mobile app for Wayfarer that consists of:

  • Users can get itineraries curated by the experienced staff and frequent travelers or they can click on ‘customize’ option to get connected to an expert staff member to personalise their itinerary.

  • Users can click on the name of the place on the image to get detailed description about that place. Users can click on the button on images in the activity section to get list of destinations related to the selected activity.

  • Users can easily log in or sign up to the app through the Sign In screen. Search option is available on the top and bottom of the screen.

  • Mobile has a list of destination screen that includes featured destinations and top picks. Both these categories can be browsed by scrolling or by clicking on more option. Users can even search destinations by activity.

Initiating product design

In the design stage, I made sure user goals align with business goals while keeping technical considerations in mind. I started working on building information architecture - sitemap, user flows and task flows. This was followed by low, mid and high fidelity wireframes.
 

Wireframes

Sketching wireframes helps in quick interpretation and visualization of the product design. My initial thoughts were to make them more detailed but gradually I realized that wireframes at this stage provide clarity on important features and iterating is easier.

LF.png

Digital wireframes

Sketching wireframes laid a great foundation for building digital wireframes. I incorporated few iterations here and added details such as titles.
 

Desktop - 5.png
MF.jpg

UI Component library

Desktop - 6.png

Hi-fi  wireframes

WayHF.png
Desktop - 3.png

Usability study

In the testing stage, Wayfarer team was pleased to find that no iterations were required other than adjusting the contrast for images. I made necessary iterations and final product was ready.

Final product

Mac Studio and Studio Display.png
ROG Flow Z13.png
Surface Laptop Studioway.png

Wayfarer journey

Wayfarer helped me understand the UI process for responsive designing. I thoroughly enjoyed the process and will incorporate learnings in all my future projects.

bottom of page