LEAF & CLAY

Designing a responsive eCommerce site for a plant shop to improve conversion
rate and user engagement

PROJECT OVERVIEW

Leaf & Clay - Plant Shop eCommerce

Background

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.

Business Goals:

  • Increase customer conversion

  • Improve browsing and checkout process

  • Boost sales on the eCommerce website

UX Techniques Used

  • Competitive Analysis

  • User Interview

  • Competitive Usability Testing

  • User Persona

  • User Flow

  • Wireframing and Prototyping

  • Usability testing and Iteration

My Role

  • UX Researcher

  • UI/UX Designer

  • Branding Design

  • Design Strategy

Tool Used

  • Figma

  • Miro

  • Photoshop

  • Illustrator

Timeline

90 hours solo UX project

The Solution

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.

COVID-19 sparks new growth in millennial 'plant parents'.
Unfortunately, Leaf & Clay is failing to convert the customers!

DESIGN PROCESS

UNDERSTAND
Evan Young and Emily Moccero's plant-filled Airbnb, which is decorated by over 80 different house plants. Source: LancasterOnline

Evan Young and Emily Moccero's plant-filled Airbnb, which is decorated by over 80 different house plants. Source: LancasterOnline

CUSTOMER PROFILE

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

“Spurred on by social media and the wellbeing craze, millennials have fallen in love with indoor plants!”
according to a 2019 trends report from Kennett Square-based Garden Media Group.

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

Click here to view the full report.

OBSERVE

SURVEY

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

User Interview

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.

Participant is trying out competitor's website

Participant is trying out competitor's website

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.

Competitive Analysis Based on Competitive Usability Testing

Competitive Analysis Based on Competitive Usability Testing

DEFINE

DEFINE USERS GOALS

User Personas

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.

Leaf & Clay - Plant Shop eCommerce

USER RESEARCH HIGHLIGHTS

Key Features

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:

  • Guest checkout

  • Reviews & Photos

  • Mix & Match Plants and Pots

  • Compelling Product Page

IDEATE

USER FLOW

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. 

Leaf & Clay - Plant Shop eCommerce
Initial hand sketches for Homepage, Product List and Product Detail Page.

Initial hand sketches for Homepage, Product List and Product Detail Page.

SKETCHING

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.

PROTOTYPE AND TEST

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.

Key Findings

After the 1st round of usability testing, here are some major issues that I would like to address later in the design

  1. How can I bring seasonal promotions to the website to attract user’s attention?

  2. 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?

  3. 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?

  4. 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.

Click here for the full version of the wireframes

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.

Leaf & Clay - Plant Shop eCommerce

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.

Click here for enlarged files.

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.

Key Findings

100%

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.

80%

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.

60%

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.

Leaf & Clay - Plant Shop eCommerce

Leaf & Clay - Plant Shop eCommerce
SOLVING E-COMMERCE UX CHALLENGES

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.

Leaf & Clay - Plant Shop eCommerce

Effective Use of Popups in eCommerce

The Problem:

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.

The Result:

  • 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.

Leaf & Clay - Plant Shop eCommerce

Smart Recirculation Brings Convenience to Plant Shopper

The Problem:

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.

The Result:

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.

Leaf & Clay - Plant Shop eCommerce

Connect with Customers and Build Trust

The Problem:

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?

The Solutions: 

  • 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.

The Results:

  • 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

FINAL THOUGHTS

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?

WHAT NOW?

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.

CLICKABLE PROTOTYPE

Feel free to interact with the final clickable prototype following this task flow which is identified as the key route for my personas.

  1. As a first-time shopper on this website, you would like to explore indoor plants for beginner

  2. You would like to know more about the ZZ plant

  3. 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

  4. You would like to claim the $10 off first order coupon before proceeding to checkout

  5. Proceed to checkout and place the order

10
Iterations
17
User Testings
42
Screens
40%
More Plant Parents
"As a plant parent myself, this site is exactly what I am looking for!"
said Carol after the usability testing
Leaf & Clay - Plant Shop eCommerce