KAYAK

Front-end Engineering, Product Design · Summer 2014

As a design engineering intern at KAYAK, I redesigned and built My Trips, a trip planning tool used by thousands of users. Working with both the UI engineering and design teams, I worked in HTML, CSS (with Less), JavaScript, Java, and Photoshop.

Introduction

My Trips is a travel planning tool that consolidates plans from multiple websites into one web itinerary. Users can simply forward their booking receipts to trips@kayak.com for them to be automatically added to their trip.

While useful by itself on the web, a key part of the trip experience also included the mobile app. Travel alerts, calendar synchronization, and sharing features brought the entire flow together.

Problem

How do we reimagine and re-architect My Trips to improve the user experience?

My Trips was originally launched as KAYAK Trips in late 2009. Since then, despite incredible user loyalty, the feature had seen slow and scarce development.

In addition, over 40,000 new users would visit the Trips page every day, but wouldn’t convert since the product didn’t pitch its value well enough.

Finally, as the sole developer on the product, I inherited a poorly structured and messy codebase with a whole range of extra styles and scripts affecting load time and engineering complexity.

Solutions · Design

I started by updating the Trips home page. Introducing a simplified navigation and new visual style helped me set the tone for the rest of the project.

Next, in tackling the event details page, I worked on a bunch of little features that improved the user experience.

Cleaner Visual Language

More whitespace and a stronger grid meant improved readability and consistency.

Action Bar

Instead of having to scroll to each day, the action bar allowed users immediate access to common functions.

Notes and Calendar

Reminiscing the natural planning process of notebooks and calendars, this was a fun addition.

Finally, I also began work on a landing page for the Trips product. Although it didn't make it into production, it represented some early thoughts for a page that should've existed a long time ago.

Solutions · Engineering

Primarily writing front-end code, I built all the features I designed, and helped trim down the codebase multifold. Some of the key changes include:

noun_78083_cc Created with Sketch.

Responsive Design

Took a desktop-only product and made it completely responsive, working on tablets and phones of all sizes.

noun_39374_cc Created with Sketch.

Optimized JS and CSS

By simplifying our code and trimming our LESS and Velocity templates, I reduced loadtime and improved code maintainability.

noun_29388_cc Created with Sketch.

Improvements to Maps Library

After fixing some tricky asynchronous loading bugs, I added dynamic resizing functionality and some helper functions to the Maps library.

noun_128776_cc Created with Sketch.

pushState based Navigation

Focusing on speed for the new Trips, I implemented pushState based navigation across all browsers.

Takeaways

I’m always extremely grateful to KAYAK for taking a bet with me. I’d just finished freshman year when I joined them, but was eager to learn more about front-end engineering and design to hit the ground running.

The summer was also my first introduction to accessibility and web standards, topics I care deeply about to this day.

Some of the invaluable engineering skills I learned: working on a massive codebase, version control with Git at scale, building apps with the MVC framework, working with web standards and browser compatibility, and most importantly, what it’s like to work at a company. The summer was also my first introduction to accessibility and web standards, topics I care deeply about to this day.

As a designer, it was the first time I was designing for others. All my projects in the past were personal projects, and working on Trips really got me thinking about product challenges from a user-centered perspective.