Leaves of Leisure website redesign

I was hired by the site owner to redesign this site in time for Black Friday shoppers. She created it herself on Shopify and reached out when it became challenging to develop a site that would serve her needs, increase sales, and delight shoppers.

Audit

I conducted an audit to identify the most important UX and business goals, to discover what was already working and where the were breakdowns in the user journey, and to address the brand's key values.

Before conducting User Interviews, the following evaluations were completed with the site owner.

Business Goals

What actions do you want your site visitors to take on the site? - make a purchase, sign up for newsletter, read the blog.

What is your most important business goal? Sales.

What are the brand's most important values that need to be communicated? Products are Sustainably and Ethically Sourced, Organic, Vegan, and Kosher Certified.

Customer Journey

What are the weakest points in the customer journey? Through conducting User Interviews, we discovered 3 weak points.

The More tab leads to a blank green screen with no instruction.
The green paragraph text doesn't pass a WEBAim Contrast Check and one user in our test had an extremely difficult time reading it.
The SHOP OUR TEAS and PRODUCT PAGES had extraneous images that were not uniform in size, creating imbalance and difficulty in distinguishing between clickable and non-clickable elements.

What are the strongest points in the customer journey?

Professionally written copy
product photos
brand kit / colors.

Usability

User needs fulfilled - there are frequent breakdowns in the users journey to purchases. In user interviews, many test customers had frustrations in finding information and reaching the point of sale in a timely manner.
Site navigation does not inhibit customer journey - Site navigation is inconsistent with the More button leading to a blank page rather than easily revealing additional pages.
Page content (copy, etc.) is in line with customer journey - copy is written professionally in a casual, friendly tone in line with the brand's personas and target audience.
Site search is easily accessible - There is no search bar.
Formatting is clear and considerate of customer journey / accessibility - green text does not passing accessibility evaluation.
Mobile evaluation - The current mobile site is responsive and limited only to the same issues occurring in the desktop site.

Problem

After conducting a full audit, I and the business owner (stakeholder) determined that we wanted to conduct a Findability test with Users and consider some accessibility updates.

User Testing

We recruited 5 users to walk through the following questions.

What steps would you take to find a tea that has the benefits of balancing hormones?
Where would you go to find more information about drinking and brewing tea?
Walk me through the steps you would take to contact someone if you have a question.

And then they were asked to complete the following tasks. The process was timed and then the same process was repeated on the new site.

1. Add three separate items of your choice to your cart.

2. Decide to look for a 4th item.

3. Change your mind and return to your cart.

4. Begin the checkout process.

The purpose was to uncover specific issues contributing to the breakdown of the user journey. Each session was timed and compared to similar sessions after improvement are made.

minutes.

Journey Map

Findings

Our User Interviews uncovered several Findability issues that and we decided to focus on those as well as a few accessibility and aesthetic issues. Here's what we discovered.

None of the participants found the product that has the benefit of balancing hormones, at least not when they were looking for it. One found it later when they were looking for something different.
Each of them found the Tea Talk, the Leaves of Leisure blog, to find more information about brewing and drinking tea.
Finding the Contact page was a bit more challenging. Two participants followed the More button and found the Contact page right away. One searched the Home screen for a bit, scrolled to the bottom and eventually clicked the FAQs link. On that page, they did find a contact email, which would also complete the task. The other 2 eventually found the Contact page after browsing the site for a few minutes and entered it through the More page from a Product Page.
Add to Cart - All participants were able to complete this string of tasks between 2:15 minutes and 8:04 minutes.

Recommendations

Make Announcement Bar more prominent by adding one of the brand's colors.
Change any green text to black, leaving the green color as an accent.
Add a Search function to to top of each screen.
Center the navigation leaving room for all of the site pages and eliminate the More button.
Eliminate the blank green page linked to the More page.
Remove extraneous images from the Home Screen and Product Pages.
Flatten images for faster load times.
Move product grids to the top of the Home Screen as Product Sales are the primary business goal.
Create a library of blog imagery templates that are consistent so that the blog grid is uniform.
Site has been featured in other publications; create an As Seen In section on the Home Screen.
Remove duplicate menu from the Footer.
Resize all Product Images to create balance and consistency.
Move all text on Product pages to one location on the product page and increase text size.
Add Organic, Kosher, Sustainably Sourced, and Vegan Badges to the product pages since these features are important brand values.

Home Page

The entire site was making use of green text as seen in the announcement bar. This color against the white background and paired with the other brand colors was not passing WebAIM accessibility. As this green was already an established brand color and prominent in the product packaging, it was agreed that it would remain in the Leaves of Leisure style guide but that it would only act as an accent on the website. We changed the Announcement Bar to a deep pink with black text and carried the Announcement Bar across all site pages instead of just on the Home Page

We also centered the Menu and adjusted it so that all Pages are visible, eliminating the More button that was proving to be problematic.

Finally, a Search bar was added to the top right to improve usability, speed of use, and easy of shopping.

Shop Our Teas

The imagery on the Shop Our Teas page were added in several different sizes which was affecting their alignment. I resized them and created a hover state image to make the process interactive and to make it clear that the image is clickable, in addition to the button under the image. Finally, adding the images to a Shopify Product Grid created a container to make sure that each product image and item in the shop all behave similarly.

Products

We removed the extraneous images that didn't lead to anywhere and replaced them with other product images. All text, was included in the product description including Ingredients, Benefits and the Countries where the teas are sourced. All imagery has been compressed for optimal load times and all images are a consistent size.

A list of Ingredients, where the ingredients were sourced, and the caffeine level is now included in a box below the product images where the information can be found more easily.

A row of badges was included to each product page to indicate that each product is Sustainably & Ethically Sources, Certified Kosher, Certified Organic, and Vegan.

The Reviews were also moved from the Home Screen to the Product page.

Conclusion

After implementing recommendations we ran a second round of user studies using the similar questions and tasks from the first round.

All participants were able to find a tea that helps balance hormones. 3 of them used the new Search bar which returned the product and a blog post that featured the product so either result got them the information. The other 3 went directly for the Shop and searched the products. With the information placed prominently, it was easily found.
Each of them found the Tea Talk, the Leaves of Leisure blog, to find re information about brewing and drinking tea.
The Contact Page is now linked in the top Navigation menu and was found immediately by all particiapnts.
Add to Cart - All participants were able to complete this string of tasks between 90 seconds and 4:48 minutes which was an improvement over 1:15 minutes and 8:04 minutes from the previous test.
Sales increased by over 800% from November to December, however it is worth noting that much of this is likely due to holiday shopping so we continue to monitor.

Before & After - Full Home Screen

Visit Leaves of Leisure

Let's Work Together!

I'm always looking for new and exciting opportunities. Reaching me is easy! The best way to get to me right away is through email.

Open to freelance, contract, part and full time opportunities.

hello@jenifer.tv