Design project: travel website and app
I recently completed Designlab’s UX Academy Foundations course. This was an 80-hour course in the basics of UI design, with 1-to-1 mentoring support. The final project was a 10-hour design challenge, for which I designed a travel website and 3 screens for a corresponding mobile app.
Project Brief
For this project, I created a desktop landing page and 3 mobile app screens for a travel website called Wayfarer. This site does not directly sell trips, flights, etc., but instead it is a tool for discovering places to go. The target market is 21 to 30 year olds who frequently travel.
Market Research
Before beginning this project, I looked through similar websites to get ideas. I used onthegrid.city, the Lonely Planet website, and the travel tag on Dribbble. I found that these sites used sans-serif fonts, cool rather than warm colors, and many photos. Additionally, on Dribbble I noticed that most projects of this type used rounded corners and pill-shaped buttons, friendlier (more-rounded) typefaces, and icons with thicker-weight strokes. I decided to use these observations as a way to target my designs for the 21 to 30 year old market.
Style Tile
Next, I created a style tile for the desktop version of the website. I used a bright blue-green as the primary color and then selected analogous colors to create a cool color scheme. I also made a neutral palette of off-white and several shades of grey leading to almost black. I chose the sans-serif Google font “Poppins” for the site’s typeface, and I created a hierarchy of text styles in different sizes and font-weights. I also used Figma Community to find icons, and I chose a few that I thought I might need so that I would have them handy. Once I had made these decisions, I saved all of my colors and text styles as Figma styles so that I could use them easily throughout the project.
Desktop Screen
I made a total of 5 different sketches for the desktop screen layout. This helped me to make decisions such as putting the search bar in the hero section and using square cards for the destinations grid. I made a few slight changes to my sketch as I went, most notably in the newsletter and mobile app CTA sections, both of which I decided needed to take half of the screen width, with a photo on the opposite side. I created the page with a dark background to call attention to the site photography.
Although not part of the project brief, my mentor suggested that I create a call-out for the mobile app. For this I used the Figma Mockup Plugin to transfer my mobile app screen into a mockup of an iPhone 12.
Mobile App Screens
I made sketches for the mobile screens as well. I coordinated these screens with the desktop site by using the same color scheme and the same typeface in different sizes for mobile.
Browse Destinations
For this screen, I listed the destinations in rectangles, rather than the squares that I used in the desktop site, so that more information would be visible on the screen at once. I also included icons for filtering and sorting this information. The navigation is at the bottom so that it will be easily reachable by thumb. The current screen is highlighted in the nav section so that the user understands where they are in relation to the rest of the app. This navigation section is reused on the Destination Detail screen.
Destination Detail
Each rectangle on the Browse Destinations screen will link to a Destination Detail page. Next to the title on this page, there is a “back” button for navigation back to the page containing all of the destinations. I wanted this screen to hold the most essential information for travelers in an easy-to-use format. Therefore, beneath a photo of the location there is an “At a Glance” section. Just below that, the “Resources” section has bright, friendly buttons and icons. Next is an “About” section containing further details, followed by reviews, which are primarily for those travelers that are surfing the app from home and considering taking a trip.
Sign In
The sign in screen has buttons to sign in with social networks at the top, because it is easier to use these than to type in an e-mail and password. E-mail and password fields are below, along with smaller links in case the user has forgotten their password or has not yet created an account. The sign in button has an icon to match the CTA buttons on the desktop site.
Conclusion
I believe that I have created a usable design that would not feel strange to 21 to 30 year olds. Illustrations would have made the designs even more on trend, but I was not able to find any suitable ones in the time allotted. Also, I was given many photos, so I decided to just use those instead. If I were given more time on this project, I might consider how the complete site navigation would work, and how the other sections would fit in with the screens that I have created.
