LEAF & CLAY
Designing a responsive eCommerce site for a plant shop to improve conversion
rate and user engagement
Leaf & Clay is an online plant shop specializing in indoor house plants and plant pots.
However, the current website is underperforming. Some key metrics indicate that poor site usability may prevent the company from achieving its business goals.
Increase customer conversion
Improve browsing and checkout process
Boost sales on the eCommerce website
UX Techniques Used
Competitive Usability Testing
Wireframing and Prototyping
Usability testing and Iteration
90 hours solo UX project
Create an online shopping experience with efficient browsing and checkout process, user-focused navigation, intuitive recirculation, and strategic use of popup to increase customer engagement and conversion rate.
WHY IS THIS A PROBLEM?
50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.
Users are having a hard time making a well-informed decision on which indoor house plant is the best one for them based on relative features.
70% of users who place an item in the cart do not purchase.
Data has shown customers who have decided to purchase a product are abandoning their carts at the registration process because the users must create an account to make the purchase.
Unfortunately, Leaf & Clay is failing to convert the customers!
Who are the users?
Last year, 30% of all households bought at least one houseplant, according to research from the National Gardening Association. Millennials, aged between 24 to 38 years old, were responsible for 31% of recent houseplant sales.
Why are they drawn to plants?
Most of the millennials rent rather than own homes, limiting the outdoor gardening options.
Wellness and self-care
Home Decor: Nature-infused design aesthetic is pushing houseplant popularity to a new height
Social Media: Pinterest and Instagram are the most influential trendsetter.
Rewarding and inspiring
INDOOR PLANT MARKET RESEARCH
Learn from Industry Leaders
To start, I looked into three industry leaders in the online plant shopping market, which are: Bloomscape, House Plant Shop, and The Sill.
Here some action items that I would like to take into consideration:
Provide a CTA button when hovering onto each card for an express check-out
Offer guest checkout service to improve conversion
Offer product images from various angles
Find Potential Users
In order to gather more information, I sent out screener surveys to potential users about their shopping habits and expectations for buying house plants and pots online, here are some key takeaways based on 42 responses.
63% of participants are experiencing a hard time picking the right containers for their plants and it would be easier for them if they come as sets.
Comments & ratings from other users and return & shipping policy matter to them most when shopping online
Size and dimension of the product and time to maintain the plant are key factors to consider before making a purchase
ATTITUDINAL USER RESEARCH
Based on results from the screener survey, I've started with 5 people for the user interview and competitive usability testing. Not only did I meet people who had online plant shopping experiences from the past, but also those who prefer to buy plants in-store, where I would like to know what stops them from buying online.
After analyzing users' preconceived attitudes and feeling towards the online plant shopping experience, I have synthesized 4 major pain points they have encountered when buying plants online.
BEHAVIORAL USER RESEARCH
Competitive Usability Testing
According to the Nielsen Norman Group, competitive testing allows designers to get feedback from target users early by trying out products from competitors, where I can gain deeper insight into why design elements work or fail and make informed decisions moving forward.
After the user interview, I asked the 5 participants to test out 2 competitor websites and complete the same task in the think-aloud methodology.
Which competitors' websites are being tested by the participants?
What is the task?
You would like to buy a money tree, preferably in a blue color plant pot within a $50 budget.
What is the result?
After the participants completed the given task, I have asked them to rate their shopping experience for both websites on a scale of 1 to 5.
60% of the participants would want to use Bloomscape for their next purchase for its easy navigation and straightforward shopping experience.
DEFINE USERS GOALS
After analyzing feedback from user interview and competitive usability testing, I created 3 lightweight user personas for Leaf & Clay based on their different shopping behaviors:
Linda, an Social Media Scroller, and aesthetically oriented buyer, like anything that is aesthetically appealing
Adam, a Tech-Savvy Shopper who is a customer on a mission, usually on the hunt for a specific product
Linda, an Everyday Grower, and well-informed shopper who has an idea of what she wants to buy.
USER RESEARCH HIGHLIGHTS
Most wanted features people wish existed:
See shipping estimate before proceeding to checkout
Able to "Mix and Match" plants and plant pots
Would like to see plants or pots from the same collection
Live chat for a quick consult on plant care or product selection
In order to cater to all 3 user personas and increase conversion, key features to include in the solution are:
Reviews & Photos
Mix & Match Plants and Pots
Compelling Product Page
I have taken 3 personas: Olivia, Adam, and Linda’s needs and goals into consideration and compiled them into one key user flow. Creating a user flow helps me to map out steps a user will take to complete his goal in the most efficient manner.
I began to sketch the main screens of the website using the user flow as a guide. This allows me to quickly explore different ideas for the page layout.
TEST AT INITIAL DESIGN STAGE
Low Fidelity Prototype & Usability Testing
After gathering solid ideas using pen and paper, I started to build wireframes using Figma. I made sure to prioritize the features that would best address the needs of the personas. After drafting the testing script, I recruited 5 participants to test my low fidelity prototype.
After the 1st round of usability testing, here are some major issues that I would like to address later in the design:
How can I bring seasonal promotions to the website to attract user’s attention?
All the participants closed the pop-up signup window when they first arrived at the website. How can I make the interaction more compelling to encourage users to sign up and receive $10 off their first order?
How will the customers select pot color and type if they click the “Add to Cart” button from the product list without viewing the product detail?
How can I encourage users to continue shopping in order to qualify for free shipping?
Low-Priority for Future Consideration
I introduced the chatbot function on the site and would like to get users' feedback on this feature. Fortunately, users said they don't need much assistance at this stage since they can found most of the information needed on the website. They are more likely to use the chatbot to proceed a return later.
UI STYLE GUIDE
While creating the user interface, I paid special attention to the persona's needs and brand attributes which are Modern, Earthy, Peace, Inviting, and Balanced. I ensured the color and text contrast ratios using the WebAIM Contrast Checker and Web Content Accessibility Guidelines.
HIGH FIDELITY PROTOTYPE
Taking the feedback from the 1st round of user testing and the visual identity, I constructed the high-fidelity screens for both mobile, iPad, and desktop.
TEST THE FINAL DESIGN
High Fidelity Prototype Usability Testing
When asked during my initial user interviews in the research phase, users disclosed that they are more likely to make a purchase on a desktop device, the testings were conducted via Zoom screen sharing using a Figma prototype on a desktop device.
Test Objectives: Gather user feedback on the entire process and identify usability and accessibility issues.
Participants: 7 people total, a mix of plant parents, designers, and unaffiliated users.
TASK COMPLETION RATE
All participants can easily complete the given tasks from browsing the products to checkout.
Users enjoy the look and feel of the website and the social media implementation attracts their attention.
Users are familiar with the checkout patterns which they are comfortable making the purchase.
REDEEMED COUPON AT SHOPPING CART
I provided the slide-in popup window at 2 places. Users prefer to redeem the "$10 Off Coupon" when they added the product to a shopping cart, comparing to when they are browsing the product page.
Users would also want to test the coupon code right away before proceeding to checkout.
NEED CLARIFICATION ON PRODUCT CONTENT
Users expressed the need to preview the plant in a home setting and further clarification on what "Shop the Look" stands for.
In the following section, I will analyze my solutions and cover some of the most interesting and challenging problems I have met and how I solved them.
Effective Use of Popups in eCommerce
According to Nielsen Norman Group, a poorly designed upfront registration may lead to 23% of users abandoning the site.
Also discovered in the low-fidelity user testing, 100% of participants chose to close the large pop-up signup window when they first arrived at the website. People wanted to close any popups blocking their way because they perceived them as advertisements.
The Solution: Slide-In Popup Window
In the high-fidelity prototype, I tweaked and designed a less intrusive modal window that slides in from the bottom-right section of the screen. One slides in on the product page and the other one at the shopping cart to test people's reactions. People are aware of the popup animation but didn't feel the urge to close it asap. Most importantly, it didn't bother them browsing the page.
20% of the users redeemed the coupon on the product page
80% of the users signed up and redeemed at the shopping cart right before proceeding to checkout.
Smart Recirculation Brings Convenience to Plant Shopper
While conducting behavioral usability testing, unable to change product size or pot style on the product page causes frustrations to users and impedes conversions.
It is challenging for users to memorize the dimension of the plant and finding a pot that matches. On some competitor's sites, plant pots are being recirculated to other pots, plants to other plants. The lack of cross-selling function was a missed opportunity to boost sales for both plants and plant pots.
The Solution: "Mix and Match" Plant& Pot Feature
I introduced a “ mix and match” feature on the product page. Users would now be able to select the plant size, pot styles, and pot colors all on one page instead of opening multiple pages to find a match.
More options = More anxiety = Fewer actions taken!
By strategically presenting the selections, 100% of the participants are confident with the pot they chose will match their plant and how efficient this process has been working for them.
Connect with Customers and Build Trust
Both of the personas: Linda and Olivia rely on social media and user comments when making a purchase. How can I bring trust and simplifies the shopping experience for first-time users?
Product visualization with user-generated content： Users would like to see and visualize how the product would fit in their world and not just in a neatly staged photo gallery.
Strong social presences：Recommendations humanize the endorsement, making it even easier for prospective shoppers to trust the product and the brand.
Storytelling with product content：Presenting each plant as a new member to your home, I adopted a first-person perspective to introduce each plant.
100% of participants liked the "Instagram Gallery" on the landing page and "Styled in Real Life" from the product page.
80% of the participants find the comments and photos from past users helpful while making the decision
LEARNINGS & TAKEAWAYS
Overall, I really enjoyed this experience and learned a lot about plant knowledge and e-Commerce UX.
My key takeaways include:
Plan ahead - I couldn't deliver a finished product without the help of people using the product. Arrange the testings ahead of time and let the users know what device they should use would definitely resolve technical issues and accelerate the process.
First impressions count - The human attention span can only last for 8 seconds. If the users find your site less inviting or engaging, not optimized for browsing on various devices, they’ll go somewhere else. Designing a responsive e-Commerce site is a crucial and valuable experience.
Detail matters - Changing the upfront registration window to slide-in positions and adding a minus sign to the number of dollars people saved in their cart may not appear to be big innovations but these changes will clear users' frustrations and eventually increase conversion.
Users first - Seeing the product from a user's perspective, I challenged myself to ask the same question on every page of my site, does the user know where to go next from here? If not, what do I need to change to do that?
If I had more time, I want to investigate deeper into the needs for the chatbot function mentioned in the low-fidelity testing. I assume this feature will decrease the users' friction of using the website and improve conversion and retention. However, building an NLP ( Natural Language Processing) product on this scale would be a big engineering effort. I would like to research further to validate if this is a worthwhile feature to include at this stage.
Feel free to interact with the final clickable prototype following this task flow which is identified as the key route for my personas.
As a first-time shopper on this website, you would like to explore indoor plants for beginner
You would like to know more about the ZZ plant
After reading all the information about the ZZ plant, you would like to add the ZZ plant with a stone color clay pot to the cart
You would like to claim the $10 off first order coupon before proceeding to checkout
Proceed to checkout and place the order