The Essential Homepage

〰️

The Essential Homepage 〰️

The Essential Homepage

Redesigning the homepage to be more dynamic and discoverable to improve membership retention and conversion.

Role

Project Lead
Lead Designer

Year

2022 - 2024

Disciplines

UX/UI
Product Strategy
Visual Direction
Graphic Design

Introduction

Converting new members and membership retention is deeply tied to how many products are in the store so the website has to lead with strong visuals and make the products discoverable. At this point, the store had 2,000+ products.

To improve membership retention & conversion, we decided to transform the homepage. The homepage is the landing page for members and non-members so it is vital that everything presented is new and easy to access.

I was the project lead and in charge of designing the homepage, implementing and adjusting new features, and creating dynamic collections on the back end to automatically populate the homepage.

Challenges

How can we bring attention to other products that are not recent drops?

How can we design a varied store to be easier to navigate?

How can we design the homepage to be visually rich and easily shop-able?

How can we create a sense of fullness - as measured by retention rates, conversion rates, and average order value?

50% of customers shop on mobile while 50% of customers shop on desktop or tablet - optimize design for both

The Old Home

A look into the old homepage in both mobile & desktop format

Mobile
old version

Desktop
old version

Homepage Metrics
old version

Conversion Rate

Add to Cart Rate

Average Order Value

Homepage Audit & Insights

Utilizing customer feedback,
user testing, & heatmaps

  • “I only use the navigation and search to find products. I don’t really scroll on the homepage, the only time I do is when the email leads me to the homepage - I will then click on the shop now or try now button.”

    Davis M.
    A working professional

  • “I was underwhelmed by the selection and availability of products. I would shop the store only to be disappointed when I would go into the product page and find out that the product was out of stock.”

    Fran C.
    Stay at home mother of 2

  • “I think overall the homepage could be personalized. If the products that show up could be relevant to what I’m interested in....Also, I like when other websites have the wishlist feature. Can you do something like that too? ”

    Jason P.
    A working professional

Homepage Heatmap

The old version was designed with the intention of being able to shop the entire store however according to the scroll heatmap, we found that rarely anyone was scrolling to the bottom of the page.

Newest from The Essential

This collection was at one point linked on the website and customers were able to use that to see everything the store had to offer organized from new to old. However, this had been removed at one point during a navigation restructure and to our surprise, it was still one of the most visited page.

A New Home

Installing new theme, implementing custom interactions & integrating new apps

01

Create more sunlight for daily drops

Banners are used to bring attention to new product drops. But if we are launching products daily, the previous drops lose the attention.

Add product icons of previous drops that work as the slider buttons. Customers can now see a visual representation of the past drops they might’ve missed.

02

Product Tags

Inventory is always moving around on The Essential and products are always coming back in stock, going on sale, or in limited condition and customers have no way of knowing this at all.

Add product tags on the back end so prospects can easily identify when new products come in or the are out of stock, on sale, best selling, etc.

03

Dynamic & Custom Collections

The homepage is stacked with collections from the entire store but they remain stagnant and never changing which hurts discoverability and AOV.

The new homepage design is no longer stagnant and now a curated and condensed grid of all the main collections. When a customer enters, the collections populate with new products each time which keeps the homepage fresh and improves discoverability of the entire store.

04

Wishlist & Quickview

Is there a way to continue the experience after a customer decides they’re not ready to purchase a product yet or the product is out of stock?

Can we design the homepage to be shop-able without having to leave?

Added a wishlist feature to overall website for customers to save products and be notified when products come back in stock.

Added a function for customers to easily view more information on an interesting product as well as easily add to cart without leaving the homepage.

05

View All

Data shows that customers are finding unlinked pages where the entire catalogue can be shopped. It is the 6th most visited page.

Created a view all section on the navigation so everything can be shop-able and discovered on one page with an infinite scroll. Customers can toggle between 1 view, 3 view, and 6 view grid to scale in an out to see the larger breadth of the store or zoom in to see a product with a bit more information.

What Difference Was Made?

Homepage Metrics

Conversion Rate
+1.2% Increase

Add to Cart Rate
+3.8% Increase

Average Order Value
+$16.95 Increase

Conclusion

There’s a lot more that could be done with the homepage design. Some areas are still left uncovered: view options of the grid, adding fun extra features like a discovery quiz, product randomizer, etc.

We were able to improve conversion rate, retention rate, and AOV through: visually displaying past drops, showcasing an array of different aisles, condensing and re-organizing the aisles, bringing attention to themed & relevant collections, making the homepage shop-able, and making sure the store was optimized for both mobile and desktop.

Please note, the UI and animations in this portfolio have been updated to reflect my current standards.