A collection of works throughout my years in SmarterTravel, a TripAdvisor Company
Role: Web Designer
Duration: 2 years
When: June 2016 - May 2018
Foreword
SmarterTravel, just like its parent company TripAdvisor, operates a portfolio of brands to provide expert advice for travelers all around the world. The in-house design team that I worked at creates design solutions for all the brands. The goal of our solutions is to both optimize travelers’ experience of using the sites and to generate marketing revenue that supports the operations of these brands.
A constant challenge that we faced as a team is the balance of business needs and the user’s need. For instance, how can we create an ad on the page that attracts user’s attention without hindering their use flow? Over the years, the team has come up with some brilliant ideas to overcome this challenge and tested them with our target audience. We are able to accumulate some valuable insights from the audience for each brand from this process.
An Example
Brand: OneTime
Goal: Onetime, one of the subsidiary brand of SmarterTravel, was aiming to collect more email subscriptions and travel information from the site’s visitors for future promotions and email campaigns.
01. Research Done in the Past
In the past, Onetime has implemented various subscription acquisition designs, mostly inspired by other competitors like Kayak, Expedia, etc. The brand has seen a stable increase in subscription rates on widgets run on third-party websites. However, the results from the native widgets run on the brand’s own website are not as satisfied. The focus and the target audience of this project are the brand’s site visitors.
One of the biggest attracting points of Onetime is its hotel deals, for the visitors land on the homepage from all sources, 92% of the traffic interacts with the search widget layering on the right of the hero image as their first action. The information they put in the fields will lead them to the search result page. Visitors often have a very specific searching goal, therefore, not much patience on filling the information in the pop-up windows and in the search widget (two of the major subscription unit placements in the past, multiple design solutions are tested in these two places).
OneTime Search User Flow
02. Design Reasoning
As mentioned above, the team cares a lot about user flow and wants to reach our marketing goals as seamless as possible. I explored use cases that almost all of the users would go through and looking for the opportunity to incorporate the subscription unit without hindering their user flow.
One feedback from the visitors is that depends on the number of search results the system generates, the result page may take a few seconds to load. I regard the loading screen as a perfect environment to utilize, as the audience’s attention is “captived” on the screen while waiting. It’s a great opportunity and timing to present a message or an action, and take the focus off any “slow load times”.
Design Pitch:
Use the loading time to convert a visitor into
a subscriber
To realize this idea with the consideration of a smooth user flow, it’s essential to have two states of the interstitial:
State 1: Search loading (with a clear message that the result page is loading in the background)
Loading...
State 2: Search completed (indicate that all the results are loaded in the background)
Completed!
03. Design Solutions
Two interaction ideas are implemented and launched for usability testings.
Design Solution A (Preloader)
The idea is to not give the user a sense of the length of the loading time so that the user can take time to input information in the form field.
State 1: Search Loading
State 2: Search Completed
State 1: Search Loading
State 2: Search Completed
Design Solution B (Progress bar)
An opposite approach compared to design solution A. By giving the user a progress bar, it might help to reduce the chance of user closing the pop-up window even before the search completed.
04. Post-Launch Testings
(A/B Testing)
The design team values a lot on the user testings both pre- and post-launching of a product. For almost all of the projects, designers would provide multiple versions for A/B testing. In this project, both of the design solutions above are developed and launched. Site traffic is divided equally and users’ interaction with the subscription unit is monitored.
While I can’t publicly share a lot of information, a general overview of the testing result is that design solution A was the winning recipe that gathered 60% more email subscriptions compared to design solution B (surprisingly!)
05. Reflection
Looking back, some external factors are in play that results in the preloader becoming the winning recipe. One reason might be the placement of the subunit in design solution B is at the bottom and the CTA button was not close to the center of the page. In addition to that, a vertical layout might not present all the information as effective as a horizontal layout. An important reflection for this testing is that the variables are not controlled to test only one element.
Briefly, Other Projects...
For all the other projects that I worked on at SmarterTravel, I have looked up to the same goal, design process and testing process. Some of the projects are more exploratory like the Onetime project above, others are more restrained, as certain branding guidance is required to be followed. Below I have included some other projects that I found interesting and briefly went over requirements provided by the product manager and visual solutions that launched for A/B testing.
Project 1: Mix Lander for BookingBuddy and Onetime
Overview
An idea to initiate a Mix Lander on Onetime and BookingBuddy. The Mix lander is a carbon copy of normal listings page with one exception, the product team wants to optimize the SmarterAds units on the page to be much more aggressive than on our normal listings to shift more clicks to comparison ads. The product team will redirect traffic that converts poorly downstream from normal listings to the mix lander to try to shift clicks.
Requirements
01
Desktop only
05
Must be able to lightly see the page underneath
02
Must be able to display up to 6 comparison ads (only have access to the brands' logo)
06
2-3 options for A/B testings
03
Should reference the geo or property that the user is coming in on to put those ads in context
04
Must be dismiss-able
Launched Design for A/B Testings
Design Solution A
Design Solution B (Winning Recipe)
Design Solution C
Project 2: Homepage Redesign for Onetime
Overview
Onetime product team would like to collect subscriptions on the home page. The product team is going to re-route a larger portion of traffic to hit the home page rather than going direct to listings in an attempt to increase downstream conversion. The main goal is to collect a large number of subscriptions.
Ask for this project is to create a version of the Onetime homepage that displays a boxy widget like the one running on BookingBuddy Step 1 Hotel. It can be styled to fit the Onetime page but needs to be in this input order and shape because this is where the product team saw the best sub rate.
Requirements
01
Mockup for all three devices (mobile, desktop, tablet)
02
2 iterations for A/B testings
Launched Design for A/B Testings
Design Solution A
Design Solution B (Currently running winning recipe)
Project 3: Subscription Acquisition Widget for SmarterTravel
Overview
The product team is trying to increase subscription acquisition of AirfareWatchdog brand through more conversational, content-driven placements for testing throughout the site. The widgets will be placed on SmarterTravel pages and are attempting to tease the user into signing up by piquing their interest.
Requirements
01
Deliverables for all three screens (desktop, tablet, and mobile)
02
Mandatory elements are: Email subscription box, Home airport box, subscribe box, close button, success message screen, AirfareWatchdog branded elements, close link
03
The target audience will benefit from travel deals and relevant travel news.
04
2-3 iterations for A/B testings
Launched Design for A/B Testings
Design Solution A: Inspiration Direction
Design Solution B: Editorial Direction (Winning Recipe)