Summary
This design brief was provided by Design Lab.
"You’ve been approached by Wayfarer, a travel website, to create 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."
My Timeline
Brief Breakdown
Research and Analysis
Content Organization
Lo Fi Sketches
Branding
Hi Fi Wireframes
Revisions
Conclusions
My Role
Timeline
10 Hours
Project Type
Responsive Website
My Role
User Research, Research Analysis, Branding, Wireframing, and Prototyping
Team
Solo project completed with mentorship from a UX/UI Designer
Tools
Figma, Adobe Illustrator, and
Competitor Analysis
I mainly scanned over travel websites such as Expedia and Airbnb. Because of the limited time, I scanned for what I was looking for and focused heavily on the UI and the brief.
After looking at the two, I realized that being able to quickly search, browse suggested listings, and being able to filter, were the biggest aspects users were immediately greeted with.
Competitor Research Findings
Expedia
Airbnb
Pros
Cons
The first thing that pops up is a search function to allow users to start planning. It also sections off deals that users could be interested in.
I looked at Airbnb to see a more personalized feel. Users are quickly able to start liking rentals and are able to quickly filter by types of Airbnb types.
Obviously, it's for booking, which is not what the Wayfarer app is being used for.
Again, this is not really aimed at what Wayfarer is looking for, but its a great case study to look at in terms of what most users would like to see first.
Description
A travel company that allows users to book various trips by utilizing flights, hotels, cruises, and powerful search features.
A booking website specifically for staying in homes for either a short or long period of time.
Brief Breakdown and Deliverables
Design one (1) desktop size page. The design must include:
-
Navigation to other pages or sections on the site.
-
Simple search functionality to find destinations
-
A grid or list view of featured destinations (these would link through to further details)
-
Call-to-action to sign up for the newsletter
-
A footer section including at least a copyright date and some links to other pages.
Main Takeaways
-
Wayfarer/Travel Website
-
Landing Page/App Design
-
No commerce or buying
-
Tool for research based preferences
-
Ages 21-30
-
Frequent Travelers/New Adventures
Branding
With the website being travel based, I wanted to create a simple but fun logo. Utilizing the W, I added a little arrow to signify movement since users will be going to different destinations around the world. I used a golden color to make it pop against the cool tones of the website.
Create designs for these 3 screens:
-
Screen 1: List of destinations
-
Screen 2: A “detail” screen, giving full information about a destination
-
Screen 3: One of the following: Sign-in screen; Search screen; Account settings screen
My Sketches and Explorations
Hi Fi Wireframes
Because of the time constraint and a clear image in my head, I went on to plug in as much as I could and skipped a majority of the mid fi wireframing.
Sign In Page
Landing Page
Detailed Page
Desktop UI Kit
Desktop Landing Page
Key Screens
Landing Page
When opening the page, users are immediately greeted and can get a good understanding that this website is about traveling. Users can immediately begin to start searching.
Users can easily view the featured trips to help draw them into the website.
For the website, users can get a quick idea of what Wayfarer is. This is not included in the app, because if users downloaded, it then they already know what the app is used for.
Mobile App Landing
Mobile App Detail Page
For the descriptive page, users are able to find more specific information about a destination. Users can like and share it with their travel buddies, and see the ratings that the destination has.
Here, a quick view of the most popular attraction within the destination can be viewed. This can help the travelers pick out what they might want to do if they are considering going on the trip.
Conclusion
This was the very first project I ever did, so I would definitely change more. I would have done a much better icon set, made the typefaces less thin, and would have done more research into what users look for in a travel website. I would have also featured more trips on the landing page instead of having one section of trips.
With all that being said, I was proud of how it turned out. I liked the colors that I used, the branding, and I think the landing page had a good amount of information to let new visitors understand Wayfarers capabilities.