WAYFARER

UI Design

A travel website for users to discover new locations to add to their destination list. Layouts for desktop and mobile users were created.
Responsibilities: UI Designer
Timeframe: 1 day
Tools: Figma

project overview

background

Wayfarer is a travel website with the intention to help people find their next trip. However, it does not sell any trips, flights, or accommodations. People between the ages 21 and 30 with the knack for traveling is their marketed demographic.

These are the helpful features that Wayfarer currently offers:

Overall, Wayfarer wants to help curate a curiosity for users to discover places and have them seek more information about it.

requested deliverables

For this project, designs for desktop and mobile were requested. Wayfarer provided texts like call-to-actions, navigation items, and headlines, that I could use to my discretion. They also provided images of destinations and their logo.

Here are the details of the request:

A Desktop Landing Page for Wayfarer

Must include:

  • Navigation to other pages or sections on the site
  • A grid or list view of featured destinations (the images would link 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
Three Pages for iOS or Android mobile smartphone app for Wayfarer

Create designs for these 3 screens:

  • List of destinations
  • A “detail” screen, giving full information about a destination
  • Sign-in screen, search screen, or account settings screen

brainstorming

To plan out how this design was going to look, I made a few sketches.

ui library

For my UI Library, I decided to go with a color scheme that felt soothing, calm, but with a pop of color! I wanted users to feel invited to explore Wayfarer.

Below are my design choices:

final design

click the image to the Wayfarer Landing Page for Desktop

For the Desktop Landing Page for Wayfarer, I included the required items:

  • Navigation to other pages or sections on the site
  • A grid or list view of featured destinations (the images would link 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

While adding a touch of fun, the airplane graphic helps break the page and brings together my usage of unconventional shapes.

An added bonus was including a blog component into the page. I thought it would be a great add since blogs bring out community interaction.

Users can aid each other through travel advice that they may want to offer to fellow travelers, especially for specific locations they are interested in.

I went with designing for an iOS interface. The 3 mobile pages I designed for were:

  • List of destinations
  • A “detail” screen, giving full information about a destination
  • Sign-in screen

Here are a few key ideas I had in mind while designing:

  • The list of destinations would likely be Wayfarer's main page ➜ The grid/list is made with the intent to be swiped through
  • The chosen location page lays out a full-detailed breakdown of what users can expect at this travel destination while including a convenient back button if they want to see other locations
  • Sign-in screen matches the desktop's simple theme and offers convenience with other account sign-ins if a manually password isn't preferred
click the image to see the Wayfarer Mobile Pages

reflection

This was my final design project for Designlab's UX Academy Foundations. This was also my submission for applying to Designlab's UX Academy! This project was a great way to test and challenge what I had learned over the 8-weeks I attended the online course. Despite being given impressive, travel images and a set of texts for use, I still found ways to get creative. With this design project, I wanted to test out the use of unconventional shapes while still keeping it minimal. It was fun to break the (design) plane of a white background somehow! I found a way to balance simplicity and boldness.

Spoilers: This design helped me get into Designlab's UX Academy!

back to portfolio