WAYFARER website and mobile app for travel lovers.
Discover new locations to visit around the world.
UI Design
Background.
Wayfarer is a travel website that required a new landing page and mobile app design. Wayfarer is a place for travelers 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.
Requirements.
Create UI for the following screens: Sign-in screen, List of destinations screen, A “detail” screen, giving full information about a destination.
My Role.
I worked on WAYFARER as a solo designer and my area of responsibility was to deliver UI Design.
Tools.
Figma
How might we create an appealing visual for useful travel product?
My approach
Usability heuristics and the “Why?” question.
When approaching this project, I followed Jakob Nielsen's 10 general principles for interaction design, Usability Heuristics. These rules helped to inform my UI design and help me to keep the focus on making it user-friendly and appropriate. I studied the other apps and websites that offer similar kinds of services for the user (including Trip Advisor, Expedia, Airbnb, and more). I discovered many patterns I did not see before when using those apps as a user, and while I have immersed myself into the UX of those products, it definitely helped me to better understand the process by asking myself the "WHY?" question a lot. I challenged myself to use the vibrant orange tone for cta buttons as well as using the imagery that speaks to the targeted demographics.
My process
Where do I start in my design process?
I started by creating multiple sketches for the screens, as well as studying the UX of the websites and apps that offer similar products. Once the sketches were done, I started working on the style tile for the Wayfarer. This helped me to test the typography and fonts; color schemes and icons before jumping into the design process. As for the color scheme, because the Wayfarer's targeted audience is young, trendy, and adventurous, I decided to pick the orange as the main color and then used the color generators to help me create the complementary palette of teal shades and neutrals that also are good for the product that conveys love for nature, surroundings, and adventures.
Takeaways
What have I learned from this project?
When working on the design, I was challenging myself to make it as simple as possible for the user and minimalistic while making sure I offer all of the essential features for a product of this kind.
My main goal was to make sure that I kept in mind all the essential guidelines for accessibility and made the product as usable and neat looking as possible at the same time.
My key takeaway was how important it is to follow Usability Heuristics to achieve a thoughtful design.