Developing a Trip Planning Tool — Building Mystro

Introduction to Mystro

Mystro is a nascent start-up in development. The CEO/Developer, John Murphy, defines Mystro as a lightweight trip planning and organizational tool to keep track of places, plan trips, and share experiences with other people.

Mystro’s social features empower users not only to share recommendations with other people, but also request recommendations from friends to be incorporated into trips.

We worked with John to define a problem statement and goal for this short project.

Problem Statement & Goal

Currently Mystro has a working desktop platform at Mystro.io, however, John tasked me and my other UX design colleagues to research and provide a better understanding of trip planning behaviors and mindsets of users. Our end goal was to design a research-based prototype that allows users to organize a trip and gather recommendations from friends. Once the project brief was clearly defined we delegated roles.

My role on the design team

I was the project manager and main point in contact for the client. I conducted comparative analysis research, initial wireframes in Sketch and early prototypes in InVision. I wrote and created the research report and presentation materials to our client.

Executive Summary

We researched competitors in the travel space as well as comparative sites for organization and collaboration. We conducted surveys and interviews and discovered varied planning styles and behaviors. From over 70 types of planning tools and styles of travel we developed user personas and prioritized features to design for the needs, pleasures and minimize pains of users. The three distinct users of Mystro were based largely on the level of structure they use in their travel.

After prioritizing features we designed screens based on user persona flows that we then tested repeatedly to validate usability. The final prototype serves the need to organize a trip and obtain recommendations from friends. We began with testing the current site.

Initial Usability Findings

To begin our initial research, the team conducted usability tests of the current Mystro site. Mystro.io is current an operating site with the ability to:

• Create a profile
• Add trips
• Add activities for trips
• Filter trips by visited or not visited

We conducted 5 usability tests asking users to do us an existing login and create a trip and add an activity they would like to do for the trip.

All users were able to create a trip. However, consistent challenges existed after each trip was created including:

Map orientation — Many users noted the orientation to be on New Haven initially and not updating when they entered a city. For example, when entering Florida the map oriented to Brazil and when one user wanted restaurants in Trinidad she received New York recommendations.

• Site responsiveness to selections — When users chose a category or activity the site did not give a confirmation of their selection
• No recommendations — Users also expected to receive recommendations when selecting a category
• Types of activities — Default types of activities were confusing to users (e.g. tapas in Taiwan or fishing anywhere there wasn’t water)

General user observations and confusion

• Could not determine how to save a trip (or if a trip had been saved)
• Calendar required users to click through each month to get to a date rather than a scrollable option. We observed a user planning a trip in April 2017 have to go through each month in 2016 to get to their chosen date.
• “Custom” as a category was unclear
• “Visit” and “Visited” options were in an unexpected location

Based on some of the responses, we believed the site needed a new style to create more clarity.

Style Guide

Since Mystro is so early in development there is no defined style guide. We created a basic style guide for John to follow to better reflect hierarchy in content and give it a more clean UI. After creating a style guide we dug deeper into our research and evaluation.

Analysis and Evaluation

In our analysis and evaluation, we conducted the following:

● Competitive Analysis

● Comparative Analysis

● Heuristic Evaluation

● Analysis of “best in class” sites

While many of the sites were responsive across platforms, we focused our research on the desktop version of each respective site.

Competitive Analysis

We conducted a competitive feature and elements analysis of seven travel sites. The sites included:

Both feature and element analyses allows us to understand the overall website conventions in the industry, how they differ and gave us an opportunity to assess what works and what can be improved.

We found with the feature analysis that all sites but one (86%) allow for a form of collaboration and only one (Tripit) allows for easy population of information.

While the feature analysis identifies whether the site has or does not have particular features, the element analysis goes more granular with the specifics of what is included on the primary navigation, landing and home page.

Elements on each site varied greatly particularly on the landing page. While Tripomatic keeps a lightweight approach of focusing on creating a trip, Tripadvisor has various calls to action with very little level of hierarchical importance. We wanted to pay attention to the lightweight approach the founder and developer called out specifically because of the early stage of the site.

Comparative Analysis

With comparative analysis, the design team followed the same process of feature and element analysis, but went beyond just travel sites. While Mystro is a trip planning site, it is at its core a way for people to organize, plan and collaborate. Planning, organizing and collaboration does not have to be specific to travel so we wanted to delve deeper into popular sites in these areas. We researched twelve sites which have the primary function of list creation (a mechanism for organization and planning) and those with the main function of collaboration.

We conducted a feature analysis for list making applications similar to the one for competitive analysis, but in this case specifying the speed (determined by user clicks) in which the primary function can be executed. We found that once logged in, the majority of sites require three clicks to accomplish the primary site function.

When evaluating the elements, we found that 3 out of the 5 sites did not have content in their footer. Also the content in the global navigation varied greatly. With the comparative collaboration tools we found various levels.

For example, full collaboration exists in Google docs where you can edit and share documents. In contrast, Foursquare allows for collaboration in the form of commenting on posts rather than editing documents. We needed to consider, if we determined that collaboration was part of our minimum viable product (MVP), how we could design for it.

Heuristic Evaluation

When conducting a heuristic evaluation, the design team used 10 heuristics and evaluated each site on a 1–5 scale (5 being the strongest). We reviewed the overall usability of 6 of the top comparative and competitive sites. We found that most of the sites (4 out of 6) were communicative while the ability to control content varied across sites.

Analysis from “Best in class” sites

After evaluating the various sites, we created a “best in class” layout list of sites that combine planning and/or collaboration.

We identified Evernote as a best in class for organization because of it’s light weight, ease of use and simple user interface. Citymaps’ map view gave clear location indicators and visuals of cities creating visual interest. Visual content was king with Pinterest with photos and minimal text creating the site’s user interface. We also looked at Panda, a site for daily inspiration for designers for one of the more dynamic layouts of visuals. While conducting the discovery and evaluation research, we developed a survey and began interviewing users.

User Research

Survey and analysis

We conducted a survey with a focus on understanding overall trip planning behavior. Our 57 respondents answered questions about their previous trips, tools used and general planning habits. All respondents sought some form of recommendation in helping the trip planning process with 66% of them saying it was “the first thing they do.” Other findings include:

• 95% need to collaborate with some sort of stakeholder while planning
• 73% use email as a form of collaboration
• 61% create a form of itinerary before they travel
• 88% look online for inspiration

Interview findings and Traveler Planning habits

Based on the survey results we interviewed 15 individuals (ages 23–45) with varied travel planning habits and delved deeper on how they make decisions. There were some consistent themes.

The first very apparent variance were the tools used. Interviewees used 73 different type of “planning tools” ranging from travel inspiration to recommendations.

Consistent with the varied tools used, each traveller’s level of structure varied greatly; with some having very detailed and specific structure while others wanting to have greater flexibility. We collected all our findings and started affinity mapping to see common themes and determine feature priorities.

Affinity Mapping and User Personas

To better understand our travelers as well as build features that best fit their needs we conducted affinity mapping.

In our affinity mapping we saw a theme of the trip context being a driver for planning. From a romantic trip with a partner to a relaxing beach vacation to a cultural immersive trip in a foreign country, travelers spoke of the need to determine this to be able to make travel plans. Trips such as those for business or obligation (e.g. visit parents, friend’s wedding) were less planning focus.

We put together all the research and started to develop user personas. User personas serve as an archetype of multiple users to assist us in designing the best user centered experience. With the focus on organizing and planning, we used our research to develop three user personas which differed based on serving the following:

• Varied planning needs (more and less structure)
• Ability to collaborate with friends
• Understanding of travel types

Becca is the planner and our primary persona. She enjoys having a place where she can collect her thoughts and findings in an organized manner and collaborate easily.

Kenny is the companion and secondary persona. He wants to avoid touristy places and wants to get input without planning everything.

Sharon is the context traveller and our additional secondary persona. She takes on many faces based on they type of travel she is taking whether it is a family trip or a foodie restaurant searching trip.

We created user stories to be able to understand how each persona would use Mystro.

After developing personas we moved to prioritize the features that will serve them. As with all design projects, there are constraints. Our constraint is largely time, which required the team to prioritize what we could deliver in the given timeframe. We used the MoSCoW method to break out our Must, Should, Could and Won’t. The reality is the “won’t” is more about this initial design iteration for Mystro and not that they are not valid solutions in the future. This will be described more fully in next steps. Below is what the team determined as the feature priorities.

From a romantic trip with a partner to a relaxing beach vacation to a cultural immersive trip in a foreign country, travelers spoke of the need to determine this to be able to make travel plans. Trips such as those for business or obligation (e.g. visit parents, friend’s wedding) were less planning focus.

After developing personas we moved to prioritize the features that will serve them. As with all design projects, there are constraints. Our constraint is largely time, which required the team to prioritize what we could deliver in the given timeframe. We used the MoSCoW method to break out our Must, Should, Could and Won’t. The reality is the “won’t” is more about this initial design iteration for Mystro and not that these are not valid solutions in the future. This will be described more fully in next steps. Below is what the team determined as the feature priorities.

Feature Prioritization

Based on our personas and affinity mapping we began to see consistent pains and pleasures in the travel planning process. In proposing a redesign we would look at both pains and pleasures to better determine how we would serve the user. Below are a list of identified pains and pleasures by users:

Pleasures

• applicable recommendations from friends
• local experience
• collaboration with others
• ability to find documents
• efficiency
• interest matches (e.g. travel with “foodies”)
• integration and seamless tech
• feeling of accomplishment
• tracking the places you have been
• memories with friends

Pains

• touristy things
• overplanning
• being unprepared
• bad recommendations
• lack of flexibility
• understanding local schedules
• environmental/health
• airline and hotel points and miles

Battling Self-inflicted scope creep

After reviewing the data we developed our MVP (minimum viable product) based on our user researched. We used the MoSCoW method to better hone in on under the time constraints we can accomplish. We thought back to Mike Monteiro’s Design is a Job where he talks about the need for designers to protect themselves against clients who try to add on work beyond the scope or “scope creep”. Here it wasn’t our client, he actually was trying to pull back on some of the work we proposed, but we continued to want to push the envelope of what we can do. With such a nascent project in Mystro, there was so much we could do — given no time constraints. I had to direct the team back to our project plan brief so we can focus in on what we could accomplish in two and a half weeks. After identifying feature priorities we moved into sketching.

Sketching, Ideation & User flows

We used the design charrette approach to draw out various screens. Because we were essentially starting from scratch, we needed to decide if we wanted a formal on-boarding (e.g. tour) or all users to get right into the app. We decided on the latter so needed an extremely clean design.

We looked back at some of our best in class and decided took take from Evernote for the list function, City Maps with some of its map views and Pinterest and Panda for some of the photo layout. While taking on some of these sites, we still minimized the UI keeping the focus to Mystro being a lightweight organizing, planning, and collaborating tool.

Each person on the team had very different views during the design charrette but slowly we began coming to some consensus. We developed three different flows and drew up some low-med fidelity wireframes and started testing.

Usability Testing & Iterative Design

Our design process is to iterate, design,and test. After designing prototypes we tested both paper and digital prototypes. Based on the userflows we had three different flows to test. We conducted over 30 usability tests and made 5 iterations.

For Kenny’s flow, we initially wanted to bring some animation and surprise and delight with a spinning globe and ode to Google’s “I’m feeling lucky” button. We realized through testing that users would not take this approach to search for a vacation.

We wanted Sharon to be able to share restaurant recommendations and initially had a drawn out 6 step process until one tester said:

Why would I go through all these steps to send a recommendation?

She was right. We needed to make it simpler so we made it two clicks.

We found in early iterations much of the layout was unclear so we made a number of changes including clearer icons, clearer definitions (no longer my notes but my trips), and hierarchy in the content.

The final prototype can be viewed here. As with any design and particularly one in such an early stage there are a number of next steps.

Next steps

Our end goal was to design a research-based prototype that allows users to organize a trip and gather recommendations from friends. With considerable management and defined deliverables, we were able to accomplish this. Because of the early stage of the Mystro start-up there were a number of next steps.

Short term

Short term next steps are primarily continued testing of the design. Additionally, our team recommends looking closer at the market position and overall feasibility of Mystro. With the competition and various options available (e.g. the 73 different tools users called out in our research) Mystro needs a defined USP (unique selling proposition).

Long term

For the long term, Mystro would need to be responsive (particularly on mobile) and the potential of booking travel through Mystro. We also recommend looking into auto population of itineraries by email and a messaging platform.

Lessons Learned

Project Brief focus and Scope-Creep

As noted early, because of the early stage in Mystro’s development there was a natural tendency to take on more work as designers. As the project manager, I had to bring the team back to the brief and remind them about our time constraints.