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 firstname.lastname@example.org 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.
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.
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.
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:
Took a desktop-only product and made it completely responsive, working on tablets and phones of all sizes.
Optimized JS and CSS
By simplifying our code and trimming our LESS and Velocity templates, I reduced loadtime and improved code maintainability.
Improvements to Maps Library
After fixing some tricky asynchronous loading bugs, I added dynamic resizing functionality and some helper functions to the Maps library.
pushState based Navigation
Focusing on speed for the new Trips, I implemented pushState based navigation across all browsers.
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.