+70%
INCREASE IN
DESKTOP
CONVERT RATE
+78%
INCREASE IN
OVERALL
ORDERS
-27%
DECREASE IN
CHECKOUT
ABANDONMENT
+149%
MOBILE
CONVERSION
INCREASED
THE RESULTS
ASICS Re-Designs Checkout and Increases Order Numbers
Established in 1949 ASICS has solidified its position as a leading brand in the athletic footwear industry, emphasizing a holistic approach to well-being and promoting an active and healthy lifestyle. ASICS is celebrated for its commitment to innovation and performance, consistently integrating advanced technologies such as GEL cushioning into its footwear to enhance comfort and support for athletes.
THE CHALLENGE
ASICS expressed interest in reviewing and improving their checkout funnel. At the time they had a multi-step checkout that had many usability issues. I had previously worked with different brands for a one-page checkout and ASICS heard about the positive results. They asked me to help them design their own one-page checkout.
MY ROLE
Responsibilities
Leadership and Communication
In this project, I collaborated closely with Asics' senior management and developers ensuring clarity and alignment of objectives. I facilitated regular stakeholder meetings and presented the designs as they were being developed.
Research
Having designed one page checkouts for other clients I was able to utilize data and learnings from previous implementations. I did additional usability testing with Asics personas. I also performed a benchmark study so that we could compare the results of their current checkout to the new architecture.
Experience Strategy & Ideation
I led the effort from concept development through design and deployment. I designed the new workflow and created strategies for use cases.
Prototype and Design
Created annotated wireframes and prototypes aimed to communicate the desired outcomes of the design.
DISCOVERY
Stakeholder Meeting
ASICS first wanted to stop the bleeding. There were ongoing usability issues that were leading to checkout abandonment. ASICS wanted to identify, prioritize these issues and get fixes in place while designing their version of checkout. They expressed an interest in streamlining the checkout experience and they were interested in transitioning from a multi-step checkout process to a more efficient one-page format. The goal was to reduce friction points and reduce checkout abandonment, while improving the overall purchasing journey for ASICS' customers.
RESEARCH
Quantitative Data
Benchmarks
I began analyzing ASICS's data from the Salesforce benchmarks and dashboard reports to gauge its performance within the Athletic Footwear and Apparel vertical on the Commerce Cloud platform.
The data showed that shoppers were transitioning into the checkout funnel at a 44% higher rate than the vertical average. However, the data also showed a concerning trend as well. There was a significantly higher abandoned checkout rate that was impacting the overall conversion rate.
-
On desktop the abandoned checkout rate was 24% higher than the competitive space.
-
Mobile users were abandoning the checkout 23% higher than the vertical.
-
The conversion rate on desktop was 40% lower than the footwear and apparel space.
-
From mobile there was a 53% conversion rate.
-
A deeper funnel analysis of the data showed that Shoppers were abandoning at the shipping step 20% higher than the benchmark for both desktop and mobile.
PERSONAS
Qualitative Data
ASICS caters to a wide range of shoppers. Dedicated athletes seek performance-enhancing footwear, while casual exercisers prioritize comfort, and style-conscious individuals browse trendy collections.
Customer Testing
Asics was able to provide us with persona profiles that we could use for usability testing. The tests were straightforward yet insightful. Shoppers were prompted to add products to their carts and then proceed to checkout, initially as guest users, with the option to create an account after submitting their order. Subsequently, the same Shoppers navigated through the checkout funnel once more, this time as returning customers, leveraging saved information. In addition to these primary tasks, testers were assigned supplementary tasks to further evaluate the user experience. Some Shoppers were furnished with promo codes, others were tasked with shipping products to an address distinct from the billing information, while some were instructed to opt for expedited shipping methods.
-
Testers encountered difficulties with form fields, such as unclear labels or confusing input requirements, leading to frustration and potential abandonment of the checkout process.
-
Testers struggled to discern when errors occurred within the forms, as the feedback provided was insufficient or unclear, resulting in confusion and repeated attempts to complete the tasks.
-
Some calls to action within the checkout process were found to be disabled or unresponsive, hindering the progression of the user journey and impeding successful completion of purchases.
-
Testers reported vague or inconsistent information regarding delivery dates and shipping times, causing uncertainty and potentially influencing purchasing decisions negatively.
-
Creating an account posed challenges for testers, primarily due to unclear password requirements, resulting in frustration and potential abandonment of the account creation process.
-
Some testers encountered challenges when attempting to edit the billing address to make it different from the shipping address
-
While some testers praised the saved information functionality for returning customers, others encountered issues with formatting and missing information, leading to concerns reliability.
-
Testers responded positively to the display the free shipping messaging, they struggled to locate details about applied promo codes
These findings highlighted areas where ASICS could improve the checkout funnel until a new framework was designed and put in place.
ANALYZE & DESIGN
Key Insights
Using the results from the usability testing I performed my own audit of the current checkout funnel. This is done for two reasons. The first being so that we could identify and fix ongoing issues that were contributing to check out abandonment and the loss of revenue. Secondly, the audit ensures that these usability issues are addressed and prevented from making their way into the new design.
Checkout Forms
Observation:
The checkout pages did not have any error messages if users made a mistake when entering their information. This was compounded by the fact that the call to action was disabled. Users would click on the continue button, but nothing would happen, and they would not know that there was an issue with the forms that needed to be corrected.
Recommendation:
14% of address forms contain errors made by users. 11% of shoppers will abandon their purchase if they have to enter their personal information more than once. This is why it is important to notify shoppers of any issues with the forms. Add clear and concise error messages that validate the fields as users fill out the form. Also, enable the call to action to direct users to the specific areas of the page where there are issues.
Original Design
Revised Design
Shipping Methods
Observation:
Test subjects who were instructed to select an expedited shipping method commented that there was unclear information about the delivery dates, which made them hesitant to spend the extra money. This feedback aligns with other surveys indicating that 56% of consumers want to know the precise date when their package will arrive.
Recommendation:
When possible, provide estimated delivery dates instead of a range. This allows them to make informed decisions about their purchases and reduces any potential frustration over waiting times.
A/B testing has shown there can be a 24% increase in conversion rates when showing the original shipping price with a strikethrough, then highlighting "Free" next to it. This emphasizes the savings you're offering and makes the free shipping feel more valuable to customers.
Adding radio buttons also makes the options feel more Interactive.
Original Design
Revised Design
PHASE 2
One-Page Checkout
After completing the evaluation for the current checkout, the effort focused on designing a new streamlined funnel. ASICS wanted a single-page format that would simplify the process by reducing page loads, making it quicker and easier for shoppers to complete their purchases, and enhancing the overall shopping journey for ASICS' customers.
A true single-page checkout is when all of the required steps are displayed on a single page. In contrast, an accordion style checkout requires users to click a call to action to go from one step to the next. Both can be effective depending on the demographics of the shopper and the requirements to complete an order.
There are benefits and drawbacks to one-page checkouts. Having previous success in implementing one-page checkouts for other brands, I had a solid foundation of testing and data to build upon.
The Benefits:
-
Reduced Checkout Abandonment: By streamlining the process and minimizing clicks, one-page checkouts can significantly reduce cart abandonment rates. People are more likely to complete a purchase if it's fast and easy.
-
Improved User Experience: A well-designed one-page checkout is intuitive and user-friendly. Customers can see everything they need at a glance and complete the purchase quickly.
-
Mobile-Friendly: One-page designs are inherently mobile-friendly, which is crucial in today's e-commerce landscape where many purchases happen on smartphones.
The Drawbacks:
-
Information Overload: A single page filled with forms and options can be overwhelming for some customers. Clear organization and visual hierarchy are essential to avoid confusion.
-
Form Validation: Validating user input as they go can be trickier with everything on one page. Clear error messages that appear immediately are vital to prevent frustration.
-
Limited Data Tracking: Tracking customer behavior and cart abandonment becomes more challenging with a one-page checkout compared to multi-step checkouts, potentially hindering optimization efforts.
THE RESULTS
Successful Engagement
Through a collaborative effort with ASICS' senior management, developers, and stakeholders, we effectively addressed ongoing usability challenges. By implementing a user-friendly one-page checkout process, ASICS achieved a remarkable boost in both sales performance and customer satisfaction. Our data-driven approach, coupled with clearly defined objectives, led to a successful implementation of a solution that exceeded expectations.
-
Desktop convert rates improved by a 70%
-
Mobile convert rates improved by a 149%
-
Mobile abandon checkout decreased -21%
-
Overall orders increased by 78%
Wireframes
This was the base wireframe that we started with. We made adjustments based on specific needs for the ASICS’s shoppers and their business. Including eliminating the login page between cart and check out. Returning ASICS shoppers could log into their account and rewards program on this page.
Live Design
After a couple of months of development, testing and refining, this new funnel was designed to simplify the checkout process. One of the tests that we performed revealed that there was an 11% higher conversion rate when customers were able to place their orders on this page instead of directing them to a review order step.
Returning Customers
Observation:
After completing the checkout process as a guest customer, test subjects were asked to repeat the process, this time as returning customers with their information stored from previous purchases. When returning customers went through the process again, some forms appeared pre-filled, but certain fields were empty. Shoppers who quickly scanned the forms didn't realize these blank fields and assumed everything was filled in, resulting in errors and frustration.
Recommendation:
Developers were advised to ensure that all form fields were contextually labeled properly so that saved information would automatically populate the fields. They should also test this feature across various browsers and devices. Furthermore, this emphasized the importance of having clear error messaging and not disabling calls to action.
