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.


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.