Introduction

momondo is a travel meta search website and app that finds and compares the best offers on flights, hotels car rentals and package holidays.

I've been at momondo for over 2 years and our product has undergone huge changes over this period. I joined at an exciting time where we were looking to take our old product 'Legacy' and create something special with 'Reboot' fig.1. Reboot was not just a facelift for the site but the chance to challenge everything that had been done in the past. With a new backend implimentation I would be able to optimise every element of the site through more accurate tracking and testing.

My key responsibilites have been the creation and upkeep of the momondo brand and design principles, product allignment across all platforms, and the optimisation of users flows to both increase user satisfaction and revenue.

fig.1 momondo Reboot front door

Feature optimisation

An ongoing project of mine has been developing and nurturing the flight result tickets. the tickets are crucial in the users decision making process, and often the last step before users redirect to the suppliers sites. Here I had to make sure I delivered all relevant information without distracting the user from their primary goal of purchasing the best ticket for themselves.

Initially I took the existing Legacy ticket and implimented our reboot design principles fig.3. I made adjustements to the ticket in terms of heirachy and spacing based on design workshops with my UX designer.

fig.2 Iteration of momondo Legacy flight ticket

fig.3 Reboot flight ticket 1:1

We found the new ticket performed well againt our competitiors and wanted to continue optimishing it. We formulated a hypothesis that if we could display more tickets in the view part at any given time, users would find it easier to compare tickets, and therefor have more trust in the decsion making process. I created a slimmer ticket fig.4 , without compromising on information, to test this theory. The results were great and as revenue was on a CPA basis, we found we were gaining more qualified clicks (users redirecting to suppliers and also purchasing the ticket).

fig.4 My optimised flight ticket for CPA

During the aquasition of momondo at the start of the year, our business model adapted towards CPC revenue on a market specific basis. This meant an adapted version of the ticket was required. To drive CPC I remverd all additional call to actions from the tick fig.5 and focused on providing the crucial information in an easily digestible way. This reduced the cognative load and helped users down the product funnel. This has proved to be very succesful on the .com and .co.uk markets.

fig.5 My optimised flight ticket for CPC

Interactive Prototypes

This is one of the most powerful weapons in a product designers arsenal. Prototyping is not just about creating fancy transitions, but allows you as a designer to visualise the interactivity of a product. You are able to draw the user to specific parts of the page using animations in a way that static visuals cannot fig.6. I have been able to utilise my skills in this to help in many different aspects of my role.

fig.6Interactive prototype for new insights concept

Communication - Wether I am talking with developers about the implementation of designs or talking to stakeholders about new concepts, interactive prototypes speak a thousand words. Not everyone has the same imagination and vision so, by creating such prototypes, I have been able to put ideas across in a concise manner.

User testing - Interactive prototypes have proven crucial in user testing our product. We no longer need to use up development resources to test features that may not perform. By creating interactive prototypes, we have been able to put fully functioning products into the hands of our users.

Price calendar

From my first day at momondo I was told of this legendary product feature. "Sam, feel free to design and innovate without limitations, but whatever you do, don't touch the Price Calendar!'. It didn't take me long realise this was the large graph that took center stage on the flight results page fig.7 . It's purpose is to display estimate flight prices on days around the users searched dates. This enables users to find the cheapest days to fly or adds reasurance that the dates they have selected are well priced. The intention is great, but users struggled to understand what it was and how it could help them.

fig.7 Legacy Price Calendar

This begged the question; why was this untouchable? It turned out that the graph was iconic. Even if users were confused by it, it was what made momondo memorable. Many times during querrilla testing, I would ask if people had heard of momondo and people would reply with, "Yes, you're the ones with the bars" or something along those lines.

I realised how crucial this feature was and wanted to make it not just an untouchable brand element, but a tool that enabled users to get the best results for them. I started by adding a title to the two graphs. It seems fairly simple but it was a key pain point in the process of understanding this is two graphs and not one. I then removed the vertical price axis from the middle of the two graphs as I believed them to serve little purpose. The real value of the graph is it's scanability and affordance for users to quickly compare the data. By introducing hover states on the bars, we were able to provide the users with data in a much more efficient way fig.8.

fig.8 My Reboot Price Calendar

I created working prototypes to illustrate how the graphs would load in to the page, what would happen based on user interactions, what would happen when data wasn't available etc... This was also the first time the Price Calendar was introduced on mobile web fig.9 and it is a great feature for such a platform. The graphs lend themselves perfectly to interections on touch devices with the ability to scroll through dates much easier than on desktop. This has been a great ongoing feature to work on and involved constant interection with developers for us to get the perfect results.

fig.9 My mobile Price Calendar

Cross-platform alignment

This is one of the trickiest yet most rewarding aspects of product design at momondo. How can we respect native design and interaction patterns whilst aligning designs across platforms? Here is an example of the same page across the 3 mobile verticals. All 3 were very misaligned to begin with but despite the different navigation patterns, I was able to acheive a consistent look and feel. fig.10.

A specific example of differences here would be the omission of both the return navigation and the share function in the mobile web design. This can be explained through examinination of user behaviour inside mobile browsers. Users are familiar with using native browser based navigations through repetative learnt behaviour on desktop, tablet and mobile. Likewise, users will commonly copy and share the URL from the browser, or use the native share functions from inside the browser, therefore, the additional feature is not required in the designs.

fig.10 My Reboot Price Calendar