Mobile Optimized Product Page

Fast Growing Trees

BACKGROUND:

E-commerce shopping has been overtaking the in-person shopping experience for a while now, and that trend will likely continue as companies get their teams focused on mobile UX Design. Fast Growing Trees, relies entirely on the user experience of their website to provide everything the customer will need when buying their products.

This is a challenge for their industry, because landscaping with larger and more detailed products can be hard to explain in a few paragraphs within the product page. Each product page needs to show the customer photos, reviews, planting details, shipping details, and any after care the plant might need after it arrives.

For mobile platforms, this presents a challenge when there’s a limited amount of text and images that can be shown. For this reason, I wanted to create an easier way to browse the product page while still being able to show the plant sizes and variations, while browsing further down the product page.

Old Version: This version of the product page had the add to cart button higher up on the page, meaning that they only had the size and price variations in that one spot. This presented a challenge for mobile, because the user is constrained to scrolling all the way back up the product page to view the other available sizes for a product. On desktop, this doesn’t seem to come up as much since it’s a bit easier for the user to navigate the page with a larger screen.

New Version: This version of the mobile product page helped move some of the planting directions higher up on the page when the user scrolls, and let them change the size or quantity of the product at any time.

Fast Growing Trees has a mobile-first audience, and that experience needed to be as refined as possible to meet the growing demand and audience growth. In order to reach the goals the company set in terms of acquiring new customers and keeping returning users engaged, the UX for mobile needed to have the most time dedicated to it.


MATERIALS:

Tools: Figma, HTML/CSS, VWO Testing Platform

Along with other tests and implementations for the website, this test was run through the VWO testing platform to split the traffic 50/50 and see which design proved to have better results.

VWO proved to be a valuable resource for diving more into user behavior and researching which parts of the design was causing confusion. Heatmaps, screen recordings and a variety of testing features became a part of my daily routine when the tests were running.


RESEARCH:

Fast Growing Trees’ demographic is mobile leaning, like many e-commerce companies that do a majority of sales online. The split between mobile and desktop is 62% mobile, 33% desktop, and the gap is widening more as time goes on.

The average user on mobile spends less time on the product page than desktop, so giving them enough room on their screen while browsing was the main goal of this test.


OUTCOME:

The metrics used included add to cart rate, average order value, and conversion rate. Add to cart rate was set as the main goal, since the function of the mobile test was to encourage more users to add the product to their cart and checkout.
Conversion rates had a slight increase during this test, moving forward I’d like to test the different products sold through Fast Growing Trees’ site, and make sure the products with less details about them have this success.
Revenue per visitor also had a decent increase compared to the control. This is likely because the sticky ATC button encourages the user to keep the product on their mind while they’re reading reviews or spot other products that are recommended.

This test was run over a total of 5 different product pages on the site, and each one had an overall increase in add to cart rate compared to the control version. In total, the new template had an average of 25% higher add to cart rate across all of the tests.


FINAL MOCKUPS:

Here’s a recording of how the scrolling feature works on mobile

Part of the reason this test was successful, in my opinion, is that it allows the mobile user to learn more about the product and still have the end goal of going through the checkout. No matter what part of the buying process they’re in, it doesn’t get in the way and allows them to have enough information available to them at all times.