Not too long after shipping the Local experience on mobile app, we shifted our focus on web. The main objective was to enable purchases of the experiences on the web which included mobile web as well.
Typeface: System Defaults, The Sans
Before getting into the design or even wireframes, it seemed like a good idea to do an exhaustive read on the best practices being followed for a conversion centric design. The findings would later guide in making design decisions.
Some of the practices were obvious enough — i.e. Always visible call to actions or repeating work well. But few findings came as a surprise. In an experiment, a homepage with navigation was tested against a landing page with no navigation. The Attention Ratio dropped from 15:1 to 3:1 and the result was a 100% increase in conversions.
While researching, I also came to realize the importance of credibility markers. If users are about to commit something, they need to see the credibility markers and social proof. These markers can consist of trust seals, i.e., Cleartrip Guarantee etc, social proofs (testimonials from social networking sites or reviews from users), number of sales so far, secure payments, contact information etc.
FOMO is real
Fear of missing out is real. People are more averse to losing something or missing out on it, as compared to acquiring something. This can be seen on sites like Airbnb (Only few rooms left) & Amazon’s order in 2 hours to get it tomorrow. Limited period discount is another commonly applied technique to tap into FOMO.
F-Shaped design pattern
According to a study by Nielsen Normal Group, Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
The research turned out to be great in bringing everyone on the same page, further strengthening some of the beliefs that we commonly shared. Some of them were:
- Always visible Call to Actions
- Bigger photos
- F-Shaped Design Blocks
- Trust markers
- Markers for leveraging FOMO
There were bunch of deal breakers in the first attempt. It looked heavily inspired from Airbnb. However, it was not intended. I simply tried to translate the findings of my research. You’ll have to trust me on that. Anyways, we took this opportunity to further iterate the design.
First we introduced the number of images available explicitly on one of the grids. Next we tried to introduced a bold and strong title for the booking form block to attract attention. It turned out to be something like this:
To further bring the attention to the booking form, I introduced a nice little SVG animation of a hand drawn arrow. It was done through SVG line animation.
The design needed to be translated into mobile web as well. We picked up findings like consistently visible CTAs and applied it here. A subtle slide up animation would make sure that this wouldn’t go unnoticed.
The design is never done. In future, whenever we have technical feasibility we would work on improving the real time stat of bookings. We would also want to introduce tools such as Saving to wishlist, or sharing it on your social feed.
Content with context is king. No matter how well executed the page of the design is, it would fail if we don’t have the appropriate content to support it. According to another study, users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to “jazz up” Web pages.