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 focus their teams on mobile UX Design. Fast Growing Trees relies entirely on its website’s user experience to provide everything the customer needs when buying its products.

This is a challenge for their industry because landscaping with more detailed products can be hard to explain in a few paragraphs on the product page. Each product page needs to show the customer photos, reviews, planting details, shipping details, and any aftercare 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 users because the user is constrained to scroll 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 lets 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 were 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, and 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 on 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


A key reason this test was successful is that it allows the mobile user to explore the product while still working toward completing the checkout. No matter where they are in the buying process, it doesn’t interrupt their flow and ensures they have all the essential product information.