A responsive UI Design for a travel website
and mobile app
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.
This project was a 10-hour design challenge to design a responsive homepage (desktop and mobile application) and two additional screens for the app.
User research, UX/UI design, product branding, responsive site
Role: UX/UI Designer, Client: DesignLab, Duration: 10 hours, Tools: Figma, Miro, Sketchbook
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.
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
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.
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.
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.
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.
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.
For this screen, I wanted the user to be able to scroll through popular categories (i.e. destinations) and favorite options that interest them.
After the user favorites a specific destination, they can click the image to view more details. This is the screen that they would see.
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.