Some data from the research, analysis, development or tests may be omitted due to NDA with Client Company. For additional details or discussion, feel free to contact me here.
The purpose of the research was to gain actionable insight and learn lessons relevant for solving the problems presented. I am neither proving nor disproving the existence of these problems or the correct solutions, as the proof would require thorough, strict, scientific method and possibility to replicate the test outcome in controlled environment.
Although, solutions to specific problems are founded in data gained from research or tests, they are still subjective and based on my critical thinking, creativity and experience. It is possible that there are numerous solutions, many of which could be potentially more successful in particular product and for particular users.

About TravelCollab

TravelCollab is workflow and analytics application dedicated to travel agents. It helps agents streamline their workflow by organizing, tracking and filtering travel arrangements, customer details and potential leads, receive notifications of upcoming trips and payments, generate invoices and other forms. Users from the same agency have access to unified database of clients, arrangements and leads that can be filtered by name, location, date, payments or organizer. Users also have available advanced analytics, presented in the form of custom graphs and charts. By using TravelCollab, agency management can keep track of productivity of each agent, gather insight on customer acquisition channels or analyze just a specific step of business process.

The goal

TravelCollab team identified market gap and started working on app that could replace current methods used by agents. Based on user needs they defined most important functions of the app as creating, overview, management and filtering of travel arrangements, leads and invoices. Our goal was to simplify UI, prioritize arrangement functions as the most important, but make other functions easily accessible. Employees of the same agency can collaborate, delegate work or review different steps of business process. To quantify experience in the early stage we used Single Ease Question followed by Gap Analysis and System Usability Scale.

My role

As part of TravelCollab team, my responsibilities were mostly related to generating ideas, developing concepts, creating interactions, wireframes, mockups, and organizing UX lab. I was also responsible for front-end development, wrote most of the code in HTML/CSS/JS and collaborated with back-end developers on implementation of my code. When I joined the team, they already had created use cases, user flows and defined app requirements, so we just analyzed them and made minor adjustments. The final products of my work were functional front-end and case study files.

The research

The team already performed initial quantitative user research, organized interviews and visited travel fair where they spoke with agents. Their insight in business process and travel agents’ workflow helped me minimize research time. We had enough data to create personas, mockups and start development, but there were concerning patterns in behavior of our users that I have seen before in other projects. Users were both male and female, most of them 35-45 years old, non-proficient computer users, they had agency websites maintained by third parties and they were not risk takers. Their workflow was based on pen and paper or Excel sheet and they were very defensive about it, but willing to try apps for travel agencies. In order to discover hidden and implied aspects of their work, and identify mental model that could lead them to move from “little black book” to more technically advanced solution, I organized contextual inquiry and longitudinal research. Team already had a solid base of potential participants. We selected three users to participate in contextual inquiry, each session took several hours. They received discount and early access to the app as appreciation for helping us.

Agents spent most of their time talking to customers in person or via phone, helping them choose vacation, going through travel details and contacting travel organizers to confirm availability or get additional details. During conversation, agent takes notes and after sale customer fills in the form with details such as name, address, passport number, info about other passengers and similar. Finally, agent arranges everything in a folder and later adds payment and other details. Keeping track of payments is complicated, because most customers pay on instalment and agent also needs to forward money to organizer. Every agent has personal system to keep track of payments and upcoming travels. Obviously, this workflow had flaws, and it was even more complicated if there were several people in agency and they had to collaborate, share notes, customer details and other important info. It was especially difficult to share leads, because agents usually just scribbled few cryptic words on post-it note.
After data analysis, I concluded we could treat leads as arrangement drafts and simplify information architecture by displaying them on the same page under different tab in table. Agents can track leads by filling in customer details and requests just like arrangement, but instead of publishing arrangement, they would just save draft. These drafts can be filtered by date of inquiry, destination, price and source. After sale, they can change status from draft to active arrangement. Only concern was related to taxonomy, as we were unsure whether to title this option drafts, inquiries or leads. We agreed that we should test different titles later in user testing.

tc dashboard

To delight our users, we decided to display statistical data in the form of graphs and charts. Basic analytics was part of the app, so we created priority matrix and chose most important values to display visually. We reviewed various analytics apps for ideas how to display data on graphs.

priority matrix

Before I moved on to creating deliverables, I performed short competitive audit and analyzed several apps for travel agencies. Their problem was evident, by cramming all functions in an over complicated UI, without any visual hierarchy or respect of cognitive psychology, they overwhelmed the user and created poor experience. User flow was also confusing and could be simplified by reorganizing information architecture.
Finally, I had detailed insight on user needs and app goals. Organizing and performing contextual inquiry and data analysis took about a week.

Deliverables

To keep most important aspects of user attitude and behavior in focus, I created three personas based on data from quantitative research and contextual inquiry. I tried to account for every characteristic that might help the team develop empathy and any detail that might make persona more realistic. I underlined that personas are just a shortcut to help us better understand user needs. Their benefit is not debatable and they’re based on real data, but they’re still assumptions and should be treated as guidelines or reminders about user.

Design persona for TravelCollab

Based on information architecture and user flows I started working on UI and created sketches with pen and paper. Pen and paper allowed me to move very fast and create many variations. I also made storyboards for more complex interactions, like verifying account and connecting agent with agency or adding payment directly from dashboard. The main Dashboard page was very simple, it had button for creating new arrangements, interactive table containing arrangements in the default tab, leads/drafts behind second tab, search and filtering options. On the other side, new arrangement form was very complex with many fields, possibility to add even more fields for additional passengers, add payments and details regarding destination. I couldn’t divide form into several steps or take out any fields, all I could do was respect cognitive psychology and try to enable easy scanning of the page.

form

See the Pen Form by Novi Milenkovic (@novixyz) on CodePen.0

When I was satisfied with sketches, I moved them into Balsamiq and created interactive wireframes. I presented wireframes to the team, we had a mini brainstorming session and made minor change, like using modals when reviewing invoices instead of opening a new page.
Now it was time to create UI patterns and mockups in Adobe Illustrator. Since I was also developing front-end, I only made very basic low-fidelity mockups to try out different color pallets and table appearance. After mockups, I immediately started writing HTML/CSS/JS code using Atom. The code was based of my prototyping framework, I just changed layout and classes for tables and forms. Since app was for desktop use only, design was fluid and adaptive, and minimum width was 800px.

graphs

It took me a week to finish front-end, than I forwarded my code to back-end developers and stayed in contact with them during further development. Creating personas, sketches, wireframes and low-fidelity mockups also took me a week to finish.

Testing

In order to track qualitative, behavioral data, agent productivity and daily activity through extended period, we organized longitudinal research with two users. Users had to complete short survey every two weeks describing possible downsides of the app. Data from longitudinal research is available to TravelCollab.
To test the usability of our product I organized UX lab at the TravelCollab office. We set up laptop with webcam, Camtasia and Skype in one room, and invited 4 users who received gift card, promo material (calendar, notepad, pen and mouse pad) and free account for the app as incentive for helping us. Each session lasted between 30-45 minutes. Test was scripted and moderated, I was with users explaining scenarios, probing for additional insight and trying to uncover qualitative data related to interactions, rest of the team was in another room, observing via Skype feed on one screen, following and recording what user was doing on the second screen. User body language was showing they were not nervous, annoyed or shy, so we could count on good quality of answers. The success metrics for this test were Task Completion Rate, Task Completion Time, errors per task and custom survey I prepared, similar to System Usability Scale. Survey helped me quantify experience of specific interactions and overall experience. Task Completion Rate was high, number of errors was acceptable, and task completion time was uniformed between users. More importantly, test confirmed that we did well by prioritizing arrangements as the most important function and display invoice functions on separate page. We invited participants of UX lab 3 days in advance, day before test we confirmed appointments, and test was performed during one day.

To define taxonomy, team created online survey and shared it to the closed Facebook group of travel agents, which has around 500 active users. Their answers helped us name several options.

Conclusion

Travel agents niche is limited and specific. I believe that we managed to discover the most important aspects of their workflow and present very usable app that can help them streamline business process. User base is not measured in millions, but it’s strong. With popular talk about startup unicorns, people often neglect that it’s fine to have 1000 reliable customers every month and minimal churn rate. Regarding future growth, I see a realistic possibility to integrate additional options related to insurance or ticket sales in TravelCollab, or even analyze other business models that rely on leads and repeated customers, like gyms or beauty salons, and create GymCollab with minimal adjustments…

Did you like this article?

Please subscribe if you wish to receive new post updates once in a blue moon

or share with your friends