Redesigning Category Landing Pages
Balancing user and brand needs.
Problems to Solve
There are 6 pages that serve as homepages for each of the links in our top navigation on site: Men, Women, Kids, Work, Western, and English.
Many teams, such as marketing, product, & site merchandising, all have strong opinions and priorities on how these pages should function for the customer.
With these pages having a high bounce rate, low conversion rate, low engagement rates, and being high effort for many teams to create, we needed to rethink the purpose and layout of these pages.
Measurement of Success
Bounce Rate: Reduce bounce rate from landing pages by 4%
Time on Page: Increase time on page by 6%
Conversion Rate: Increase conversion rate by 5%
Revenue: Increase category revenue by 6%
Average Order Value: Increase average order value by 5%
Unfortunately, this project didn't launch due to shifting business priorities. However, based on thorough user studies and behavior analysis, it was anticipated to meet the business objectives.
Throughout the project, I gained valuable insights by conducting customer research, building user flows, and providing design recommendations based on customer behavior. This process also facilitated the development of my skills in the research and design journey. It provided me with a deeper understanding of user behavior, empowering me to leverage customer feedback for future projects.
Research Methodologies
Tools Used: Google Analytics, FullStory, Figma/Figjam
Competitive Analysis
One commonality that many other sites had on their category landing pages was that they focused on highlighting not only key and seasonally relevant categories, but also their iconic/trendy styles. These pages provided a high level overview of the brands and seemed to focus on both educating and introducing their products to customers.
10 sites ranging from direct competitors to more mainstream clothing brands were studied as part of this analysis. Examples include Alo, Nike, and Figs.
FullStory Heatmaps and Watching Customer Sessions
Findings:
By watching customer sessions, I discovered that many customers land on the pages and then immediately go to the primary navigation to go directly to to PLPs and begin their shopping experience.
Heatmaps showed that 25% of customers dropped off the page before making it to the end of the hero.
Interestingly, the gender pages (men/women) had a deeper average scroll depth than the activity pages (Work/Western/English.)
Activity Pages
Gender Pages
Hypothesis:
Customers were not seeing what they expected when they landed on these pages. They were clicking on “View all Women” from the secondary navigation on mobile or the “Women” navigation point in the primary navigation on desktop. They then landed on the Women’s landing page where they quickly lost interest and clicked off the page or clicked the first call-to-action on the page so they can continue their shopping journey, quicker.
Throughout the customer journey, customers primarily shop by their gender, which leads me to believe they’re more motivated to explore a landing page when they know it’s relevant to them.
Google Analytics
Google Analytics shows that most inbound traffic to these pages comes from paid search, which means these users need to be served a branded experience to introduce them to Ariat. Additionally, some users navigate directly directly to these pages by clicking on the primary navigation.
Stakeholder Interviews
In the past these pages have been a source of contention as many teams have competing ideas on how they should be handled. My goal with these discussions was to better understand each team’s goals in the hopes of finding and understanding top priorities to discover overlaps in their thoughts/opinions to focus on for the redesign.
I met with product and marketing team members who specialize in the direct-to-consumer side of the business to understand how they view these pages, what they are looking for, and what are priorities for the company in the upcoming year that should be considered in the design.
As part of the site merchandising team, I also took into account our priorities and data that we have.
User Flows
After working through the flows, I wanted to rethink how we approach the Western and English pages. Ariat treats Western and English as separate categories with a separate audience; however, we know from navigation data that the large majority of our users shop through the gender navigation tabs so people who are bypassing the gender navigation to shop through these two pages are looking for a wholistic English or Western journey. With this is mind, I want the experience to reflect how users want to shop.
Research Outcomes
Multiple User Personas and Flows
All landing pages are very similar in layout and content, but based on customers behavior, each activity needs to be adjusted to highlight key products and stories for that customer segment.
Include Product Recommenders
Product recommenders have high conversion rates. By including one or two product recommenders that are automated using AI, it would help boost overall page conversion with a low level of effort.
Focus on Collections & Key Product Categories
Product teams stressed that right now their goals are to promote specific categories that they want to show customers that we are a serious brand in. Marketing and product teams also want an area where we can quickly add a callout for a collection that is not meeting expectations in terms of sales throughout the season.
Create Opportunities for Product Curation
Product teams are looking for a space to showcase key styles, rather than just show customers an entire assortment.
Shorten Page Length
With users barely scrolling down the page, we have the goal to create a more efficient and succinct page. In particular, I want to shorten the hero images so customers see more than just an image when they first land on the page (on mobile.)
With scroll depth being lower on the activity pages, these should be extra short and concise. More of the company’s energy should be put toward the gender pages.
Initial Mock-Ups
Key Features
First module on the pages links to top level footwear/clothing/accessories for the respective customer group for those who want to immediately jump into product.
Each page offers a banner for product & marketing teams to choose a key collection to highlight on the page.
Work has a module to highlight specific specialty boot collections, and English has a module to highlight English Show categories.
Design Reviews
I did multiple rounds of design reviews which included stakeholders from product, marketing, operations, and UX teams. Overall feedback was positive; some had hesitation on removing collections and product categories from the landing pages. In order to address their concerns and get their buy-in, I showed all the areas that were duplicative of our navigation and explained that by removing these duplicative pieces from the landing pages, the key collections the brand was pushing would get even more of a spotlight on the page.
Some key points of feedback I needed to consider when creating final designs:
Find a space to include the ‘Best For’ initiative because it will launch around the same time as these pages go up.
Include personalization on the pages because personalization is a priority to the senior team at the company.
Switch the promo banner out for a different module on the gender pages because it looks awkward.
Final Prototypes
Work, Default and Personalized
Western, Default and Personalized
English, Default and Personalized
Key Changes
Switched in a banner at the top of the gendered pages, still shorter than the typical hero
Additional product recommender on gendered pages
The first Work/Western/English modules will be personalized
Western/English defaults will have the same links as my initial mockup, but women’s & men’s personalized versions will have 5 gender specific links
Work is similar but the links will all be for the ‘Best For’ initiative in the personalized versions
Added an additional module on Western to showcase key styles from the collection featured in the banner directly above - rather than hide all products behind a banner, I want to bring some directly to the customer and product teams can curate the products shown here
Launch & Learn
While the project didn't progress to launch, I had planned a comprehensive post-launch analysis strategy to gain insights into user behavior and optimize the experience. Some of the key metrics I intended to track include:
Bounce Rate: Understanding if users landing on the page found what they expected and if the initial modules were enticing enough to encourage further engagement.
Scroll Depth: Assessing whether the content met user expectations and if it was compelling enough to encourage continued exploration of the page.
Module Click Through Rates: Identifying user patterns and preferences by analyzing how specific content was engaged with. Unfortunately, at the time of the redesign, our CTR data collection was not functioning correctly, but this would have been a priority post-launch.
Conversion Rate/Associated Revenue: Evaluating whether the pages contributed effectively to the customer journey and if they positively impacted conversion rates and associated revenue.
Although I couldn't execute this analysis due to the project not launching, I believe that implementing these metrics post-launch would have provided valuable insights for further optimization and refinement of the user experience.