Redesigning mobile web at Hotwire


Bringing Hotwire's Car and Hotel products up to date 

Shridhar Reddy

Role: UX Strategy, Visual design

Back story

Mobile Web is a battleground

The original mobile web design for Car rentals.
Main problems were legibility and info cohesion. 

Hotwire’s mWeb product for Car and Hotel accounted for 15% of revenue - while the iOS and Android platforms netted a modest 8% and 7% each in spite of sizeable teams behind them.

For being the bread winners, the Mobile Web products for Car and Hotel were sorely outdated.

Why so?
The big debate within Hotwire's product team was whether to optimize our way forward with small, iterative tests, or leap big with expensive, innovative ideas. 

Optimization had won out. Small, rapid deployments gave us copious learnings at low risk, but at the expense of big, blue-skies innovation. Our mobile web app reflected this - optimal from a revenue perspective, but terribly dated as an experience. 

“Love the deals I get through Hotwire on my phone, but don’t feel confident about the mobile site. Looks like it is from the 1990s.” 

Comment from a Hotwire customer.

Comments like these had me chafing for a chance to redesign
the mobile site. 

A fresh perspective

Into these doldrums, a new product manager - Pauline Marol breezed in. Pauline’s an expert in optimization using Optimizely – a service for web apps that rapidly iterates through dozens of A/B tests simultaneously. 
And Pauline was also laser focused on the overall user experience. In a single decisive meeting, she decided it was worth the time and risk - “let’s make it work well and look good.”

Pauline Marol
Product Manager - Web Optimization

Reality check

This was to be the first big redesign for the mobile web product in years. Pauline and I drew up the goals and limitations of this redesign.


  • Thoroughly update the UX to industry standards. Align firmly with the rest of the brand. 


  • No net new functionality or new user flows.
  • Re-design page by page. No simultaneous sweep through.
  • If we experience more than a 2% drop after an A-B test, we’d have to roll back.
  • Show at least the same number of results in each screen. 

Benchmarking & analysis

I started with an informal heuristic analysis of the existing product and benchmarked against the competition. This is one of my favorite parts of the design process.

Screen-by-screen analysis of experience and legibility problems

Benchmarking the usual suspects – CarRentals, Orbitz, Priceline, Hipmunk.

Design Choices

Design principles

    Eliminate & Amplify

    Eliminate noise for maximum legibility  – unhelpful information, legalese, gradient backgrounds, drop-shadows, decoration. 

    Amplify the most important information – price per day, total price, car type / hotel, category. Use icons to clarify and separate content.


    The Card format

    When Windows 7 started to pioneer the use of stark typography as the primary UI element, I took note. And this blog post by Intercom urged the use of cards as a content design format, it sealed the deal. In late 2013, I proposed that our Hotwire site embrace Cards as the underlying structure for all our products. Some of my early explorations are below.

    Some of my proposals of card-based content circa mid 2013.

    Early sketches  exploring hierarchy and layout of  critical information. 

    Wireframes based on above sketches helped me see through the design. 
    The early designs exhibited a generous amount of white space. However the added height limited the number of results displayed on screen. 

    This was my favorite. But alas, informal testing proved this card was too tall. We would show fewer results.
    Ultimately, decided to go with this card. It displayed the same amount of info as the favorite, but had a smaller footprint.

    First pass

    The final proposal used the card format with lots of negative space and some of the principles borrowed from flat/minimalist design to allow maximum legibility and eye relief. Generous amounts of padding and margins allowed me to keep away from drawing dividing lines between information.

    Iterations were always checked on handset using InVision for evaluation by team 


    Before and After

    Check point


    The design was met warmly by Jessica Schnepf - our UX Design director.

    Jessica Schnepf
    Director - UX
    "This is a huge improvement over the current design - on every front - legibility and layout. However, I feel that we can nudge this design even further and take it closer to our iOS product. Try aligning with the brand more closely."

    In response, Pauline and I insisted that we should not slavishly follow iOS and Android styles and instead, we should give mWeb it's own look-and-feel. However, the decision by Jessica outweighed ours, and I went back to re-align. The end result actually looked even better.

    Final Designs

    Final Direction

    Not featured here: tons of tweaking after feedback from cube-mates, manager, product owners. All using InVision as a collaborative platform. 


    Results and learnings

    In November 2014, the mWeb designs started to roll out in a slew of A/B tests via Optimizely platform. It would be a several weeks of nervous waiting for paying customers to decide our fate. 

    The results slowly rolled in by late 2014, and they were positive. It was not a massive boost as I secretly hoped, but enough for customers and industry to take notice.

    For her stellar work in shepherding this complex rollout, Pauline was recognized by Optimizely in their annual award for outstanding improvements to a product.

    For me, this comment from a customer was sufficient validation.

    Love the new clean uncluttered look for car reservations on mobile!

    Comment from a Hotwire customer.

    In the debate about Innovate vs Optimize, this effort was a resounding win for Innovation. As a UX team, we proved that taking big leaps was not risky if based on solid UX principles.

    Next case study
    Hot spots and hotels