TripIt Brand Redesign
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.
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.
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.
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.
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.
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.