.png)
Wayfarer
Conceptual UI Design for a travel exploration website and app.
Problem Statement
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 accommodations on the site, people use it as a tool for researching where to travel next, based on their preferences. Wayfarer’s target audience is anyone between the ages of 21 and 30 who travels frequently and is in search of new adventures.
Background
Wayfarer, a travel website, to create a new landing page and mobile app design. 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. Wayfarer’s target audience is anyone between the ages of 21 and 30 who travels frequently and is in search of new adventures.
Objectives & Goals
Design the 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.
Create a Navigation to other pages or sections on the site; simple search functionality to find destinations; a grid or list view of featured destinations (these would link through to further details); a call-to-action to sign up for the newsletter; a footer section including at least a copyright date and some links to other pages
I only had 10 hours to complete this project, as a result, I will not be conducting any detailed research.
Design Process
Wayfarer is a fictitious travel company and my first UI design created during Designlab UX Foundations 10-hour design challenge.
Requirements:
- Navigation to other pages or sections on the site
- Simple search functionality to find destinations
- A grid or list view of featured destinations (these would link through to further details)
- Call-to-action to sign up for the newsletter
- A footer section including at least a copyright date and some links to other pages
Research
Research
Since the assignment did not require any user interviews or significant research, I was tasked with researching similar sites and competitors. I was to create designs for three app screens:
- Screen 1: List of destinations
- Screen 2: A “detail” screen, giving full information about a destination
- Screen 3: One of the following: sign-in screen; search screen; account settings screen
Methodology
This is a UI design challenge therefore research methods were limited to competitor analysis and comparative research of SaaS and Dribble.
Assumptions & Risks
I assume to have all of the photo assets and logo.
Competitors Analysis
- Several competitors’ websites and apps, such as TripAdvisor, Jetsetter, Tripscout, Expedia, Get Your Guide, and Viator were all searched and compared for design, flow, content, and user interface.
- They all had some things in common: clear, vibrant pictures, plain white backgrounds, and bright CTA’s. Some were busier than others, but one thing was consistent: all used pictures as the main focus of their sites.
- After comparing competitor’s sites, Dribble and SAAS landing pages were reviewed for appropriate designs using as many of the travel photos as possible.
Information Architecture
I decided the website would feature color and photos with search bars
and clickable search photo icons. The desktop site would
allow for existing users to login and new users to sign up from
the hero page.
Interaction Design
I designed the hero page is designed to be dynamic and scrolling. The
photos along the bottom will be moving to the right in 12
second intervals. When each photo reaches the square spot
in the row then a new avatar will pop up with another
traveler.
UI
Iteration and Implementation
I chose complimentary colors that are used with a neutral gray palette. The fonts are Inter and Fira Sans which are both Google fonts and easily readable on mobile devices. They both have multiple weights and styles. They are dark gray and dark teal.
Final UI Screens
.jpg)
The colors of blue and orange were chosen to evoke feelings of the ocean, sun, and vacation. Blue and orange were the most used on travel sites, so the Maldives photo was chosen for the hero page.
Results & Takeaways
Even though, Wayfarer is a fictional travel exploration website and app UI concept, I designed it for frequent and adventurous travelers aged 21 – 30. It is a tool for researching where to travel next, based on their preferences.
.svg)