The homepage heatmap showed that most user traffic focuses on above-the-fold content, and fewer than 50% of visitors scroll below the fold - an opportunity to A/B test creative in above the fold carousel and refresh content. This also indicated that the best-selling products should be more prominently featured. The homepage did not highlight top-selling product lines but hid them within navigation.

Key Takeaways

1. Prioritizing key messages and product offerings will allow users to explore product offerings and find the right product(s) for them.
2. It is important to communicate the benefit of the product concisely. The product cards need to have more information about the benefits or concerns the product is addressing.
3. Surface bestsellers, new arrivals, and promotions.
4. Multiple banners are competing for attention, and there needs to be clear guidance on where to start, discover products, or connect with a consultant.

Feature Workshop

Rather than prioritizing features, we categorized them into high-level user scenarios based on user personas. At R+F, there are four types of users: anonymous, retail customers, PC (Preferred) customers, and consultants. We bucketed the user types into two persona groups: new users (anonymous) and returning users (RC, PC, and Consultants). By doing so, we could group content blocks into primary and secondary sections, which helped us focus on key content for each user type.

‍

Data Analysis

New users: Users known as “Trendsetter” tend to shop by product type and are not looking for a regimen. They are interested in what is new and don’t want a relationship with a consultant sponsor. Whereas “Loyal Solution Seeker” users look for what is proven to work, like to shop by concern, and are more willing to purchase a regimen. A Loyal Solution Seeker might be willing to work with a consultant.

Returning users: Trendsetters tend look for key ingredients and shop by product type or concern. They are not interested in regimens or connecting with a sponsor. Loyal Solution Seekers believe in expensive skincare and look for trustworthy brands. They shop by skin concern and will shop for regimens.

‍

Our team created a plan to enhance the parts of the homepage that needed improvement based on the research results. We held idea sketching workshops in which multiple team members simultaneously thought about each of the items that needed improvement and tried to produce the best UI sketch. We repeated this for two rounds and then had a vote to decide the design direction with everyone’s opinion included.

‍

Information Architecture

After the team had narrowed down the key features, we began to build the design by organizing modules based on user type. This feature list helped reduce scope creep and became our “source of truth.”

‍

‍

From Sketches to Wirefames

We used the UI sketches as a stepping stone to create the wireframes for each module. To ensure the modules are scaleable, we wireframed mobile breakpoint and then translated it to desktop.

Visual Translation

We leveraged core colors and assets provided by the Creative team in our design to create high-fidelity visuals.

‍

‍

New Features

We moved the Best Seller module up the page into the second position below the hero module so users could quickly discover the product offerings. Users could also see new arrivals and promotions to inspire browsing and deep dive into product pages. We added “shop by concern” and promotion modules to help users navigate to the product suitable for their needs.

We also added more carousels to mobile breakpoints so users could see essential information with minimal scrolling and risking turning people off from exploring. We increased the size and added product descriptions to the product cards so users could easily read the benefits and select the item.