tripitprev.png

TripIt

 

TripIt Brand Redesign

 
tripitprev.png

The Project

I started at TripIt back in 2016, stoked to finally be working within a group of talented designers after years of freelancing. Our team took on the task of a full brand refresh and redesigning the TripIt.com experience.

TripIt is a travel app that organizes complex trip plans into a simple interface, with flight alerts and other features like neighborhood safety indicators and airport maps. The problem at hand was the limited ability to update the site to reflect those actual useful features, and lack of visual consistency between product and marketing. The use of stock photography, screenshots straight from the app, and complex navigation structure unfortunately made it look like the product was still living back in 2013 along with the website. I was excited to be a part of the process to better represent the product and people behind it.

The TripIt landing page prior to redesign,  (2013 - 2018)

The TripIt landing page prior to redesign, (2013 - 2018)

Values

The design team (Chris Pizzo, Paul Skittone, and myself) aligned with the greater brand and marketing teams on our values. What did we want to communicate here? What didn’t we want to communicate?

Our old site was a screen in a phone, with some lovely scenery in the background. It was okay, but it didn’t translate our goals of reducing travel pain. I mean, even being in an airport is stressful enough. What could we do to make that experience feel less terrible? Our north star was to create something that better reflected TripIt’s love for making the journey less painful, and less of the shiny destination at the end of it all (yep, the stock photography had to go).

TripIt is owned by Concur, one of the largest B2B travel and expense orgs, so business travelers needed to be top of mind. Our team carved out a core principle: business travelers are the same people that play video games, watch silly television shows, and laugh at dumb jokes. Business tools don’t have to be visual metaphors for a man in a suit with a briefcase.

We kicked off the exploration phase by assessing the products that we loved using, regardless of any affiliation with the travel industry. Figuring out what made them such great experiences, and aligning on whether they fit our north star was a helpful tool when it came down to leadership approval. We knew we wanted to explore the illustrated aspect of the brand, and referencing other successful enterprise tools with fun, whimsical visuals helped us break down the door for our own.

Illustration Style

Starting with the styling created by Adrien Kulig for an animated TripIt ad in 2017, we decided to combine the previous TripIt illustration work of Kat Angeles and ran with it. We standardized a color palette and a set of flat principles centered around four character designs that reflected a mix of our userbase and our office. We went with more realistic scenes one could experience while traveling.

Sam, Jill, Jack, and Hannah

Sam, Jill, Jack, and Hannah

icons.png

We created three main views to illustrate different levels of TripIt’s needs: the zoomed out travel lines (focused on plan organization), the full trip view (to show the planned trip on the ground in motion), and closer, full color scenes with our characters (using the product on their travels). Paul also created a set of feature icons, which were later adopted into the product.

Organizational travel lines, trip plan view, and full color travel scene

Organizational travel lines, trip plan view, and full color travel scene

Accessibility

Staring us dead in the face was our old branding’s lack of basic user accessibility. With the help of our a11y expert, Steve Kurzman, we restructured our navigation, cut down on large blocks of text, and prioritized contrast and clarity. The Pro vs. Free chart went from a complex matrix with info hidden in collapsable buttons, into a simple two-column chart.

(left) the old Pro v. Free matrix compared to (right) the redesigned two column chart.

(left) the old Pro v. Free matrix compared to (right) the redesigned two column chart.

Old navigation had low contrast links and buttons, and “Help Me Choose” wasn’t a clear navigation item.

Old navigation had low contrast links and buttons, and “Help Me Choose” wasn’t a clear navigation item.

Redesigned navigation is easy to tab through on a screenreader, high contrast items and clear verbiage.

Redesigned navigation is easy to tab through on a screenreader, high contrast items and clear verbiage.

Concept and Execution

Despite enterprise-heavy business travel expectations, the TripIt brand is friendly and approachable. Highlighting pain reduction rather than the nitty gritty of features, we nixed app screenshots in favor of illustrated product representations (this is way more sustainable when there are frequent app changes and updates). Below is an example of how we communicate ease of use with simple, playful visual elements into the travel journey. Basically, there’s less of where you’re going, and more of how you’re getting there. Plus, it’s accessible to all!

Check out the full redesigned site here.

tripitpr.png
 

♥ Special thanks to those not mentioned above, Kat Angeles for her UX expertise, Jess Skelton for her wrangling the technical aspects, and Fiona Ashley and Amy Jackson for their leadership.