Wayfarer Website & Mobile app UI design
Introduction
Client:
Wayfarer
Duration:
10-hour Design challenge
Roles:
UI Designer, researcher
Tools:
Sketch, UI Design
Project Overview
The aim of this project is to design a User Interface for a travel website and mobile app, Wayfarer. Wayfarer is a travel and destination guide & research tool for youngsters aged between 21 to 30 years old who travel frequently. They didn't sell any trips, flights or accommodation but what they offer is an insight into what flight you can take, where you can stay with your budget for its users.
Ideation
To understand how I should approach this task, I starts to research a bit into similars offering that is already available as competitive analysis research. Similar service websites like Lonely Planet, Tripadvisor and a few websites that showcase local travel sites like visitmelbourne.com, visitsingapore.com & naturallylangkawi.my to get some ideas on what needs to be showcased to users and how the information architecture is organised.
Key takeaways are:
- The main focus is always the search bar as the main element that users interact
- Other elements and information is built around it and organised depending on user feedback or branding for the product
Sketch
With some idea on how the layout should be, I start to explore how the Wayfarer might look like. Starting with the website layout first, listing out all the requirements first and start sorting their placement. From there, I begin to sketch how the element should be and its placement. My initial idea is to make it centralize and make the design sketch revolve around the search bar for the website. Moving to sketch out the mobile layout, I delve more into what the destination screen needs to look like and explore some ideas for how the information and images would be mixed.
Design
Style guides
My style aim for Wayfarer is to base it out from simple colours, which bring me to this dark gray hue. Not black, but something that is near black. For the secondary colours to be used, I have picked cyan, since it's a combination of blue and green which is best used to represent nature. I also think it helps to showcase youthful spirit from seeing blue skies and nature’s greeneries. Something that might go well with travel photos.
The font that I chose to go with is a google font Roboto Condensed. I think it's a much simpler font to work with on digital medium and also because it is san-serif which is easier to read online. The kerning is a little compressed which I think is good for usage in mobile devices too.
What I had in mind for the icon sets that I created to represent Wayfarer categories is something that is easily recognisable, a little big in size and stylized. The categories that they represented is hotels, rentals, restaurants, flights and events.
Digitalisation
Combining the elements from the style guide and the sketches, I proceed to make a digital version of the screen for the website and mobile app. I do hope that my design can appeal to youth as that is the target market of Wayfarer and hope to present a unique idea or approach to Wayfarer as a travel information site. Picture selections are carefully curated so that the website and app can feel as authentic as possible. For the destination details, I delved deeper into Venezia or Venice as that is the place I have chosen to focus on since it's a popular destination already. I choose 3 main attractions to be featured and then find a short copy to be used in the layout.
Selected Works
