Redesigning mobile web at Hotwire
A CASE STUDY OF
Bringing Hotwire's Car and Hotel products up to date
Shridhar Reddy
Role: UX Strategy, Visual design
Role: UX Strategy, Visual design
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.”
Ouch!
Comments like these had me chafing for a chance to redesign
the mobile site.
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.”
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.
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.
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.
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.
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.
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
The design was met warmly by Jessica Schnepf - our UX Design director.
"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.
Not featured here: tons of tweaking after feedback from cube-mates, manager, product owners. All using InVision as a collaborative platform.
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!
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.
Main problems were legibility and info cohesion.