Jessie Olson
UX designer

Wayfarer

A responsive UI Design for a travel website
and mobile app

Project Overview

Wayfarer is a fictional travel website where users discover new locations to visit around the world. Instead of directly selling trips, flights, or accommodation, users use the service to research where to travel next based on their preferences.

Scope

This project was a 10-hour design challenge to design a responsive homepage (desktop and mobile application) and two additional screens for the app.

Deliverables

User research, UX/UI design, product branding, responsive site

Details

Role: UX/UI Designer, Client: DesignLab, Duration: 10 hours, Tools: Figma, Miro, Sketchbook

Design Goals

While the focus of this project was to build a responsive web platform for Wayfarer, the goals and required features made this challenge a much broader project than simply designing a website.

Goals include:

  • Create a brand logo and branding guide

  • Organize site content in an intuitive way for the user

  • Develop UI that is playful and engaging for the user

Understand
Mind Map

Mind Map

Mind Mapping

Based on the keywords in the project brief, I chose to do some word associations. This brainstorm helped me to develop Wayfarer's brand, which lead to selecting typography, icons, and brand colors. Before starting the style tile, I also looked at images that I might use in the final UI designs that matched the aesthetic of the brand.

Research
Competing Companies

Competing Companies

Market Research

In order to learn more about the travel industry, I conducted market research on five prominent travel companies.

The analysis revealed that popular travel sites, such as Airbnb and Expedia, included a variety of preference choices for the user to browse such as destinations, accommodations, activities, and dining options. Both sites also displayed a consistent and intuitive UI, which made the content organized and easy to navigate.

Branding
Mobile Version Sketches

Mobile Version Sketches

Sketches

I like to start the design process with low-fidelity wireframes. This is the way I iterate through many design options quickly. My research influenced my sketches by creating a visual of what leading travel platforms are using in terms of their visual design decisions and what is currently trending. Though most of the sketches I created during this ideation phase were not used in the final design, a variety of elements from each sketch did.

For Wayfarer’s responsive website, I designed the desktop version first, as this allowed me to fully consider the technical needs and layout of a travel website that would display many options for users to discover their next destination. The responsive wireframes for a mobile version were designed next.

Wayferer Style Tile

Wayferer Style Tile

Style Tile

My final step before creating my high-fidelity wireframes was to choose a color scheme, typography, and other interface elements that would best communicate the visual brand.

When choosing the color palette, I found inspiration from nature while also being mindful of the phycology behind certain color choices and the feelings that they portray. To choose the colors, I referenced an image, used the dropper tool in Figma, and then copied that color to find a cohesive palette using the Adobe color tool.

When choosing typography, I was cognisant of fonts that were easily readable for both desktop and mobile breakpoints (i.e. choosing a sans serif font for body text) while also choosing a size that is not too small. I also checked the accessibility of the colors to make sure that they would have enough contrast for users.

It was helpful to have the style tile available at all times during the design process to stay in tune with the overall brand vision.

Final Designs

Log In

My goal for the log-in page was to create a clean and simple visual design that would allow the users to easily log in or create an account.

Destinations

For this screen, I wanted the user to be able to scroll through popular categories (i.e. destinations) and favorite options that interest them.

Details

After the user favorites a specific destination, they can click the image to view more details. This is the screen that they would see.

Project Takeaways

My first experience designing under tight time constraints allowed me to see what it would be like to work for a startup or in an agile environment. Despite the deadline, I was able to create a viable product and for this, I am proud.

If I had more time, I would have conducted more market research and used more creativity when designing the product. While I am happy with how it turned out, I was determined to stick to familiar design patterns, which was good UX practice; however, my lack of user testing and making interactions based on feedback was not.

Additionally, I would have liked to create a functional prototype and then conduct usability tests to find user pain points, which would have enabled me to revise the existing designs and make improvements.

Overall, I am satisfied with Wayfarer. I chose to have this project in my portfolio because it showcases how much I have grown as a designer in just a matter of weeks; which just goes to show what I am capable of.