Redesigning the Checkout Experience — How SnapTravel increased conversion rates by 5%

As anyone working in eCommerce will tell you: the checkout experience is quite possibly the most high-impact step in your user funnel. This is the make-or-break moment, the point at which the Search turns into Revenue.

Because this step is so important, the SnapTravel team decided to dig in deeper and redesign the checkout experience. SnapTravel is a leader in conversational commerce, building unique mobile-first experiences that allow users around the world to book travel over chat. Leveraging the applications that they already have on their phones, already know how to use and are already using everyday, users can connect with a chatbot powered by ML and NLP to find and book the best hotel deals.

Read below to learn more about our journey, leading to a 5% increase in user conversion rates!

For starters, online checkout experiences almost universally suck. In our research we came across a fantastic study by Baymard Institute that sums up the main issues quite well:

We are very fortunate, because our users don’t need to create an account, log into anything new, wait for shipping/delivery or file a return. This study, paired with a few others and some extensive user interviews + testing, helped us immensely. We narrowed it all down to the main problem we needed to solve…

The Problem: Long + complicated checkout process

As we dug in deeper, we realized that it was important to shorten and simplify the checkout process as much as possible. We needed to reduce the clutter and distraction, and remove any unnecessary obstacles that may stand in the way of a user finalizing their hotel booking. One of the main obstacles was the number of fields that needed to be completed.

The above research was completed by Baymard Institute: after going through the Top 50 eCommerce sites in the US, they found a correlation between the number of form fields and the usability performance of the form fields.

The Solution:

We used a cross-functional team of a User Researcher, a Product Designer and a Frontend Software Engineer to put together a plan, build a new checkout experience, and ship it quickly. 🔥 Here are some of the changes that we made:

1. UX Best Practice ✅

We examined some universal UX design principles and compared them to our existing design, finding and addressing the gaps. This included revisiting the basics of visual coherency and mental models, looking at concepts like Shape, Size, Colour and Proximity. For a refresher on these basics, we’d recommend checking out Laws of UX here.

Some quick fixes that we identified were:

• guidance to the user through visual guides: inline positive validation (changing fields to green/red to show if they’re correct), input masks to indicate the desired input format, etc.
• clarity around where the user was at in our 3-step process (headers with changing state to show what is in progress, what is complete, and what is to be done) and making it clear where to go next (clean, simple Call to Action)
• faster/easier to navigation through the process, reducing clicks, switching from dropdown menus to radio buttons, providing auto-complete text inputs, condensing two fields (“first name” & “last name”) to one field (“Full Name”), etc.

2. Using our Data 🔢

Next we dug into our own user data, learning more about how current users were interacting with the SnapTravel product in the existing checkout flow. A simple tool that we would recommend for this is Hotjar, which allows you to see realtime heat-maps to understand where users are clicking, scrolling, typing, etc. For more quantitative analysis, we used Amplitude to keep a constant eye on conversion and click-through rates throughout the experience, with the ability to segment by factors such as Desktop/Mobile, Android/iOS, etc.

We also spoke to our actual users, conducting a mixture of qualitative and quantitative analysis with surveys, interviews and User Acceptance Testing (UAT) to understand what worked, what was frustrating them, and what they’d like to see in the new design.

3. Optimizing for a Delightful Experience 😍

Again, it always came down to this: how do we remove obstacles and barriers, and let the user “checkout” as quickly and easily as possible? We ran some A/B tests, collected feedback from our own team members, and conducted an analysis against our competitors to determine which industry-specific elements we needed to optimize to provide our users with a delightful checkout experience.

Some of our key findings:

• in the pricing section, make it easy to understand upfront what the final cost will be: we added visual guides to make it easier to locate the discount, total amount of savings, final cost, etc.

• in the Call to Action section, provide a sense of trust to the user, to help them feel more confident in clicking through and finalizing their checkout

• in the payments section, keep the expiry date field as a text input (vs numeric or dropdown) so the user can stay in the text state through all 3 fields

The Results 📈

After putting together the new design, bringing it to life with our Frontend engineering team, conducting rigorous tests and shipping it to Production, the final step was to measure the results and see if it worked. We ran a simple A/B test where 50% of our users would have the new Checkout Experience (Variant A) and the other 50% would still have our old experience (Variant B).

After a few days and a few million searches, the results were in: Variant A (the new checkout experience) was performing much better, with a 5% higher conversion rate! 🔥

Next Steps…

In a hyper-growth startup, the fun never ends! With this new Design project behind us (for now), we’ve moved on to tackle some new challenges with our Product Design and User Experience. Some of these challenges include:

1. Building a Design System: identifying and defining our brand and building it into a holistic design system across the product and organization
2. UI on new channels: continuing to build the SnapTravel experience in new messaging platforms that users love and use everyday
3. New Product (stealth mode 👀): launching a new product aimed at a new type of user, with an entirely new user journey and design!
4. Data-driven Design in eCommerce: continuing to audit and redesign the Product in a fast-moving, iterative way to drive increased KPI’s and have direct impact on the user experience (and bottom line!)

Interested in getting in on the action to help us tackle some of these Design problems? 👀
Check out our Careers page to learn more!

Have questions or comments? Leave them below! 👇