Errr... What is this?

Sometimes known as a Hackathon, this was a company wide opportunity to put our brains together and come up with bold new solutions to a predefined problem. The focus of this SWAT week was people. The aim of each initiative was to encourage better collabaration and communication. It should help us to work together across departments, brands and offices. With multiple brands and offices spread around the entire world, how could we bring people a little closer together?

We formed a 'Super Team' of 5 consisting of a vast array of business knowledge and experience including App and Email Marketing, Public Relations, Regional Strategy and Growth and Optimisation. The fact that I had not previously had the pleasure of working with any of the team, meant our initial ideation meeting was hugely insightful. We came up with a number of different strong ideas and each went away to work a little more on these.

The Kayak Academy

During our first session we talked a lot about knowledge sharing. I wanted to create a product that could facilitate such sharing on a global level. This is where I came up with the idea for The Kayak Academy. Not only can people attend in person, but We can utilise video communications systems already in place throughout all offices. The aim would be to open up communications, increase learning, and gain invaluable information about the wider company and it's peers.

I went through my own quick idiation and exploration phase before refining my concept into an initial wireframe fig.1. I then presented 'The Kayak Academy' to the team for feedback and after great enthusiasm from them, we made the decision to proceed with it as our sole project.

fig.1Detailed wireframe of my proposal

I wanted the branding of the product to be focused around school, college, education etc.. but to be implemented, it still had to adhere to some of the design principle already in place at Kayak. I used specific terminology that reminded me of my time in school. The home page is titled 'Timetable', a place where I could see all my classes I had for the coming weeks. Similarly, using the page title of 'Staffroom' (sometimes known as a Teachers Lounge outside of the UK) as the page where users can set up the classes they want to teach.

fig.2The Kayak Academy homepage

Sign in

Sign in blah blah

fig.3Timetable homepage for signed in users

Afterhours

I began putting a lot of thought into how our employees would interact with this product, how they could get the most from it, and how we could ensure they would continue to use it. Contiuned usaegae is crucial and very much down to the quality of content in such a product.

Onboarding Integration

fig.3Afterhours timetable

Event cards

Onboarding Integration

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 against our competitors and wanted to continue optimising it. We formulated a hypothesis that if we could display more tickets in the viewport at any given time, users would find it easier to compare tickets, and therefor have more trust in the decision 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

Carlsberg Placeholder

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

fig.1 placeholder image description

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

Game Trade Placeholder

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

fig.1 placeholder image description

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

Feedmeonline Placeholder

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

fig.1 placeholder image description

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

Line Icon Set Placeholder

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

fig.1 placeholder image description

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

Action Prompt Placeholder

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

fig.1 placeholder image description

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

Letz Placeholder

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.

fig.1 placeholder image description

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. fig.1 This is some text. This is some text. This is some text. This is some text. This is some text.