TripAdvisor Mobile Redesign • January 2017
After the first two phases of TripAdvisor's mobile overhaul, we were ready to tie everything together with a new design language and style guide.
This guide would include everything from visual styles (colors, fonts, card styles), to interactive elements (tap zones, animations, loading states). There had literally never been a comprehensive design update in the five-year history of the TripAdvisor apps, so this was a rare and exciting opportunity to wipe our slate clean.
For even more detail on this phase of the redesign, check out this link: https://goo.gl/bR9Lh6
We had to start off with the very basics. What was our official TripAdvisor green? (We had one already, but it desperately needed a facelift.) What color should the background be, gray or white? What font weights should we use? Our live app was flooded with inconsistencies—too many to document, let alone fix. We needed to start fresh.
The product designers discussed these options as a group over the course of several weeks. This redesign would affect not just the Mobile Experience team, but everyone designing features for mobile. We wanted to ensure that all stakeholders helped make these important decisions.
After we had established visual guidelines with the broader design team, we started outlining a system of cards and flexible UI components to be used on the Discovery screen. We wanted to strike the right balance between utility and variety so that travelers would be able to skim through a screen full of cards, be able to identify different groups of information, yet not have their eyes glaze over.
We started by categorizing content types so that the cards would reflect the information they displayed. This was a challenge because of the variety of content on TripAdvisor: 6.8 million accommodations, restaurants, and attractions alone, plus flights, travel guides, city neighborhoods, forums, and more. We narrowed all of that down to three types: 1) Listings; 2) Editorial content; and 3) Categories.
From there, we explored a number of possible card styles. Our original goal was to narrow down everything to three styles, but we realized after a while that three would be unnecessarily limiting. We settled on a much broader system that included 1-2 options for each of the category types:
Listings • Carousel
Editorial content • Mini List, Wide Carousel
Categories • Mini Carousel, 2x2 Grid