Aug 5, 2021
CS449 — Design Process for Disperse
The Problem
Overcrowding ruins the travel experience and the advent of popular social media platforms such as TikTok, Instagram and Pinterest are beginning to transcend the screen and affect the real world too. When these app’s millions of followers flock to the most ‘Instagrammable’ travel locations, it ruins the local ecosystem, increases overcrowding and facilitates only popular tourist locations in reaping all the profits. On a high level, this is what our team is attempting to thwart in order to disrupt the travel industry as we know it.
So, why is this problem worth addressing? To answer this question we first consider the term overtourism. The word was inducted into the Oxford dictionary in 2018 and was even nominated to be the word of the year, but what does it mean? The word quite literally translates to ‘over tourism’ and is a euphemism for the effect tourism has on the local flora, fauna and economy. The World Tourism Organization predicts that by 2030 there will be approximately 2 billion tourists travelling to popular destinations around the world. The excessive presence of tourists affects everyone from the local residents, to the tourists themselves, the economy and the environment.
Overtourism causes disruption to previously thriving ecosystems and dramatically increases the amount of waste found in these environments potentially erasing historical and cultural grounds. Not only does overtourism affect the environment, but overcrowded tourist sites are the single most cited reason for a poor travel experience. And finally, high traffic to only a select few locations is a recipe for destroying small businesses and the local economy.
Hence, the desired outcome of our app was to significantly reduce crowding in tourist areas, enlighten the overall travel experience for travelers and redirect traffic to lesser known attractions. In accomplishing these goals, we will be able to crack the code of the overtourism problem and in turn enable an enjoyable travel experience for all. We believe that all 7.7 billion residents of planet Earth deserve to travel in peace and save time, for a better time.
Our Solution
To solve this problem team MOXSS (Jasmine, Gracie, Mathura, Karina, and Saffiyah) developed an app called Disperse, that prevents the overcrowding of stores and tourist sites. The main purpose of the app is to empower users to seek out the path less travelled in order to disperse traffic to small businesses and less populated areas. In order to incentivize users to seek out local gems, we gamified map browsing and trip planning with a points system that rewards users with discounts to hidden local gems.
Initial Design Research
In order to better understand our problem space, we decided to conduct further research including deciding on our focus groups, user interviews, rough ideation, sketching, and prototype walkthroughs.
User Personas and Empathy Mapping
Our research began by narrowing down on our target audience for the application. We held a brainstorm session to come up with different user personas along with their empathy maps to understand their focus and needs.
We came up with 4 finalized personas, the social media influencer, the tour guide, the exchange student, people with special needs. They all had different motivations regarding why they were visiting a site or tour location, but we had discovered reasons why all of them may want the problem of crowding to be mitigated. Below are brief descriptions of each persona:
The social media influencer is in their late teens or twenties and have a platform on every social media app possible. They make a living promoting brands on these social platforms and one way they do this is by posting photos or videos at niche locations. They want to make a living from promoting their favorite brands but ultimately, their dream is to be famous and have some type of notoriety in the community. People such as their friends and fellow social influencers are important to them as their heart desires to always be ‘likeable’.
The tour guide has already spent a number of years working in the travel industry and are expanding their tours. The tour guide is looking to allow customers to discover the different aspects of Squamish, including local shops, restaurants, and activities. Eventually, they want to establish relationships with businesses within the city to allow discounts for their customers. They want to accommodate all different kinds of people. The tour guide wants to grow their business to eventually open a custom tour company. To do this, they need to have an established reputation.
The person with special needs is sensitive to noise and crowded environments which can lead to anxiety attacks. They also need a structured list of things to do with as many details as possible to avoid being overwhelmed or surprised. Due to their age and varying health concerns, they need wheelchair accommodations and close access to washrooms. Overall they are easy going and want to have a similar experience. They may find crowds overwhelming. They are always looking for a quiet spot but they really want to see more popular sites.
The exchange student is busy with studying so they can only travel on the weekends to areas close to where they reside. They are also concerned about their budget since they are a student. They are looking to expand her social group and meet some locals around the same age. They are neither an extrovert nor an introvert, but may appear a bit shy because they are not completely confident in their English. They also wish to see a lot of visuals of places during their travels to because they like photography and wants to take a lot of photos while travelling.
By creating these fictional users, we were then able to narrow our search when conducting real user interviews. Throughout the design process, we recruited real people from different backgrounds fitting with some aspect of our target user group and interviewed them.
User Interviews
User interviews were conducted in 3 parts; information gathering and hypothesis validation, paper prototype walkthroughs, high fidelity prototype walkthroughs and cognitive/heuristic evaluations. Here are some statistics on the kinds of people we ended up interviewing.
We interviewed 26 people, the average age of the interviewees was 22, most had some level of higher education, and candidates did skew towards the female gender group.
In the following section, we focus on the first set of interviews conducted. The other parts will be further expanded on as you keep reading.
Interview Questions
The first set of interviews acted as information gathering as we asked our users about their existing travel preparations, the obstacles they faced etc. Together, we did a whiteboard brainstorm session to come up with different questions and categories relevant to our research.
For this part, we created and iterated on the following set of questions we posed to each interviewee
Analyzing Results
To analyze our interview results, we used an affinity diagram to group repeating themes, categories and concerns we found in their answers.
After creating an affinity diagram, we noticed that our users are concerned about how a trip is planned and conflict mitigation/coordination during a trip. Some users want their trips to be planned thoroughly as both the trip planner and attender. Some other users enjoy trips with a relatively low budget although they may not specifically mention it. Users also adjust their plan on a trip depending on who they are travelling with. Users also found it difficult to coordinate among larger groups but developed certain strategies to deal with conflict(voting). Another concern for users is that they dislike waiting on a trip.
Another method we used to analyze our results was through work models. We created a cultural model and a Flow model to better understand the external factors affecting the users decisions and problems.
Conflicts may occur when planning with fellow travel companions, long wait time for certain attractions, internet connectivity issues, carrying heavy luggage/equipment around destinations, and finally hidden obstacles when obtaining transportation such as insurance fees, travel guidelines, licenses etc. As well, conflicts occur in communication, budget and time constraints. Local guides were also willing to give advice on what to see, but some wanted to avoid overcrowding in hidden sights. As such, we want to be mindful of the local guides by protecting hidden gems through a rewards system that only allow high-scoring users to discover such gems.
Brainstorming
Our team’s initial design ideas stem from a few different areas: user stories, storyboarding, sketches and user flows. All these elementary design activities assisted us in coming up with our initial set of features and eventually our initial design concepts in the form of paper prototypes. To kick off the search for the best set of features for our app, we went back to the basics: our 5 user personas. We brainstormed features each user persona would enjoy before finally voting on our final set of features.
From the results above, our initial set of features were:
- Search & Filter
- Rewards System
- Itinerary List
- Heat Map Visualization
- Travel Suggestions
Voting aside, our informational user interviews thus far provided us with significant findings in regards to which features we should implement in our prototype designs. Participant 5, a local photographer, stated many concerns surrounding safety and how they would like to see approximately how many other people are visiting an attraction as there could be safety in numbers. This user would likely find our heat map visualization feature very useful. Participant 3, a solo traveler, enjoys making plans on a whim with an itinerary that is not completely set in stone. This type of user would benefit from our travel suggestions feature that recommends close by attractions that a user may enjoy.
The key takeaways from our informational user interviews were that travelers wanted an experience that was catered towards their individual needs. These types of accommodations could be related to food allergies, families with small children, overcrowded sites, visiting unusual attractions such as local hidden gems and being able to plan their trips in a clear and concise way. The chosen features aim to relieve all of these pain points for our users.
In order to visualize how users would potentially interact with these features in real life, we then began designing storyboards. These storyboards were a short comic strip of how, where and why a user would use one of our features. It helped us grasp the user’s perspective of these features and how each user persona may find the feature useful. This in turn would assist us in designing our paper prototypes. Take a look at the below storyboard for the heat map feature. The storyboard perfectly pictures how a common scenario of using our heat map feature would play out. The users are pictured wanting to go to a park but are wary of overcrowding at the park. They’re able to use the map visualization to check which times of the day the park would be busiest, resulting in a crowd-free trip for the two friends.
We then sketched out some initial ideas and user flows. A sketch, not to be misconstrued with a wireframe, is a simple illustration of a feature and offers a basic outline of how the feature may present itself on screens. It is meant to support brainstorming and does not need to ‘look good’. Take a look at the below sketch of our search and filter feature. The sketch is rough in nature but covers an overview of the feature and explains subtle details further.
A user flow diagram demonstrates the path in which a user will follow through the various screens of the application. The goal here is to minimize the number of steps a user may take to complete a task using a particular feature. In completing the user flow diagrams for each of our initial set of features, we were able to scrutinize the efficiency of our application overall. Our rewards system feature had an interesting user flow as it covered multiple aspects of our app such as the user profile, map visualization and payment portal. The user flow diagram can be seen below. From the welcome landing page a user may choose to redeem their points for their next trip. This leads them to the interactive map where they can view sites and their associated points. Finally, they can book their trip using the points they’ve accumulated.
Rough Sketches
In conducting paper prototype evaluation studies, we found points of frustration for the user and iterated on our design to further our mission, reduce overcrowding, through the gamification of the app.
Map Visualization Feature
One feature we assumed to be useful was using a heat map to visualize locations based on popularity. The intent of this was to help users make a more informed decision quickly. Prototype walkthrough interviews were conducted under a specific scenario/use case such as choosing a time to go to a busy park in order to test out whether or not the visualization itself was effective in allowing the user to make an informed decision. Questions related to the clarity of the visualization as well as areas of improvement allowed this evaluation to happen and be iterated on.
We found that sometimes users struggle with just a visual representation of the data (i.e. a legend with no labels) and that supplementary information should be available to the user immediately to better understand the interface. In addition, we found that some users also prefer having qualitative data such as user reviews in addition to the quantitative to verify their own choice about going to a certain destination. Lastly, in general users that drove often really liked the parking availability prediction feature.
Rewards System Feature
We assumed that users would be incentivized to re-use the app if its features were gamified in some sense. In researching reward systems and loyalty programs in general, we found that “79% of customers say that loyalty programs make them more likely to continue doing business with brands” (Forbes, 2019). The rewards system would include a set of points that users can earn based on which attractions they visit. The key here is that certain overcrowded attractions would yield little to no points, whereas under-crowded attractions may yield several hundred points.
Users reported enjoying direct rewards more, however, material (indirect) rewards from local small businesses could also be awarded and goes hand in hand with the social implications of our app. The rewards system could also benefit from some minor UI changes such as the modification of the payment portal to include Apple Pay and Google Pay. Many participants felt that points were a great way to not only explore lesser known attractions but also use their points to earn other rewards such as future trips or material items.
Search and Filter Feature
Helping users find what they are looking for quickly is possible through text queries, filters and the dynamic reloading of search results. One common frustration in trip planning for users stem from making accommodations and finding the corresponding locations. As such, the filters are intended to make it more efficient to quickly find places that can make such accommodations. In the paper prototype interview, users were asked to search for places that serve Korean food and narrow down for places that meet certain constraints.
We discovered that users found the filtering process tedious and overwhelming due to the large amount of options and the large number of clicks required to apply a feature. Suggestions were given to put more emphasis on smart filtering to learn about the user’s tendencies. A common response to the visual search results was that an additional list format sorted by rating would be preferred since it provides more information at first glance. The next iteration of the feature will allow smart filter suggestions to be surfaced, include a list view of search results and display key information in a popup upon clicking on a given search result.
Travel Suggestion Feature
Travel suggestions will increase the visibility of lesser known locations to encourage users to visit less popular places and balance out crowds. In the paper prototype evaluation, users were asked to find a local attraction of interest and refresh the page for more travel suggestions.
We found that three out of four users want a way to conveniently navigate to a new travel suggestion after viewing the current one. One user suggested that instead of having a button, a new travel suggestion could be shown by scrolling down the page, similar to what TikTok does when showing a new video feed. Another user suggested that we rename the button to something similar to “new travel suggestion” to avoid naming confusions. Moreover, all users are interested in viewing how busy the place is, as another deciding factor for their trip planning. One of the users gave suggestions on having a list to keep her favorite suggestions so she can look back and compare them.
Itinerary & List Saving Feature
Itineraries allow users to plan out their activities and have saved items for their convenience. This would allow them to plan ahead for peak crowd times so that they can avoid certain areas and also take a lot of guesswork out of their trip. By doing this, users can move from one activity to the next seamlessly to help avoid loitering and crowding. During the paper prototype evaluation, users were asked to access, add, update and cancel items in an itinerary.
We found that most users enjoyed the experience navigating the feature and found it very intuitive. One user suggested adding a calendar feature to the itinerary so that users can have a different view of their events and another user suggested adding reminders to the events. A few users also suggested the ability to share itineraries directly to social media or with friends. One point of confusion for one user was how to add new items to saved lists as they expected there to be a search function. In order to make it easier to plan an itinerary, the map visualization and searching features will be integrated for an intuitive planning process.
User Findings, Evaluations, Iterations
We realized that the current set of features would not help solve the problem of overcrowding as they are too independent and vague. As such, we refined the features to have more focus gamification as well as displaying important information about locations to users. One of the main things we discovered as a result of user interviews was that we wanted to solve location discoverability. We realized that one of the biggest issues with overcrowding was that users did not know of other locations and as such defaulted to popular locations. They found that researching other locations was tedious and unproductive. With this information in hand we decided to integrate the rewards feature throughout the entire application as well as to make the other features more cohesive. We also added a popup throughout the application that displays information about the locations. This popup would include the number of points a user can earn from visiting that location, crowding graphs, ratings and a navigation button.
Search and Filter Feature
The search and filter feature is modified based on user interviews and the app redesign. In order to prevent overwhelming the user, the main collection of filters is hidden away under the More Filters category. Due to positive feedback on smart filters, the recent and automatically applied filters will be prioritized to help the user search more efficiently. As well, the new search bar will have a default search query for travel suggestions. The search results will have a label of the location name and when clicked, the popup will display information about the number of points to earn, hours, ratings, crowding graphs and the navigation button. There is a list view of the results as well as the map view of the results to cater to different decision making styles
Travel Suggestion Feature
The updated travel suggestion feature is now integrated with the itinerary list feature by having a heart-shaped button on the top right menu bar, which users generally understand the meaning of as a “like” button. After users click on the like button, a window will pop up from the bottom of the page displaying a list of saved lists and allow users to create new lists. Users will be able to scroll up and down if they have a lot of lists saved that cannot be displayed on one page.
Crowdsourcing Feature
Crowdsourcing was the new feature introduced as we realized that there was no mockup of how users could actually enter in information or reviews regarding a certain location. We ultimately decided to allow users to contribute to a review on the locations summary page that can be brought up when clicking on a result of location popup. From there, users can add to different categories of information by clicking on the add button for each section. We’ve outlined 4 examples of what the user can add to, hours of operation, parking, busy levels as well as leaving a review for the location.
Our Solution
Our Visual + Content Guidelines
Together we decided on foundational design components such as our branding, color theme, typography, language and tone, and how our components would look. We began this exploration by deciding the message we wanted to convey through our application and how our name would uphold this notion. In FigJam, we had a virtual brainstorm session where potential names and thoughts were thrown about. The primary themes that came out of this related to crowding, assistance, and information.
In the end, the message we wanted to convey is to empower and incentivize user’s to make smart travel decisions to prevent overcrowding. This also meant helping our community by supporting smaller businesses and protecting overused areas from damage.
Since an app name should be catchy, we decided to choose a short catchy name paired with a longer sub name separated by a hyphen. We drew inspiration from existing app names such as “Blossom — Plant Identifier”. Keeping the message in mind, we came up with the application + slogan name:
Disperse — Travel in Peace
The word disperse really captured what we ultimately wanted to do for a location, have the people disperse into the surrounding neighborhoods of a tour site. The slogan shed light on how we wanted to accomplish such a feat, in peace.
Next, we created a style guide to help standardize each of our designs.
We chose to utilize the Material UI library in order to adhere to Android standards and create any custom components we required along the way. A dark theme was chosen as we thought it would allow information to be shown on the screen with distinction and save the user battery if they are out and about.
High Fidelity Prototype
Map Visualization
Search and Filter
Reward System
Itinerary & List Saving
Travel Suggestion
Crowdsourcing
The main problem we are trying to address is to reduce overcrowding. The current features that we designed for our low-fidelity prototype are somewhat addressing the problem on their own. However, they are too independent and vague. Our features still lacked direction in how it would fulfill the mission. Therefore, our main goal when diving into designing high fidelity prototypes was to increase cohesion between our features while maintaining low coupling.
After refining the main message we are trying to deliver via our app again, we decided that what we want to convey is to empower and incentivize user’s to make smart travel decisions to prevent overcrowding.
We will have 6 key features:
- map visualization
- search and filter
- rewards
- itinerary/list saving
- travel suggestions
- crowdsourcing
The interface will be modified to be simpler so that excess information is hidden away rather than displayed out front. For example, the crowding percentage will only be shown when the user clicks on the graph. Another example is having a popup info card and a location details page which will differ in the amount of information provided.
The user flow will integrate all the features more tightly such as having the travel suggestions permeate in various places. For example, the default search query will be ‘Take me anywhere’ which allows the user to receive travel suggestions. As well, allowing usage of the map search feature from within itinerary planning. A consolidated page for the user’s profile will hold information for saved preferences, rewards, payments, social media information and their saved itineraries/lists. The home screen will comprise a map, search bar and profile photo along with the number of points earned. Giving such precedence to the map and the points indicates the importance of earning points by visiting under crowded locations. Helpful tooltips will be communicated to the user through popup messages and labels directly in the app interface such as underneath a text box or on a map.
Further Interviews and Testing
We selected “flexibility and efficiency of use”, “Recognition rather than recall”, “Aesthetic and minimalistic design”, “Match between system and the real world”, and “Consistency and standards” as our five heuristics used in our heuristic evaluation. The ‘flexibility and efficiency of use’ heuristic would be a good indicator of whether or not the components on our app are intuitive, user-friendly and effective. We want to ensure that all interactions are efficient and streamlined for the user. The heuristic ‘recognition rather than recall’ will let us know if the user’s memory load is minimal and they are able to view all the required information from one component to another. The ‘aesthetic and minimalistic design’ heuristic speaks for itself. It is included in our heuristic evaluation largely to ensure that our app is aesthetically pleasing and there are no unnecessary components on any of the screens.
The last two selected heuristics are related to persistent challenges mentioned in past user interviews. For instance, the ‘consistency and standards’ heuristic lets us know if we’ve solved the problem of vague terminology (ie, level of busyness, crowded, overcrowded, etc). Likewise, the ‘match between the system and real world’ heuristic would also be able to test if the words on our application are consistent and applicable to real-world use.
Here are the three tasks we gave our participants for the heuristic walkthrough:
- Search for places to get food that is a 5 minute walk away, caters to peanut allergies and has no line. Add a review to the location
- Find a travel suggestion (Niagara Falls) that user is interested in, view details of this travel suggestion and save it to the itinerary list
- Visit a ‘hidden gem’ that you have unlocked and observe the level of busyness at the attraction. You may assume the heat map already displays your location of interest
We collected many meaningful critiques from our heuristic evaluators. Users generally think that the application is flexible and efficient to use and that having a “back” button on most pages is efficient to use. Users also liked the tooltips provided on the heatmap page. Users agreed that the overall colour theme and design is simple and mostly consistent. Users thought that the concept of heat map would be familiar to many people since it is consistent with many real world applications. Users also thought that the search and filter map match with many real world applications as well.
However, users experienced difficulties when identifying the correct action to access a hidden gem from the rewards page. Users also pointed out that the travel suggestion feature and the search filter feature seem to have some different UIs although they expect the two features to have the same design components.
We reused our three tasks for the cognitive walkthrough given that those tasks are complicated enough for users to explore all our features. For task 1, users were able to identify the action of clicking on the search bar, but struggled with clicking on filters to narrow down the result. The remaining tasks were completed as desired
For task 2, one user quickly navigated to travel suggestions and viewed details of the travel place. However, the user struggled with identifying the heart icon as the way to add a travel suggestion to a list. Another user was able to complete the task, but took a few moments to discover that the heart button is for adding a travel suggestion to a list.
For task 3, users were generally confused about where the hidden gem feature is located, and one user specifically mentioned that it would be good to access hidden gems directly through the profile. Another user was confused with the definition of “observe the level of busyness” as mentioned in the task, but was able to understand that it means to navigate to our heat map feature after explanation.
Based on both heuristic evaluations and cognitive walkthroughs, we took most of the recommendations and proposed small but meaningful design changes to our high fidelity prototypes. One design change that we proposed was to make the “heart” icon stand out more through adjusting the size. A major challenge that most users experienced was correctly accessing “hidden gems” using the flow of going to the user profile first, clicking on rewards, and clicking on treasure chest. We recognized that this process may not be intuitive for users and so we adapted our user profile page to include an extra field called “hidden gems”. We also took the advice on unifying the user interface for the location detail page on both the search and filter feature and the travel suggestion feature. We thought about reusing components and modifying the details of each component to ensure that the user interface looks consistent. Regarding the comment on adding a tooltip to explain the use of “points” in our app, we thought about having a pre-loading screen to explain some of the terminologies used in our app when users use our app for the first time. We are also trying to match with the existing applications more this way.
The Future
The design process was thorough and intensive. We experienced many new things from the Lo-Fi prototypes to varying user interviews. In order to solve the problem of overcrowding we used a rewards system to incentivize users to visit less populated locations. We also provided users with a means to see how crowded areas are at various times via a heat map. By using rewards to incentivize users, it makes the task of planning a trip more fun and engaging. Also, since users would have more of a reason to visit less popular locations, it will help disperse the crowd at other locations.
Overall, we enjoyed the process of designing this app and feel very proud of what we accomplished. If we were to do this project again we would iterate on our set of personas more often in order to allow more time for scoping out additional features, such as the crowdsourcing feature to replace the business owner persona.
Again, we had a great time with this project and we hope you enjoy seeing what we accomplished!
Team MOXSS
