Wayfarer
Wayfarer makes it simple to discover a world of adventures tailored just for you.
Project Overview
Project: Create a Responsive Homepage
Platform(s): Desktop, Tablet, Mobile
Role: UI Designer
Tools: Figma
Duration: 80+ hours
What is Wayfarer?
Wayfarer is a travel discovery platform designed for curious explorers who crave more than the usual tourist trail. We don’t sell trips or flights - instead, we act as a research tool that helps travellers uncover hidden destinations perfectly suited to their preferences. With the help of AI, Wayfarer recommends authentic experiences by learning from users’ past journeys and interests, transforming travel planning into something personal and inspiring.
Our mission is simple: to spark wanderlust, connect people with local cultures, and make exploration more meaningful. Guided by our values of inclusivity, innovation, and inspiration, we see travel not as a service but as a way of life, one that encourages continuous growth and discovery.
At Wayfarer, every click is a step into a new adventure.
Step 1: Design References
Objective: As I got ready to begin my new fictional role as a UI designer at Wayfarer, I wanted to take this week to find design inspiration in the world around me. Since Wayfarer is focused on travel and exploration, I was looking for visuals that captured a sense of adventure, discovery, and movement.
Tasks: I researched and gathered examples of images, layouts, and designs that inspire me, pulling from both digital and physical sources. These included websites, posters, travel magazines, maps, and even wayfinding systems I noticed while out and about. I looked for designs that made me think of journeys through photography, playful typography, colour palettes that felt adventurous, or layouts that guide the eye with clarity. I then curated these into a mood board in Figma, adding annotations to reflect why each element caught my attention.
Deliverable: A collection of annotated “found” designs assembled into a Figma mood board. Each piece highlighted a quality I wanted to carry into my work at Wayfarer, such as sparking curiosity or evoking a strong sense of place.
Conclusion: This was a good opportunity for me to be able to sit down and get some ideas flowing. When proceeding with this step, I first asked myself, “What are the first few things I think about when I think of travelling?” and then wrote them all down. As it turned out, souvenirs were one of them, acting as small, portable memories of a place once visited. After that, I had a look at some other travel websites, and some of them turned out to be great sources of inspiration, all from their layouts to their colour palettes.
Step 2: Laying it all Out
Objective: Wayfarer’s website has been underperforming for a while now, and as part of the redesign process, I wanted to practice applying visual layout principles and grid systems by creating a new homepage layout. My goal was to organise the information in a way that felt clear, engaging, and aligned with Wayfarer’s adventurous brand identity.
Tasks: I started by reviewing the current homepage to understand the content, assets, and information users need to access. From there, I sketched out possible layouts to explore different ways of structuring the page. I thought that having the image take up most of the hero section would make the experience more immersive for the user, which is fitting for a travel website. I then translated these sketches into a digital mockup using design tools, applying grids and hierarchy to ensure balance and clarity. Throughout, I focused on keeping the design consistent with Wayfarer’s existing brand visuals while rethinking the flow of information for better usability.
Deliverable: A homepage mockup for Wayfarer that uses existing assets and text, with a refreshed layout and structure designed to make the site feel more intuitive and visually cohesive.
Step 3: Adding Images and Other Visual Elements
Objective: As I moved forward with the full redesign of Wayfarer’s site, my goal was to incorporate images and icons into the homepage mockup I created earlier. By building out the “Destinations” section, I wanted to establish a stronger visual language that excited users and inspired them to travel, while staying true to Wayfarer’s adventurous identity.
Tasks: I sourced and edited images that capture the spirit of exploration and discovery, then integrated them into the homepage layout. I also created and selected icons that complement Wayfarer’s branding and support navigation. For the “Destinations” section, I carefully curated visuals and designed supporting elements that highlight the uniqueness of each location while maintaining a cohesive overall style. Throughout, I kept consistency in mind so the new visuals enhance the structure I built in the earlier mockup.
Deliverable: An updated version of my previous homepage mockup, incorporating edited imagery, new icons, and a fully developed “Destinations” section that establishes a more compelling and cohesive visual language for Wayfarer.
Conclusion: After choosing my preferred layout, I began to think about typography and the colour scheme. I tried aiming for colours that complemented each other, while also complying with the brand’s identity. I figured that this calming sea blue colour would work well with the warm orange, but later on, I ended up changing the orange, as it ended up being too harsh on the eyes. Using the eye-dropper tool, I selected a more natural tone from a stock photo of sand that I found while compiling my image bank for each location I chose. Later on, I also ended up changing the hero image. While I enjoyed the pattern it created, the image itself was way too busy, so I changed it to a simpler and calmer image that also made the text easier to read, eliminating the need for the dark box.
Step 4: Styling the Page with Colour and Typography
Objective: At this stage, my focus was to bring visual cohesion to my homepage design by introducing typography and colour. I wanted my choices to not only align with Wayfarer’s adventurous and inspiring brand identity but also to create a consistent visual language that ties everything together.
Tasks: I began by selecting a colour palette that reflects Wayfarer’s sense of exploration - bold, fresh, and inviting. Alongside this, I chose typography that balances readability with personality, ensuring the brand feels approachable yet dynamic. Once finalised, I applied these styles to my existing homepage mockup, carefully reviewing how they impact hierarchy, user flow, and overall aesthetic. Throughout, I considered how type and colour work together to strengthen the design and communicate Wayfarer’s ethos.
Deliverables: A style tile featuring my chosen colour palette and typography. An updated Wayfarer homepage mockup with my colour and typography selections fully applied.
Conclusion: The first homepage iteration helped me understand some of the flaws in my design thinking, which helped me with the decision-making process going forward. With that in mind, I sat down and began to brainstorm some possible font combinations. The human eye tends to enjoy colours that come directly from nature. With this project, I decided to take that approach, taking inspiration from the hero image for my homepage’s overall colour scheme.
Step 5: Designing a Multi-Step Form
Objective: For this stage, my goal was to design a new multi-step form that makes data collection feel intuitive, engaging, and frustration-free. The current form wasn’t working - users found it confusing, prone to errors, and unhelpful for gathering the information Wayfarer’s AI needs. By redesigning it, I wanted to ensure users feel guided through the process while giving Wayfarer the insights it needs to power better travel recommendations.
Tasks: I started by breaking down the form into clear, manageable steps that follow a logical flow, reducing cognitive load and preventing information loss. From there, I created mockups for each step, carefully designing form fields and navigation elements that make progress easy to track. I also applied Wayfarer’s visual branding to ensure the form feels like a seamless extension of the homepage design. My priority throughout was clarity, simplicity, and usability.
Deliverable: A fully designed mockup of the multi-step form, styled with Wayfarer’s visual branding and structured for a smooth user experience.
Desktop Sign-Up Demo:
Step 6: Making the Page Responsive
Objective: My goal in this stage was to make sure the Wayfarer homepage design worked seamlessly across different devices. Since Wayfarer’s users are often on the go and access the site from both desktops and mobile devices, I needed to adapt my existing homepage layout to remain functional, engaging, and visually appealing no matter the screen size.
Tasks: I applied responsive design principles to adjust the layout at key breakpoints. This involved rethinking how elements stack, scale, and flow on smaller screens while maintaining the overall visual hierarchy and brand identity. I focused on preserving usability, ensuring that navigation stays intuitive, and that important content like destinations and calls-to-action remain prominent across devices.
Deliverable: Updated mockups of the Wayfarer homepage, optimised for both desktop and mobile views.
Conclusion: Having much less space to work with, I removed the nav links altogether for both mobile and tablet, adding a hamburger menu in their place. For mobile, there is even less screen space, and the buttons were making the nav bar look cramped, so I decided to remove the sign-up and login buttons, instead adding a single clickable user icon that would allow the user to do either. Having much less space for the destination cards, I added a three-dot icon that is meant to indicate to the user that there are more cards to swipe through. In the “product benefits” section, I stacked the icons on top of the text, as with mobile, elements tend to stack more often.
Layout Sketches for Mobile and Tablet:
Tablet Sign-Up Demo:
Mobile Sign-Up Demo:
Final Thoughts
The Wayfarer project was a valuable opportunity to dive deep into the design process from start to finish. Professionally, I gained experience building layouts, working with responsive design principles, and developing a consistent visual language that communicates a brand’s identity. I also learned how to create user-friendly components such as forms and navigation that balance clarity with engagement.
On a personal level, this project showed me how much I enjoy connecting design with storytelling. Travel is about discovery and experience, and I wanted the design to reflect that sense of excitement. Along the way, I pushed myself to think not just about aesthetics, but also about how users feel while interacting with the product.
Overall, this project gave me confidence in my ability to take a concept through multiple iterations and arrive at a cohesive, user-centered solution. More importantly, it reminded me why I love design: it’s about solving problems, inspiring people, and creating experiences that matter.