Improving user experience to optimize the user flows and increase the conversions.

First, analyze and define the pain points in the user workflow from the home page to the checkout page in order to rework the user flow and propose a better user experience through data analysis and user research.

Second, A/B test a new Checkout Experience using an All In One screen experience merging the Shopping Cart and Checkout screens.

As phone screens range from 4.7 in. to 6.2 in. on average, large screen designs need to be adapted for interacting with one thumb since approximately 49% of users are only using their thumb to browse on their mobile device.

On the first screen, representing the old website, we have illustrated the issue the Checkout Call to Action is suffering: being hardly accessible to the users.

The first solution we prototyped, illustrated on the second screen, involved having the checkout options fixed at the bottom of the screen. In theory, this would have been the best option; however, after running user tests, we found that some people were accidentally clicking on the navigation bar.

The second solution, illustrated on the third screen, involved reworking the hierarchy of information and bringing the button to the right side for easier access, especially when scrolling.

A good practice had been implemented on the existing website: when the user scrolled to the cart, the checkout actions were fixed at the top of the screen. However, PayPal was easier to access than the regular checkout, and, after analyzing the website analytics, not a lot of users were using this option.

Our first prototype presented the same issue on Android devices where the navigation bar stays on the screen. On iOS devices, we faced a new issue due to how the viewport resizes itself when the navigation bar disappears.

The second prototype fixed the hard reachability of the Checkout button and also brought reassurance to the users who didn’t take the time to review their cart since the total amount is displayed. PayPal has been removed from the quick action as it’s a choice of payment in the Checkout screens.

According to the store analytics, the average number of items added to the cart is around two. Additionally, the bounce rate during the checkout process is increased if there is a lack of information about shipping costs.

The existing website displayed the shipping information when one item was in the cart. However, having more than one item pushed it under the viewport fold, forcing most users to scroll or leave the page.

We managed to display the shipping information when two products are in the cart by reducing the size of product pictures. Additionally, we’ve moved the editing options from the product details and put him behind an option button, since these are contractual actions.

Shrinking the size of the pictures and moving the contextual actions to an options menu also helped us to have four items displayed on the screen when scrolling instead of the previous two, covering the majority of our customers’ carts (2 to 3 items, on average).

The contextual menu is accessed by tapping on the options menu icon. This icon is used by both Android and iOS, so users are accustomed to it. The menu reveals itself from the bottom of the screen, which makes it accessible and easy to use. The items that can’t be interacted with are grayed out. To modify the size or quantity, users simply have to choose from the native select menu on their device, which makes the experience simple and clear.

According to WCAG 2.0 in order to use the minimum legible contrast ratio (around 4.5), you should use a font size of at least 14 pixels.

The existing website was displaying the Shipping Eligibility information in a small box with small font size and a poor contrast ratio, which made it very confusing and easy to miss. We’ve improved both the visibility and usefulness of this box with a good contrast ratio and contextual colors, grabbing the user’s attention and making sure the message is understood.

The existing website displayed a slider with recommended products underneath the free shipping notice. That’s a nice way to encourage customers to add more items and receive free shipping. However, having more products than necessary in the cart means longer load times and might not be relevant to the customer. Additionally, the experience of adding the product to the cart wasn’t optimal.

In order to improve the loading times of the shopping cart as well as optimize the information displayed, we’ve decided not to include the Recommended Products directly inside of the Cart.

Instead, customers who want to browse more products for free shipping can do so by tapping on the notice, which loads two sliders: one with items in the price range needed to acquire free shipping, and a second to cross-sell products. For optimal performance, the sliders are lazy loading the items when the user interacts with them. The free shipping notice has been kept at the top of this full-screen pop-up in order to help the customer remember what the difference needed was.

The Add to Cart pop-up was also reviewed to include the product’s picture and details, which will change with the various options selected by the user to give them a clear view of what will be added to the cart.

Checking out as a guest is useful for one-time customers or people who don’t want to bother creating an account, instead relying on their device’s autofill features. On the existing website, checking out as a guest was very tedious, as it required four taps to achieve.

Checking out in our optimized workflow was a simple as one tap – two, if the quick checkout option was used. Users who aren’t logged in have two buttons available to them: one to check out as a guest and a second to log in before checking out. If the user is already logged on, only one button is present linking to the checkout page.

In order to reduce the bounce rate of the checkout page and simplify the user journey, we’ve merged the cart and the checkout pages. The customer is guided through visual indications and a progress bar which helps them know where they are in the process.

Instead of having multiple screens for each step, all the steps are visible at once and can be scrolled through. However, in order to simplify the process and guide the user, only the active step can be interacted with, since what happens next depended on user choices.

Using this system allows us also to retain user information while they are in the session and avoid losing data or having them need to re-enter all their personal information if they decide to come back to pay later.

One of the critical steps while checking out is deciding to check out as a guest or login. Instead of forcing users to log in, we first ask them for their email. If the email is found in the customer database, they are enticed to log in, but I can also decide to continue as a guest.

Users who don’t have an account are shown a friendly message inviting them to choose a password to continue if they want to create an account while checking out.

Once logged in, all known information is pre-filled and the customer can decide to edit the information or continue with existing details.

We’ve A/B Tested the improved checkout experience and the new “All-In-One” Checkout experience. At first, we noticed an improvement in the bounce rate, and users were going through the whole process.

The number of users interacting with the Recommended Products diminished so we did A/B test a version where we pushed the products with the notice and did see an improvement in users adding cross-selling products.

The number of accounts created stayed the same, but the time spent on the page diminished, meaning people were going through the whole checkout experience faster, and creating an account was less cumbersome.

In further tests, we’ve added social network logins for Facebook and Google and saw even faster checkout times, especially when the customers came to the shop through digital advertising.