TourisNot
Location-based recommendation app
Figma-Adobe Lightroom, POP, Usabilityhub
Intro
-
TourisNot is a personal project I built as part of my UI Design course at CareerFoundry. The purpose of the project was to create a location recommendation application.
-
Web users are hugely dependent on the use of maps. For this reason, I decided to work on a web app that allows locals to provide tours and workshops to travelers based on their location. The focus is to provide travelers with information as they explore a new destination with the help of locals.
-
The deliverables include user research, UX design and product design.
Discover
〰️
Ideate
〰️
Wireframe
〰️
Test
〰️
Iterate
〰️
Discover 〰️ Ideate 〰️ Wireframe 〰️ Test 〰️ Iterate 〰️
Discover
Competitor Analysis
STRENGTHS
A well-established organization known globally.
They have remained loyal to their first concept.
There are more than 40,000 experiences on their platform.
WEAKNESSES
It is hard for them to keep the same quality standards throughout all their listings.
Several scandals concerning security in their properties and scams.
STRENGTHS
Ranks as #1 in the Travel and Tourism category in the US.
20 years and it keeps growing strong.
Pioneer of online hotel and flight bookings.
WEAKNESSES
Controversies with fake reviews.
It has suffered a data breach in the past.
There are many other travel applications emerging.
STRENGTHS
Powerful location data platform.
High ratings as a web app.
Community-based.
WEAKNESSES
In recent years has become less known.
The Concept mainly attracts young people.
Hypothesis
“Travelers rely on technology to plan their trips, especially location-based recommendations for restaurants, attractions, stores, and other businesses.”
Conducting interviews
Afterward, I conducted interviews asking people how they plan their trips, how often they travel, and what tools they use. It was important to become familiar with their frustrations and understand the features they enjoyed from available apps. These are the main points learned:
Modern travelers depend on technology to plan their trips.
Google Maps is key for finding places and activities to do when traveling although sometimes it is not 100% accurate.
Apps that don’t require much personal info and are easier to navigate are preferred.
Travelers enjoy exploring areas frequented by locals.
“I’d love to have all info and imagery in one specific app rather than jumping from one to another.”
-Interview participantDefining the product
What will the product do?
The app will recommend tours and/or special events based on the traveler’s location and depending on the dates they are visiting.
Where will the product be used?
At home while planning their trip or on the go when looking for something to do last minute.
Why does the user need the product?
To plan tours with locals and obtain accurate information on their destinations.
Which platform and devices will the product live on?
Users will be able to access it on their browsers on any screen (desktop or iPad) as well as their phones.
Business Goals
Business goals I am trying to achieve when this product launches
Create a platform where locals and tourists can interact and benefit from each other. Our goal is to gain brand recognition. Build trust among users so that the business can grow its membership and create a revenue stream.
Success Metrics
Amount of signups
Amount of tours booked
Number of downloads
travel like a local
〰️
travel like a local 〰️
Ideation
User Flows & Diagram
Once the product specifics were defined, it was time to set the Minimum Viable Product (MVP) and I did so with the following user stories to identify the features I would need to work on.
As a user, I want to create a profile that holds my information and search history to achieve my goals faster.
User Stories
As a user, I want to see a detailed description and videos of the activities done, so I can clearly understand what I will do and see on that tour.
As a user, I want the creating a tour process to be seamless, so I can easily upload the information and not waste time trying to learn how the app works.
Input section for user personal information such as user name, brief description, or quote
Allow users to upload a profile picture
Create a section for saved tours, write reviews, and add photos/videos of previous tours
Allow users to save a payment method
Feature Requirement
Create an ample list of tours available in each location
Request each host to upload a minimum of photos of their tours, if possible, a short video
Utilize the geolocation technology to provide the user with an accurate list of tours available near them
Allow travelers to share their pictures when doing a tour
Design an intuitive screen for hosts to create their tours
Allow hosts to post videos and photos to promote their event
User Personas
After the initial research and having the product defined, three user personas were created to achieve a user-centered app. The intention was to be as inclusive as possible and set the users in potential scenarios where they would be using the app.
Wireframes
Low-fidelity Wireframes
The first step in designing the wireframes was to create rough sketches of all the pages needed for the user flows. By using pen and paper I was able to come up with the best UI patterns for each feature in a simple and quick way.
Usability testing
After I had all the flows, I made a quick prototype on POP and tested it with potential users. By doing this, I collected feedback on the design before even creating the mid-fidelity wireframes and iterated the designs based on the user’s pain points. These are the key points I learned:
Not everybody felt comfortable adding their credit card info when creating a profile, so it was best to delete this screen.
I had to rearrange the filter option since it wasn’t clear how it would unfold and hide in case the user wanted to modify the filters applied.
Finally, adding a tab bar would improve the usability of the app
Mid-fidelity Wireframes
Signing up, profile set up, and home screen
Creating a tour
Style Guide
Colors
Typeface
The color palette for this project is inspired by sunrises and clear skies, being orange the primary color. Using gradients for a modern and upbeat vibe. As for the typefaces, Poppins was picked for all copy text. This typeface is popular for being rounded and clear to read which allows users to feel welcomed and trust the product.
Icons and buttons
Imagery
Testing & Iterations
A & B Testing
In order to design the best screen possible, I conducted an A&B testing utilizing two different colors applied. Out of thirteen testers, eight (62%) chose screen A and five (38%) chose screen B. After the testing, I kept iterating the app style. I had the idea of using gradients but was unsure of how to apply them until after much experimenting.
Screen A
Screen B
Iterations
Based on the screen chosen from the A&B testing and with the help of my mentor I kept iterating the design to improve the accessibility and make it more appealing. These are the main changes applied:
Changed the logo’s typeface into a bold and rounded one
Made a gradient based on the primary colors and kept it subtle throughout the app
Removed the map from the home screen since it was taking most of the space before the fold. Instead, the tour options and recommendations were showcased
Implemented a tab bar which also improved with the iterations
Expanded all elements so the layout had more negative space and a cleaner look. All typography size was increased to be legible to all users
1
2
3
Mockups/Prototypes
Creating a Profile (User flow 1)
Browsing tours (User flow 2)
Creating a tour (User flow 3)
I had to learn concepts while developing the app. I learned how to conduct interviews, test, create a style guide, and present the design process through a case study. I learned that design is a process not only a result.
CREDITS
Photos: Pexel, Unsplash and own photos
Icons: from www.iconscout.com
Illustration: empty states Figma community