Little Leaf Shop

Usability and Information Architecture Redesign

Client

General Assembly

Date

April 2022

Services

UXD, Web Design

Deliverables

Website Prototype

Prototype

View



The Project

Little Leaf is a small boutique shop specializing in plants and lifestyle items based in the heart of DC. They focus on a calm aesthetic, beautiful foliage, and a carefully curated palette of products and plants. They have an established local delivery system and are trying to expand out to a national level. I was asked to test and evaluate the current website and create a prototype of some essential changes to the site.

The Process

Research & Synthesis
Initial Designs
Feedback
Iteration
The Final Design

‍

Before

After

User Research

Heuristic evaluation

I gathered volunteers to run through the process of browsing, selecting a product and checking out in order to gather data on pain points and areas of confusion.

Findings:

Inconsistent messaging and unclear copy differentiating shipping and delivery leads to user confusion

Despite the "DC delivery only" sticker not being present, there is a message on the product page saying that it is only available in the DC area.
In my research I found that I could ship this plant to California.

Competitive analysis

I created a feature inventory of five e-commerce websites to better understand what features or functionalities a user might expect when shopping online. I selected Home depot, Bloomscape, Walmart, Amazon, and Best Buy for this analysis.

Interviews

I interviewed 3 plant owners/buyers about their preferences and habits and built a persona around the key traits of these plant shoppers.

Findings:‍

Users wanted to be able to filter by size, then by level of attention
My interviewees already knew what they would want to buy before they start shopping
Users need to be able to trust the plant shop to take care of their products
Users want to be taught more about plants, both general information and specific care information for the plants they purchase.

Card sort

In doing the heuristic evaluation of Little Leaf, I realized that the product organization on the current website was one of the biggest pain points that users had when trying to shop for plants. With that in mind, I conducted a card sort.

I created digital notecards for each product using OptimalSort and asked 5 people to organize the products how they saw fit. They were given the ability to create as many groups as they wanted and were asked to label each group. Using the most common groupings as my guide, i created an updated map of the home page of Littleleafshop.com, this site map would eventually be used to redesign the header and global navigation of the website.

Redesign

Home page

The First iteration of the redesign brought a direct link to the local and non local filtered results, a trending products carousel and new product categories based on the results of the card sorting data. Other changes include:

Adding a more streamlined Cart system
Adding filters to results page
Adding plant care instructions under product information

Usability testing

After creating my first prototype, I brought it to 4 users for testing. I provided them with search criteria and then observed as they found a plant that fit the criteria, learned how to take care of it, and began the checkout process.

Iteration

Running usability tests on my initial prototype led me to 3 major design changes.

1. Show nationally available products by default

Because 100% of users expected that all items shown by default to be available to them, I made that the default view of the products page and created a banner to indicate that there are more plants available to those in the DMV.

2. Improving the filters UX

In order to encourage users to use result filtering, I increased their size and brought them closer to the results.

3. Increasing scannability and copy comprehension

Users would check the product details for the care instructions but after a quick scan, they would move on unsatisfied. I made some copy changes to make these paragraphs more scannable.

Final design

With these changes designed, my 2 week sprint ended and I presented this project to our instructor team at General Assembly. My next steps on this project would include a more detailed card sorting to refine the organization of products on the site, and an in depth analysis of all of the informational pages on the site to refine the copy. Additionally, further user testing for comprehension and usability should be run.

Chris (tofu) Benning