Designlab UX Academy Foundations | Final 10h project (Desktop)

For the final project, I had to work on Wayfarer, a travel website. I was asked to create a new landing page and a mobile app design.

About Wayfarer: A site for travellers 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.

I started by sketching the designs on paper and documenting my process. Doing this helped me solidify the brief in my mind, the required deliverables, available resources and elements, as well as plan out the steps I would take before tackling the mobile screens. After breaking down my process, I began by looking at the competitor sites and also getting inspiration from Dribbble. I did a few sketches and chose my favourites, which look quite different from the final mock-up. This is due to further research being done down the line to ensure that my design aligned with the Android App design guidelines. Once I was pleased with my sketches, I started planning out the layout on Figma for the Desktop landing page which I completed before moving to the mobile screens.

Desktop landing page for Wayfarer

I designed a homepage with their target audience and Wayfarer's value proposition in mind, briefly introducing the brand. I began by reading the brief carefully and noting the key deliverables: a grid or list view of featured destinations, call-to-action to sign up for the newsletter, a simple search functionality, as well as a footer section including at least a copyright date and some links to other pages. While I only needed to design a single page, I had to consider how people would navigate to other pages or sections within the site.

Mobile smartphone app for Wayfarer

This app aims to give travellers a way of accessing information about destinations while they’re on the move. While the way it was going to be used was slightly different from the desktop landing page, I ensured the designs of the sample screens were cohesive.

• Screen 1: Sign-in screen

• Screen 2: Home/List of destinations

• Screen 3: A “detail” screen, giving full information about a destination

You can see a preview in the image above. To see the other mobile screens and learn about my process, please visit the Mobile Screens project.

See my portfolio | Follow me on Instagram ⦁ Pinterest ⦁ LinkedIn