Wanderlist
Building a responsive travel planning app
Wanderlist
Building a responsive travel planning app
Wanderlist
Building a responsive travel planning app
Wanderlist
Building a responsive travel planning app
My Role
My Role
My Role
UX Research, Product Designer, UI Designer.
UX Research, Product Designer, UI Designer.
UX Research, Product Designer, UI Designer.
Project Duration
Project Duration
Project Duration
July - September 2023
July - September 2023
July - September 2023
The Problem
The Problem
The Problem
Planning activities for trips abroad can be a daunting task. It involves finding relevant websites, avoiding ticket resellers, and deciding on the things that interest you the most. This process can be time-consuming and exhausting. Wouldn't it be great if there was a product that could simplify this process?
Planning activities for trips abroad can be a daunting task. It involves finding relevant websites, avoiding ticket resellers, and deciding on the things that interest you the most. This process can be time-consuming and exhausting. Wouldn't it be great if there was a product that could simplify this process?
Planning activities for trips abroad can be a daunting task. It involves finding relevant websites, avoiding ticket resellers, and deciding on the things that interest you the most. This process can be time-consuming and exhausting. Wouldn't it be great if there was a product that could simplify this process?
— 01. Research
— 01. Research
— 01. Research
Learning about holidaymakers
Learning about holidaymakers
Learning about holidaymakers
I started the project by creating an open survey to learn more about the existing habits of holidaymakers, and what frustrations they experience while trying to book their trips abroad.
I started the project by creating an open survey to learn more about the existing habits of holidaymakers, and what frustrations they experience while trying to book their trips abroad.
I started the project by creating an open survey to learn more about the existing habits of holidaymakers, and what frustrations they experience while trying to book their trips abroad.
What are the main activities users engage with on holiday?
How do users approach the search for things to do abroad?
How do users typically book for these activities?
What frustrations are experienced in either stage of the process?
Are there any existing products that are used?
What are the main activities users engage with on holiday?
How do users approach the search for things to do abroad?
How do users typically book for these activities?
What frustrations are experienced in either stage of the process?
Are there any existing products that are used?
What are the main activities users engage with on holiday?
How do users approach the search for things to do abroad?
How do users typically book for these activities?
What frustrations are experienced in either stage of the process?
Are there any existing products that are used?
24 questions later, insight emerges
24 questions later, insight emerges
24 questions later, insight emerges
19 respondents filled in the survey, with ages ranging from 18-24 up to 65-74. The survey itself had filtering built in, which allowed analysis of different data sets based on how questions were answered.
19 respondents filled in the survey, with ages ranging from 18-24 up to 65-74. The survey itself had filtering built in, which allowed analysis of different data sets based on how questions were answered.
19 respondents filled in the survey, with ages ranging from 18-24 up to 65-74. The survey itself had filtering built in, which allowed analysis of different data sets based on how questions were answered.
84% of respondents had travelled abroad in the last 12 months.
The majority of respondents look at budgeting first when choosing a destination.
The second thing that is looked at is the availability of activities at said destination.
Most popular holidays are for relaxation (37%) and for cultural or historical visits (31%)
All respondents said the main activity they did on holiday was sightseeing.
Respondents typically use Google to find things to do, or through word-of-mouth recommendations. Additionally, several respondents mentioned using TripAdvisor, TikTok, and Instagram.
84% of respondents had travelled abroad in the last 12 months.
The majority of respondents look at budgeting first when choosing a destination.
The second thing that is looked at is the availability of activities at said destination.
Most popular holidays are for relaxation (37%) and for cultural or historical visits (31%)
All respondents said the main activity they did on holiday was sightseeing.
Respondents typically use Google to find things to do, or through word-of-mouth recommendations. Additionally, several respondents mentioned using TripAdvisor, TikTok, and Instagram.
84% of respondents had travelled abroad in the last 12 months.
The majority of respondents look at budgeting first when choosing a destination.
The second thing that is looked at is the availability of activities at said destination.
Most popular holidays are for relaxation (37%) and for cultural or historical visits (31%)
All respondents said the main activity they did on holiday was sightseeing.
Respondents typically use Google to find things to do, or through word-of-mouth recommendations. Additionally, several respondents mentioned using TripAdvisor, TikTok, and Instagram.
In terms of things that users would like to see were user reviews, suggestions from locals, official ticketing links, photographs, and activity filtering.
In terms of things that users would like to see were user reviews, suggestions from locals, official ticketing links, photographs, and activity filtering.
In terms of things that users would like to see were user reviews, suggestions from locals, official ticketing links, photographs, and activity filtering.
So, what were the pinch points?
So, what were the pinch points?
So, what were the pinch points?
"Having to collate data on pricing, booking, and working out what is worth visiting vs what is an advert".
"Being recommended luxury or highly-priced trips when I did not want that".
"It was annoying getting recommended things that were outside my area or requirements".
"Having to collate data on pricing, booking, and working out what is worth visiting vs what is an advert".
"Being recommended luxury or highly-priced trips when I did not want that".
"It was annoying getting recommended things that were outside my area or requirements".
"Having to collate data on pricing, booking, and working out what is worth visiting vs what is an advert".
"Being recommended luxury or highly-priced trips when I did not want that".
"It was annoying getting recommended things that were outside my area or requirements".
Looking into the competition
Looking into the competition
Looking into the competition
Using the information from my survey on what respondents currently use, I decided to explore the competition.
Using the information from my survey on what respondents currently use, I decided to explore the competition.
Using the information from my survey on what respondents currently use, I decided to explore the competition.
— 02. Define
— 02. Define
— 02. Define
Who are the users?
Who are the users?
Who are the users?
Using the results of my research and interviews, I created three distinct personas to fit the profiles of target users and the goals they would be looking to achieve whilst using the product.
Using the results of my research and interviews, I created three distinct personas to fit the profiles of target users and the goals they would be looking to achieve whilst using the product.
Using the results of my research and interviews, I created three distinct personas to fit the profiles of target users and the goals they would be looking to achieve whilst using the product.
Alex - "The Solo Traveller"
Pinch points
Alex has been scammed out of money for a fake tour in the past and is now nervous about booking from just a simple Google search - they will only use official ticketing links.
User needs
A way to find local picks and traditional tourist activities.
Links to official ticketing sites,
Something to allow filtration of activity types.
A way to find local picks and traditional tourist activities.
Links to official ticketing sites,
Something to allow filtration of activity types.
A way to find local picks and traditional tourist activities.
Links to official ticketing sites,
Something to allow filtration of activity types.
Leo & Jas - "The Couple"
Pinch points
Finding things based on location. In the past, Leo and Jas have been enthusiastic about an activity they want to do abroad, only to then find out it's hours outside the area they're staying and therefore not feasible.
User needs
The ability to set their location and filter out results that are too far away for them to visit on their trip.
The ability to set their location and filter out results that are too far away for them to visit on their trip.
The ability to set their location and filter out results that are too far away for them to visit on their trip.
The Martins - "The Family"
Pinch points
Balancing the interests of kids with different ages can be challenging.
When searching, results often come up that are out of budget.
Balancing the interests of kids with different ages can be challenging.
When searching, results often come up that are out of budget.
Balancing the interests of kids with different ages can be challenging.
When searching, results often come up that are out of budget.
User needs
Simple, clean UI with intuitive and easy iconography.
A way to see what is and isn't in budget for a family of four on a trip abroad.
With research complete and personas created, I narrowed down the features that would be needed to create the minimum viable product. I settled on search functionality, activity and event pages, reviews, and a way to filter via activity type or location.
With research complete and personas created, I narrowed down the features that would be needed to create the minimum viable product. I settled on search functionality, activity and event pages, reviews, and a way to filter via activity type or location.
With research complete and personas created, I narrowed down the features that would be needed to create the minimum viable product. I settled on search functionality, activity and event pages, reviews, and a way to filter via activity type or location.
Designing task and user flows
Designing task and user flows
Designing task and user flows
The next step in the process was to create task and user flows to envision how users would move through tasks, and to work out the screens that would need to be completed - both on mobile and on desktop.
The next step in the process was to create task and user flows to envision how users would move through tasks, and to work out the screens that would need to be completed - both on mobile and on desktop.
The next step in the process was to create task and user flows to envision how users would move through tasks, and to work out the screens that would need to be completed - both on mobile and on desktop.
A simple, easy-to-complete onboarding process including accessibility options during the process.
How to search for and filter activities and the results.
A simple, easy-to-complete onboarding process including accessibility options during the process.
How to search for and filter activities and the results.
A simple, easy-to-complete onboarding process including accessibility options during the process.
How to search for and filter activities and the results.
Accessible Onboarding
Accessible Onboarding
Accessible Onboarding
Search and Filter
Search and Filter
Search and Filter
— 03. Design
— 03. Design
— 03. Design
Tackling mid-fis and responsive design
Tackling mid-fis and responsive design
Tackling mid-fis and responsive design
As part of the project, we were tasked with creating a product that would work across breakpoints. I chose to focus on mobile and desktop. What I learnt along the way is that I find it much harder to work on a larger scale - I prefer mobile screens, as desktop ones seem to have too much real estate to work with!
As part of the project, we were tasked with creating a product that would work across breakpoints. I chose to focus on mobile and desktop. What I learnt along the way is that I find it much harder to work on a larger scale - I prefer mobile screens, as desktop ones seem to have too much real estate to work with!
As part of the project, we were tasked with creating a product that would work across breakpoints. I chose to focus on mobile and desktop. What I learnt along the way is that I find it much harder to work on a larger scale - I prefer mobile screens, as desktop ones seem to have too much real estate to work with!
Creating a visual brand and style
Creating a visual brand and style
Creating a visual brand and style
Before I went any further with any prototyping, I wanted to narrow down the branding. At this point the app didn't even have a name, and so sorting that felt quite important. I settled on "Wanderlist" - a way to combine the idea of wanderlust with a list of activities.
Before I went any further with any prototyping, I wanted to narrow down the branding. At this point the app didn't even have a name, and so sorting that felt quite important. I settled on "Wanderlist" - a way to combine the idea of wanderlust with a list of activities.
Before I went any further with any prototyping, I wanted to narrow down the branding. At this point the app didn't even have a name, and so sorting that felt quite important. I settled on "Wanderlist" - a way to combine the idea of wanderlust with a list of activities.
Colour scheme and typography
Colour scheme and typography
Colour scheme and typography
I wanted something that felt adventurous, and orange felt like an obvious choice; it's eye-catching and non-gendered, without the negative connotations of a colour like red.
I chose a font that had more personality, whilst still being legible at different sizes and weights.
I wanted something that felt adventurous, and orange felt like an obvious choice; it's eye-catching and non-gendered, without the negative connotations of a colour like red.
I chose a font that had more personality, whilst still being legible at different sizes and weights.
I wanted something that felt adventurous, and orange felt like an obvious choice; it's eye-catching and non-gendered, without the negative connotations of a colour like red.
I chose a font that had more personality, whilst still being legible at different sizes and weights.
Working on the logo
Working on the logo
Working on the logo
There were a lot of immediate ideas for designs, but in the end a dotted line between where you are and where you want to go won out - it was clean and showed the basic idea of the product.
There were a lot of immediate ideas for designs, but in the end a dotted line between where you are and where you want to go won out - it was clean and showed the basic idea of the product.
There were a lot of immediate ideas for designs, but in the end a dotted line between where you are and where you want to go won out - it was clean and showed the basic idea of the product.
Moving to high-fidelity
Moving to high-fidelity
Moving to high-fidelity
With branding sorted out and mid-fis made, I moved on to my high-fidelity mock-ups and focused on making sure everything was clean and made sense. I prioritised the following things as the key features, using research and my personas:
With branding sorted out and mid-fis made, I moved on to my high-fidelity mock-ups and focused on making sure everything was clean and made sense. I prioritised the following things as the key features, using research and my personas:
With branding sorted out and mid-fis made, I moved on to my high-fidelity mock-ups and focused on making sure everything was clean and made sense. I prioritised the following things as the key features, using research and my personas:
Results page that focused on showing the activities that were closest to the search location.
A robust filter system that could filter by budget, location, or activity type.
User reviews and links to official ticketing sites so users could avoid scam sites.
Results page that focused on showing the activities that were closest to the search location.
A robust filter system that could filter by budget, location, or activity type.
User reviews and links to official ticketing sites so users could avoid scam sites.
Results page that focused on showing the activities that were closest to the search location.
A robust filter system that could filter by budget, location, or activity type.
User reviews and links to official ticketing sites so users could avoid scam sites.
— 04. Test
— 04. Test
— 04. Test
Testing the product
Testing the product
Testing the product
My usability tests were run remotely via Google Meet and recorded for further review. Each participant shared their screen with me, and I asked them to talk me through their thought processes and reasoning as they completed the below tasks.
My usability tests were run remotely via Google Meet and recorded for further review. Each participant shared their screen with me, and I asked them to talk me through their thought processes and reasoning as they completed the below tasks.
My usability tests were run remotely via Google Meet and recorded for further review. Each participant shared their screen with me, and I asked them to talk me through their thought processes and reasoning as they completed the below tasks.
Complete these tasks…
To complete the onboarding process. In this scenario, I asked participants to imagine they were new joiners who were signing up for the first time and to walk me through the sign up process.
To perform a basic search, and to browse the results that appeared.
To filter the results, based on pre-assigned interests and activity types.
To test the functionality of the map, and how it feels to use it.
To complete the onboarding process. In this scenario, I asked participants to imagine they were new joiners who were signing up for the first time and to walk me through the sign up process.
To perform a basic search, and to browse the results that appeared.
To filter the results, based on pre-assigned interests and activity types.
To test the functionality of the map, and how it feels to use it.
To complete the onboarding process. In this scenario, I asked participants to imagine they were new joiners who were signing up for the first time and to walk me through the sign up process.
To perform a basic search, and to browse the results that appeared.
To filter the results, based on pre-assigned interests and activity types.
To test the functionality of the map, and how it feels to use it.
What did the usability testers say?
What did the usability testers say?
What did the usability testers say?
With my testing completed, I rewatched the tests and made notes to pick out the comments that explained what did or didn't work for the participants as well as any suggested changes to the UI. I then added all of these to a feedback grid to scan through easily.
With my testing completed, I rewatched the tests and made notes to pick out the comments that explained what did or didn't work for the participants as well as any suggested changes to the UI. I then added all of these to a feedback grid to scan through easily.
With my testing completed, I rewatched the tests and made notes to pick out the comments that explained what did or didn't work for the participants as well as any suggested changes to the UI. I then added all of these to a feedback grid to scan through easily.
Changes suggested
While most results were generally positive, testing did reveal some changes to make:
While most results were generally positive, testing did reveal some changes to make:
While most results were generally positive, testing did reveal some changes to make:
Simple changes like making sure the app's name was written consistently.
Update the map icons and play with shape language - testers did not understand what they represented.
Amend some fonts, as on desktop a few were mismatched.
To explore why there is a postcode option in the filter box when users have already searched via postcode.
Simple changes like making sure the app's name was written consistently.
Update the map icons and play with shape language - testers did not understand what they represented.
Amend some fonts, as on desktop a few were mismatched.
To explore why there is a postcode option in the filter box when users have already searched via postcode.
Simple changes like making sure the app's name was written consistently.
Update the map icons and play with shape language - testers did not understand what they represented.
Amend some fonts, as on desktop a few were mismatched.
To explore why there is a postcode option in the filter box when users have already searched via postcode.
— 05. Iterate
— 05. Iterate
— 05. Iterate
Finalising the product and making changes
Finalising the product and making changes
Finalising the product and making changes
With the feedback from the usability test participants in mind, I went back to my original prototype and worked on the changes to ensure that the final product was as polished as possible. To test the updated flows yourself, please visit this Figma link, where you can click through each task.
With the feedback from the usability test participants in mind, I went back to my original prototype and worked on the changes to ensure that the final product was as polished as possible. To test the updated flows yourself, please visit this Figma link, where you can click through each task.
With the feedback from the usability test participants in mind, I went back to my original prototype and worked on the changes to ensure that the final product was as polished as possible. To test the updated flows yourself, please visit this Figma link, where you can click through each task.
Onboarding Process
Onboarding Process
Onboarding Process
No changes were made to these screens, as the testing participants had no issues with completing onboarding.
No changes were made to these screens, as the testing participants had no issues with completing onboarding.
No changes were made to these screens, as the testing participants had no issues with completing onboarding.
Searching for activities and filtering
Searching for activities and filtering
Searching for activities and filtering
The main issue across my usability testing related to the map on the search function. Users felt the iconography was not clear enough, and did not understand that the 'pips' represented areas of interest.
The main issue across my usability testing related to the map on the search function. Users felt the iconography was not clear enough, and did not understand that the 'pips' represented areas of interest.
The main issue across my usability testing related to the map on the search function. Users felt the iconography was not clear enough, and did not understand that the 'pips' represented areas of interest.
Left: original screen
Right: final iterations
I used the existing iconography from the logo to make the 'destinations' clearer to users.
Removed the 'search by postcode' from the filter system, and instead added a sliding scale so users could add more range to their search (should they wish to).
Added extra information on the activity page so uses could see if it was accessible, had gender neutral toilets, and whether it was a guided or self-guided tour.
I used the existing iconography from the logo to make the 'destinations' clearer to users.
Removed the 'search by postcode' from the filter system, and instead added a sliding scale so users could add more range to their search (should they wish to).
Added extra information on the activity page so uses could see if it was accessible, had gender neutral toilets, and whether it was a guided or self-guided tour.
I used the existing iconography from the logo to make the 'destinations' clearer to users.
Removed the 'search by postcode' from the filter system, and instead added a sliding scale so users could add more range to their search (should they wish to).
Added extra information on the activity page so uses could see if it was accessible, had gender neutral toilets, and whether it was a guided or self-guided tour.
— 06. Conclusion
— 06. Conclusion
— 06. Conclusion
What did I learn from the project?
What did I learn from the project?
What did I learn from the project?
I learned that I find it more challenging to design for desktops compared to mobile devices. Having more space feels liberating but it also makes it harder to make the most of it, especially when taking a mobile-first approach as a UX designer. Despite this, working on this project allowed me to expand my thinking about designing for desktops and acquire new Figma skills. I had never attempted to create a moving map in this way before, and it feels like a valuable skill to have for future projects that may require a similar prototype.
I learned that I find it more challenging to design for desktops compared to mobile devices. Having more space feels liberating but it also makes it harder to make the most of it, especially when taking a mobile-first approach as a UX designer. Despite this, working on this project allowed me to expand my thinking about designing for desktops and acquire new Figma skills. I had never attempted to create a moving map in this way before, and it feels like a valuable skill to have for future projects that may require a similar prototype.
I learned that I find it more challenging to design for desktops compared to mobile devices. Having more space feels liberating but it also makes it harder to make the most of it, especially when taking a mobile-first approach as a UX designer. Despite this, working on this project allowed me to expand my thinking about designing for desktops and acquire new Figma skills. I had never attempted to create a moving map in this way before, and it feels like a valuable skill to have for future projects that may require a similar prototype.