Travello is a web app that takes the frustration out of map-based collaboration.
The goal is simple, to make planning easy.
As the interaction designer of this project, my focus was tackling the problems that trip planners face - coordinating with many people across different devices.
The Research behind Travello
Mapping out the Competitive Landscape
I began the project by mapping out the travel competitive landscape. Conspicuously missing from the resulting diagram was an app for group travelers in the planning stage, of which had a very unique set of needs, desires and frustrations.
This enabled niche validation for Travello.
A preliminary map of the competitive landscape.
Persona-building
I began the project with a literature review on group travelling, conducted interviews to confirm insights, and distilled the research into user stories.
I used Excel to break down interview results into user stories, which I later colour-coded based on goals and motivations.
With a second round of interviews to hone in on our target audience, the persona of Sarah, a millenial globetrotter with a yearning for authentic travel experiences and a high-level need for planning, emerged.
I created this comprehensive persona infographic - covering personality traits, most-used apps, motivations and frustrations, a moodboard and even a short writeup about our persona, Sarah.
The Experience Map
Using Sarah as a guide, I was able to create an experience map that plotted out how our target audience planned for their travels. This came complete with real frustrations, motivations and goals from our data.
In turn, the experience map allowed the team to efficiently create a navigation flow. Following this process, we were able to make sure that every single component of the web app was relevant to solving the problems of our target audience.
The Navigation Flow
The experience map led me to creating a navigation flow that was tight and highly focused on real needs and desires of users. No feature creep.
The Product
Sharing a map helps travel planners work together. With Travello, planners are able to see where on a map other group members are looking.
Travello enables collaboration between trip planners. The coloured circles represent where users are currently looking at, both on the map and on the time-ordered list component at the sidebar.
Users are able to see one another on the mini map, search for spots to add to their trip itinerary, and also edit descriptions together.
Planners create shared itineraries comprised of saved spots, and are able to edit spot descriptions.
Travello also has a browser extension for Chrome, allowing users to save spots directly from the web into their trips. And with the auto-fill function, it only gets easier.
The extension allows users to save a spot directly from a website into their trip. Users can save information in four ways - through the auto-fill function, through a pop-up when highlighting text or selecting a photo, by dragging and dropping, or simply typing it out.
The flow when users add information into the extension, this flow taught me about designing for errors.
Considerations
One of the biggest issues designing for this flow was designing for the errors. If an ambiguous address, especially one in a non-English language was entered, how might we present the different options in a way that the user could make meaningful choices?
After multiple rounds of user testing, the answer came in the form of having an automatic dropdown menu appearing with a descriptive error message, followed by a confirmatory map preview screen. For user testing, I created high-fidelity interactive prototypes using AxureRP.
Takeaways
Working on Travello for five months in an academic setting taught me how valuable a thorough process was. Whilst the countless rounds of user testing and iterations could at times be daunting, it enabled us to fail fast- to build a better product faster.
My experience at CUTE Center instilled in me a love of research, a tireless attitude for user testing, and the idea that to solve problems, you iterate, iterate, and iterate. Many thanks to my supervisor, Dr. Kelvin Cheng, for his patience, guidance and support.