Creating a Seamless checkout flow
OVERVIEW
Sometimes a significant improvement to the user experience can exist without any visual changes. This project proves that sales conversion can be increased by tapping into the user’s state of flow when completing a task.
MY ROLE
I acted as one of the user experience project leads. Along with another designer, I created all wireframes, designs, and deliverables for development. I advocated for this project to be prioritized and acted as the UX spokesperson in project meetings. While my user research counterparts conducted usability testing, I acted as the note taker, created the prototype used in testing, and helped analyze the test results.
TOOLS
-
Axure
-
Morae with Eye Tracking
-
Clickable Prototypes
-
Pen + Paper
-
Usability Testing
-
MouseFlow
-
Adobe Analytics
-
Heuristics
THE problem
While working on a project within checkout, I was prompted to create user flows for checkout (mobile and desktop, logged in and guest). I noticed some concerning paths that would be taking the user away from their primary flow. Along with convincing stakeholders that this was a serious problem that needs attention, the problem we were trying to solve was to create a seamless checkout flow that does not disrupt the user’s flow and intent.
Process
-
Create user flows
-
Talk to stakeholders about the potential problem
-
Validate the problem through usability testing
-
Prioritize this problem amongst other checkout problems with stakeholders
-
Ideate potential solutions
-
Create a prototype with the new solution
-
Conduct usability testing to validate the new flow
-
Utilize testing videos to prove the necessity of this change with stakeholders
-
Finalize deliverables and deliver
-
Measure results
USER RESEARCH
While creating and analyzing the user flows, I noticed two major flaws.
​
Through data and our understanding of the user, there are many customers who do not feel comfortable saving their credit card online, or the card they had saved was expired. When the user would begin checkout with no payment information saved, they would land on the payment page. If they would move back in the sequence to change the shipping address or shipping method, they would skip past the payment problem and land on the review page. This stuck out as an odd flow for users in this situation that needed additional testing. The user would also be redirected to the review page when they utilized the "cancel" button. This makes no sense and can cause users to get stuck in within checkout.
The second problem was for the logged-in mobile user who did not have payment section complete. Again, this is a common scenario for a logged-in user to be in. On mobile, a hub and spoke model is used to help the user focus on one task at a time. When the user would begin checkout, they would land on the payment page. They could not confirm the shipping address or method until this step was complete. The user was essentially stuck on this step until it was complete. Videos captured via Mouse Flow helped confirm that this problem needed to be addressed.
DISCOVERY
We headed to the local Cabela’s store to see what the customer’s reaction to the logged in desktop flow. The user was given the scenario of purchasing a pair of waders as a gift for their nephew. They were given the credit card information to update the card on file, the address for the gift, and a date that they want to be sure the nephew received the gift by (his birthday).
When the participant clicked “begin checkout” they were not surprised to land on the payment page in error state. Most users prefer to update the shipping address first so they could confirm the shipping costs and timeline. When they completed the shipping address they were asked where they expected to go when they clicked the continue button. 100% of the participants expected to go to the next step in checkout (shipping method). When the participant clicked continue, they were disoriented. At first, some thought they were on the shipping method page until further investigation of the page.
The tiles on the top of checkout show the sequence of steps and to skip to the end, especially with the payment section incomplete, did not make sense. Eye tracking results showed users looking across the steps in a sequence across the top of the page and when they were brought somewhere "random," their eye movements showed confusion.
For the mobile checkout flow, users would get stuck on the payment page and be disoriented. They did not understand why they landed on this page or where they are in the checkout process. Some users expressed concern around entering their sensitive credit card information without having the opportunity to check the shipping options. On mobile, trust is a key factor in conversion, especially with sensitive payment information.
IDEATION
Now that the problems were defined, we began brainstorming solution. We created multiple user flows and different ideas on how to adjust the flow and possibly button names. We landed on one flow that seemed to solve this problem without disrupting the primary happy path.
USER TESTING AND ITERATIONS
After building a new prototype in Axure, we conducted usability testing to compare to the current state checkout flow. The participants were given the same task of purchasing something for their nephew as a gift. The results unanimously were in the favor of the new checkout flow.
SOLUTION
The usability testing results clearly showed the solution. User’s preferred to have a linear checkout flow and to follow through each step after the initial checkout step. The "cancel" button was renamed to "back" to match the expectations of the users. Users are now given balance of control and freedom by giving them forward (continue) and backward (back) motion through the main buttons, or the option to use the main navigation tiles to jump ahead to any step.
The mobile solution also proved itself in usability testing. Users are now brought to a review page where they can choose to navigate to any step of their choosing, while clearly showing that they have an error on the payment page. Conversion on this page increased by 5% due to this adjustment.
NEXT STEPS
During the usability testing more issues were uncovered with the checkout flow. Users who utilized the top navigation tiles expected any of their inputted information to save. When talking to development, we decided that this problem would need to be solved in a separate effort.