Designing for Scale and Simplicity in an Evolving Online Travel Agency
Travana, 2016
Intro
A Traditional OTA With A Twist.
Janbala, the primary product of Travana, Inc. was an online travel agency aimed at millennial travelers, with a philanthropic element. The company had a one-year life span as it struggled to define its goals and find its niche.
When I joined the design team in 2016, the foundation of the site had been previously created by an external design agency. We began adding new functionality, and it became evident that some pages would need to undergo a redesign in order to scale. The design team worked in parallel with marketing to identify and reinforce our brand through this effort.
User Personas
Understanding our Users
I created these user personas to encourage our team to empathize with different target users, and to be a point of reference for preventing self-referential design thinking. These personas were designed to reflect the different types of users found in the research on our target market. The following personas are based off of market research, brand manifesto, and our internal research.
Young family
Friends reunion
Extended backpacker
Couple vacationing
Home visitor
Business traveler
Prioritizing Problem Statements
Based on the personas, we identified key problem statements to potentially address. The following matrix is used to surface common themes across personas and prioritize problem statements.
Through this exercise, we realized certain customer personas who had common needs. By focusing on the needs of these users over the home visiter and the business traveler, we would create a more widely used product within our target market.
Living Styleguide
Reduce, Reuse, Recycle
Designing the style guide was one of my favorite parts of the project, and was frequently updated as we added new pages and functionality to the site. Our team moved towards consistency by creating reusable elements and defining detailed guidelines. Over the course of this project, I greatly improved in systems thinking, and to set rules for consistency based on logic.
Our full style guide can be viewed here
Additionally, we kept a Sketch pattern library, where elements could be dragged and dropped into new mockups. As new modules, form styles, and other patterns were implemented, they were added to this pattern library.
Flight Cards
I piloted the effort to redesign the flight search results, beginning with flight cards. I delegated tasks, provided and solicited design reviews, and tested to insure our product emphasized an easy-to-use flight search.
Challenge
Scannability and Scalability
The flight cards and flight search results pages needed to be redesigned in order to accommodate new elements being introduced, as well as innovate on the way we deliver flight information to customers who are ready to purchase. Through user testing, we discovered that it was difficult to skim our search results to find the most relevant flight.
I added a number of elements to the flight card, including urgency messaging, fare-lock, chance of fare increasing, and flight amenities. After several attempts to squish this information into our current designs, it became clear that they were not scalable.
Here are several iterations that were tested and rejected before I arrived at our most up-to-date flight card. Our team initiated a speed test, asking users to quickly find information across different types of flight cards. We knew we had reached a stopping point when our users were quickly able to skim the results page and find all relevant information.
In the final version, I opted for the timeline view, as users were most easily able to identify number and length of stops. I removed pop up tooltips because they did not translate well to mobile.
The shift to an orange call to action came from a separate effort to increase our site contrast, improving accessibility for the colorblind.
Flight Search Results
Integrating Panels for Site-wide Consistency
The asks from stakeholders for features increased, and the scope creeped from flight cards to the results page itself. We believed it would be beneficial to show alternate dates, or days before or after your search day which may have better ticket pricing. We were also asked to display more urgency messaging about the likelihood that the route fare will increase. Further, we believed it would improve the user experience to include a route map and seat map.
We designed a responsive panel system, which had been implemented in other flows. I felt that implementing that pattern here would aid us in creating a scalable flight search results page, and provide us with space to prioritize features most demanded by users, such as search filters. Our second priority would be championing the best price to save our users money.
We sorted and grouped tools and messaging with other relevant information. The primary left-hand panel showed search filters, ordered by most used. The supplementary left panel was tools and tips that could reduce the cost of the ticket. The right hand panel was flight details, or information relevant to the specific itinerary selected.
Learnings
Creating Site-Wide Consistency
Making decisions on font sizes and weights, margins, and color of cards had implication for future cards on the site. I needed to take this into consideration when designing the flight search results. We were defining our brand and site style with every design decision.
Champion the User, Build Features Based on Needs
I believe an early stage startup should focus on building a great product that users love, before pushing for sales. We failed in developing a process that would assess a new feature or function before we added it to the search results page. This resulted in a page with more complexity than need be. If I were to make a change to our approach, I would have encouraged more user testing and market research before the design phase.