A trip-planning platform catering for people who are in search of new adventures
A trip-planning platform catering for people who are in search of new adventures
Wayfarer is a fictitious trip-planning platform catering for 21- to 30-year-olds who are in search of new adventures. The homepage was built from scratch for both desktop and mobile viewports.
This project was part of the UX Academy Foundations course and was worked on in phases throughout the course covering various UI elements (from typography to responsive design).
The project started with sketching wireframes for the desktop homepage on paper and then translating one wireframe to digital in Figma. A wireframe for the mobile homepage was created later in the course, while using the desktop as a base.
The wireframe was turned to life by adding images and illustrations matching the Wayfarer identity.
I did another iteration on the selected images for the final version, so it all matched better with the colours, target group and overall feel of the homepage.
1st iteration.
2nd iteration.
A style tile was used to create an overview of colours and typography. Various AI-tools assisted with making the selection of colour and typeface combinations, but small iterations were made when seeing the colours being used on the homepage and ensuring there was enough contrast.
The process was started by focusing on the homepage for the desktop version, but a mobile version was also part of it. This helped to adjust certain details to work on both desktop and mobile, for example an image that worked in landscape on desktop, worked better in portrait on mobile.
It helped my design process of the homepage by going back and forth between desktop and mobile versions.
Image proportions copied from desktop to mobile.
Image proportions optimised for mobile.
Image proportions from mobile copied to desktop.
A form was also created in which the user could sign-up for the Wayfarer platform. This was a great way to consider how users would use various input fields and how to make it easy to navigate for them.
The initial form was created for desktop and then translated to mobile.
Everything led to a final hi-fi prototype for desktop and mobile, but additional time was taken to reflect on all design decisions taken during the process. A second iteration was made by improving illustrations and images and repositioning of the search bar so it fits better with the narrative of the CTA on the hero image, plus a more balanced navigation bar.
