Designing the new checkout page
Introduction
The travel segment has the highest rate of cart abandonment in the e-commerce by sector. The 3 main factors are research, price comparison and references with others travelers.
Goal
The goal we traced was to optimize the experience on the Checkout page for the acquisition of hotels and vacation packages, reducing the huge page abandonment and increasing the conversion on the final step of the purchase funnel.
How to measure success?
We decided to analyze the following metrics to measure the project success:
- Bounce Rate
- Conversion Rate
- Number of reports on the customer service
Stages
To conduct this project we followed our traditional design process shared in 5 stages:
Stage 1: Discover
Analytics e BI
We did a quantitative research analyzing Google Analytics and BI to understand the numbers of the purchase funnel.
- 17,9% Get to the checkout;
- 4% Try to buy;
- 73% Attempts are approved.
Hotjar
We analyzed through Hotjar the Heatmaps and the video recordings of the users sections on the checkout page and gathered some patterns of frequent behaviors.
Stakeholders interview
Interview with stakeholders (customer service, comercial, marketing) to collect the Pain Points of travelers and hoteliers on the checkout step.
- Doesn't find the coupon field;
- Doesn’t find the credit field;
- Doesn’t complete the second card on the purchase with 2 cards;
- Doesn't understand the number of packages fields on the overview;
- Hotels that doesn't work with discount complain about the open coupon field.
Interface Analysis
Interface analysis, experience of the current page and collecting possible frictions and problems.
Confusing login area
- Login button looks like a form field;
- Facebook and Login button don’t seem to have distinct actions.
Excess of visuals elements and distractions
- Big picture causing distraction;
- The total cost, coupon and the credits don’t appear on the first fold;
- Repetitive texts and long fields;
- Incentives out of the purchase context;
- Excess (or overload) of information close to the CTA;
- Credit field active on the scenario logged without credits.
- Small fields to touch;
- CTA is far from the overview and final price;
Stage 2: Ideate
Affinity mapping
Categorization, in collaborative technique, of collected problems on the Discover step.
Definition and grouping into 6 categories: Purchase overview, login, discount coupon, credits, payment and incentives.
How Might We…
Generation of questions in reference to the problems experienced and voting for the best solutions.
- Reduce the picture and texts of the overview leaving price and fees visible?
- Display the credit and not active to the scenario logged without credits?
- Show the number of packages field without confuse the traveler?
- Highlight the payment options and installments?
- Exhibit the login experience less confusing and in the segment standart?
- Solve the price field problem on the purchase with 2 cards?
- Display the coupon without highlight the field?
- Use the incentives in a contextual form to the moment of purchase?
Solutions
- New layout and positioning of the overview card;
- Display the number of guests instead of packages;
- Pattern Guest Default Login;
- Represent the coupon area via link;
- Display the credit field just for logged users who own it;
- Switch tabs to buttons and display the payment installment next to the price;
- Empty price fields so the user can be free to fill out;
- Synchronize the incentives appearance with the user actions on the page.
- Step Checkout “One Thing Per Page”.
Stage 3: Design
Wireframe
Setting wireframe Lo-Fi responsive.
User interface
Interface with new UI and interactions.
Stage 4: Test
Test plan
Usability test planning using the usability test plan dashboard.
Guerrilla Testing
Format:
- 1 moderator and 1 observer;
- Stakeholders tests;
- User and screen recording through Screencastify extension;
- High loyalty;
- Prototypes desktop and mobile.
Data tabulation
- Grouping of objectives;
- Success, problems and failures;
- Notes and quotes from Debrief;
Remote Usability Testing
Remote usability Tests were applied to a selected user base through Maze.io. The test consisted in the accomplishment of 3 tasks related to the analyzed categories and a qualitative quiz. Afterwards we analyzed the quantitative metrics provided by the tool (direct success, indirect success and bounce), the heatmaps and the quiz answers (qualitative).
Test Analysis
New stage of categorization of problems and generation of solutions that solve the problems faced.
UI alterations
- Highlight the purchase overview on the mobile emphasizing the click action;
- Hide the steps numbers;
- Bring login links, coupon and credits closer to the steps titles;
- Modify the label and shape of credits link for better understanding and focus of itself;
After smalls layout modifications a new test was done to compare with the previous metrics and to validate the solution for developments.
Stage 5: Deliver
Documentation
- Delivery of the screens to the development team through Zeplin.io with screen specification;
- Document with utilization scenarios, form fields behavior and micro-interactions of the new interface.
Conclusions
The quantitative and qualitative researches were essential to understand the traveler and hotelier behavior, gather real occurrences on the current checkout page and analyze standards adopted by the segment players;
An important fact to the efficiency of this project was the presence of the data analysis in others stages not only at the initial stage Discover;
The use of fast and high loyalty prototyping programs for the tests made quickly adjustments on the interface possible, before even going to the development, optimizing then the team efficiency.
Smalls adjustments on the interface like the change of label and positioning already improved the page usability which will affect the conversion on the new checkout.
