wayfarer // ui & product design

Wayfarer

UI & Product Design

10 hour design challenge: design a desktop landing page & three screens for mobile in ten hours

ui design, prototyping, branding,
product design, figma, protopie

Wayfarer is a travel website that helps its users research new destinations and accommodations based on their preferences. Their audience is generally younger, between the ages of 21 and 30, who are eager to find their next adventure. As my final project for DesignLab’s UX Foundations course, I designed a desktop landing page and a mobile application for Wayfarer in a ten hour time constraint.

My design aimed to be immersive, personal, and interactive, with elegant and enticing UI, and functionality that puts control into the users' hands. In ten hours, I designed a brand environment, a Style Guide and UI Kit, and high-fidelity prototypes demonstrating the user experience and functionality of the main user goal to discover new travel destinations.

My landing page first loads an entrance screen, which gives the user a peak into the landscape behind a gray overlay. As their cursor navigates the screen, the user can see different parts of the landscape through a hole in the ‘canvas’ that moves with their mouse. When the user clicks, they enter the main landing page through this opening and arrive in this dramatic landscape.

My intention here was to create the feeling of exploring when using Wayfarer’s site. The user experience is an adventure in itself.

From here the user can search Wayfarer using several options. They can simply type in a destination, or they can filter their search results based on location, the user’s budget, or what kind of experience they are interested in.

After scrolling on the landing page, the user can view images of featured destinations. These images are nested in their own section and pop up as modal if the user chooses to interact. If a destination appeals to them, they may click on an “Explore” CTA to travel to a new page with this destination’s details.

My mobile app design carries on this motif of an immersive, customizable experience by encouraging the user to discover different locations via many different means of exploration.

The various search functionalities allow users to filter their search by the region or country, budget range, or type of travel experience that best suit their interest. On the app, users are also able to save their filter settings for future searches.

The detail screen displaying information on a single location allows the user to dive deeper into the destination by exploring accommodations and popular activities near the site, or by reading other traveler’s stories in the Travel Log.

If the user is interested in a site, they may 'Save' it, allowing the user to access the destination later for future planning or daydreaming. They can also 'Add' it to a current trip. The user may collect sites for an adventure they are planning, or are currently on, so they can easily access information on destinations, accommodations, etc. when they are on the go.

Desktop Landing page
iOS mobile app

In order to communicate my interactive designs, I taught myself how to use the software ProtoPie

1 SKETCHES & WIREFRAMES
2 STYLE GUIDE
this way
that way
this way
that way