Sarah Carrell
.png)
UX Design. UI Design.
Plantable is an online plant shop that specializes in selling and delivering houseplants to customers. In an effort to improve conversion from browse to checkout completion, I redesigned Plantable’s mobile online e-commerce experience to reduce friction and increase the likelihood of users completing purchases.
To better understand the source of Plantable's low conversion rate, we performed a historical data analysis on the existing site. User behavior immediately indicated that there were major experience issues to be found throughout the site and its product funnel, thus beginning an iterative redesign to the site itself.
Behavioral data collected by Google Analytics showed how users were interacting with the site while browsing products and where they were dropping off.
To understand why drop-off rate was so high during checkout, we analyzed user behavior at each step of the checkout process. We found that users most often abandoned checkout at the first step, the registration screen. Right now, users must make an account to make a purchase.
Behavioral data collected by Google Analytics showed where users were dropping off after adding items to their cart.
After identifying customer and business pain points within Plantable’s mobile-web experience, I defined specific goals to narrow my focus before redesigning the browse and checkout flows.
Organized and easy to navigate website structure helps users find what they’re looking for and discover new products.
Product information should be enough for customers to know about most critical information, features, and benefits without overwhelming users with too many details. Products should have attractive photography that also accurately depicts what is being offered.
User-generated feedback establishes credibility and trust, helps customers decide what product is best for them, and provides valuable info about what customers want and what needs to be improved.
Forcing customers to register is often frustrating and leads to cart abandonment.
Customers need to know they’re making a safe purchase and their personal information is protected. Trust signals throughout customers’ shopping and checkout experience eases concerns and improves rapport.
Multiple payment options should be presented to customers so they can select their preferred method or in case one of the options fail. This improves overall experience and reduces likelihood of drop off.
Reducing as much friction as possible throughout the checkout experience is essential to conversion as well as including features that streamline the process.
Considering customer and business needs, I created user flows to break down the organization and structure of the routes users will use to browse for products and complete checkout.
Sketching screens first allowed me to creatively explore ideas in a flexible and tangible way before making higher fidelity designs.
%203.png)
Fixed nav header for easy access to menu, account, and cart
Accessible hamburger menu on right side
Browse products by keyword search
Browse by product type
Browse by collections & categories
Top categories included in main navigation menu
Chips allow users to select and filter through collections
Top collections shown first
Breadcrumbs to assist users in getting to content nearby
Applied filters displayed in horizontal loading list
Lazy loading to optimize load times
Number of products and order listed based on relevance
Sort by feature to refine results quicker
Chat feature for questions and support
Product summary at top
Thumbnail photos
Product details structured in scannable and readable way
Suggest products based on user behavior
Customer reviews
Confirmation when item added to cart. Option to go directly to checkout or continue shopping
Encouraged to reach dollar amount for free shipping
Links to similar products
Cart part of fixed nav bar - easily accessible
Edit item quantity from cart
Progress indicator
Collapsable summary
Multiple payment options
Auto-formatted input fields to prevent entry errors
Auto-fill when possible
Suggested add-ons displayed after information is collected so checkout is not interrupted
Option to scan card with camera instead of inputting manually
Feedback through success and error indicators
Guest checkout
Remove or adjust quantity from order summary screen so checkout is not abandoned
Separate information into scannable sections
Thumbnail images of products
Suggest products based on user behavior
Cost breakdown is clear
I conducted 20 minute usability tests with 5 participants to test my product browsing and checkout designs. Participants were asked to find a plant they’d like to buy and then complete the checkout process.
The product cards users see when browsing lists are very small and contain limited info. If users want to view more info about the product, they have to open a new page. This increases load times, takes users off of the browse products page, creating an overall frustrating experience for users
Quickview popover page with large photos users can easily click through, available variations to choose from, and add to cart button. If the user decides they want more info than what is provided in the quickview, they can opt to open the product detail page
Users can’t compare plants without returning to search results, forgetting which plant they were interested in before and getting disorientated - creates overwhelm and frustration
Additional features that make comparing products more seamless include a quickview popover, ability to save favorites, suggested products based on previous searches, and additional customer support from plant experts.
Users can’t edit info from other steps on the final review screen, they must go back to the previous screens.
Allow users to edit any of the steps from the review screen without leaving the page. Each step is a separate card, making it easily scannable and simple to navigate.
