the homepage features a large photo of an australian lake with the words 'lets go on an adventure'
The homepage welcomes the user with gently floating animated surfers.
Explore live site
View on GitHub
What to do about wanderlust one
At the start of 2021, two things were happening: I was wanting to expand on my front-end development skills and I was, for obvious pandemic-related reasons, dreaming a lot about being able to travel again. In response, I created Voyage: a fully responsive travel planning website created using React.JS that allows user to explore new places, get inspired about travelling and save what they've learnt to return to later.
What to do about wanderlust two
I wanted to create something truly research-led, so I began developing the project using a combination of user research, persona creation and competitor research. I discovered that whilst there are plenty of holiday and travel-centric websites out there, they are often dependent on the user knowing a lot upfront: where they want to go, when they want to go and how long they'll be there for. What was lacking was a place that centred the experience of finding inspiration and getting deep into the culture of a new place. Voyage isn't about the logistics of travel — it's about the excitement and inspiration.
Users can search for a country and find descriptions, quick facts, articles and recommendations.
The mobile view of the Explore page, which guides the user to explore interesting new places.
Come fly with me! Let's fly, let's fly away!
a screenshot of an article link on the website
Each place has highlighted spotlights and related articles so the user can get a real feel for the place.
If a user doesn't know where they want to go, they can explore curated pages and get inspired.
How does this thing work? one
Based on my research, I started to craft the website with a specific audience in mind: younger travellers, aged 18-30, who want to travel for exciting and unique experiences, led by an interest in new cultures. I therefore wanted to create features which would centre the discovery of new cultures and allow the user to save everything that interests them in one place.
How does this thing work? two
I started to plan out the features and structure, using inVision to produce wireframes. Users can discover new places a variety of ways: they can search for a place, find curated lists of places based around a theme or discover through place pages and articles. Anything they find, they can save and then access again in their profile. They can then make lists: things to pack, things to see and other travel-related notes — all saved in one location.
a roundel that reads 'let's fly'
Users can explore new places across the site and then save their favourites to their profile.
Now you're talking my language one
I decided to use React to build the site. Its use of re-usable components and shared state meant I could shape a fully interactive website that allowed users to read, explore, save and keep track of their thoughts. To create content for the site, I used a mixture of hardcoded elements and data from a combination of APIs to ensure that users would be able to search for anywhere in the world and get something informative back.
Each place page contains information in different forms, including live weather, links to related places and articles.
a screenshot of the profile page, with the user's saved lists
The profile page contains the users' saved places, lists and articles. Users can create and edit their lists from here.
Viewing a user's saved places and then deleting cards they no longer want saved. Bye, Amazon!
Creating a visual language one
The design was focused on creating an experience that was easy to navigate, but still felt contemporary, original and full of personality. The visual language throughout the site is inspired by airport signage — the boxed buttons with their simple direction-driven iconography, the ticker tapes throughout the site and the geometric sans-serif typefaces. Keeping to a very limited and carefully chosen colour palette allows the photography (sourced using a mixture of my own photos and those found across stock sites) to shine. Subtle animation with the ticker tapes and gentle moving of the surfers on the homepage hero image brings a sense of fun and personality.
three mobile phones with screenshots of the website
Voyage is a fully reponsive site.
a screenshot of the list view of the website
The user can easily create and edit lists, ticking off what they've already done and creating new items.
Testing makes perfect! one
I used a variety of testing methods to test and improve the site: I made use of Cypress to perform integration tests, as well as performing unit tests using Jest and React Testing Library.

Thanks for taking a look at this project!

go back to view more of my work