Z SUPPLY Active Collection Page

Z SUPPLY’s newest activewear division.

TIMELINE:
1.5 Months

TEAM:
Z SUPPLY e-commerce team

MY ROLE:
Product Designer, Project Manager

TOOLS:
Figma, Adobe Photoshop, Asana, Hotjar, Google Analytics

THE NEED:

Online presence and home for our newest division launch, Z SUPPLY Active, with a new user flow for storytelling/education and upselling feature for consumers to complete their purchase.

01. THE PROBLEM

Based on previous workflows for campaign and division launches, users bypass our traditional dedicated landing page full of visual storytelling to shop the products. Our comprehensive task list entails a landing page that contains a visual layout of campaign imagery with a CTA to shop the collection.

After viewing data via Hotjar heatmaps and recordings, we’ve noticed a majority of our consumers are more motivated to shop the actual collection than to view the landing page. We saw this after reviewing the previous launch that many users click the CTA to shop the collection page right above the fold on the landing page, completely disregarding the rest of the landing page.

02. IDEATION + GOALS

We’ve concluded from our observation that our consumer base is highly motivated to shop rather than to view a gallery of imagery.

To not only meet business requirements of (1) including campaign imagery beyond the product images and (2) finding a way to provide fabric education, but accommodating our user trend in shopping, we decided to merge the two pages into one. We implemented strategic parts of the storytelling landing page within the collection page itself, breaking up rows of products with sections of visual collages. Nestled in between products are fabric cards that explain each fabric in the collection.

Adding on to what we discovered about our purchase-focused consumers, we also launched a “Pair With” component within the product display page so users have the ability to purchase the remaining parts of the outfit set. Not only does this prevent users from having to manually search for the rest of the outfit, but it yields itself to provide higher AOV opportunities for the business.

03. WIREFRAMING + PROTOTYPING

NEW COLLECTION LANDING PAGE:

My team and I wanted to have the right balance of visual creative, educational information, and features on site. We prioritized the hierarchy of information and features and supplemented them with creative assets as we content-chunked each section.

PRODUCT DISPLAY PAGE ENHANCEMENTS:

To make way for the upselling “Pair With” feature on each Activewear product, we decided to transform the description into a collapsible accordion from a standalone section. By doing this, this prevents the Pair With section from getting lost within the lengthy description panel.

Mobile:

Desktop:

RESULTS

Based on Google Analytics and Hotjar data from (1) the span of the week of launch and (2) the overall month, we saw:

  • An increase in session activity for the collection page, so users were engaging with the collection landing page longer and scrolling down to the end of the collection

  • A higher AOV based on the new Pair With tool

  • Higher click rates on the products that have video in the PDP on the collection landing page and products featured in the visual blocks

  • A more funneled user journey to the collection landing page versus to other pages (ie. our users were accessing the Activewear products from its respective category page, not as much through New Arrivals or Shop All).

KEY TAKEAWAYS

Z SUPPLY Active was one of my favorite division launches for Z SUPPLY. Not only was it the best opportunity to rework the user flow for our consumer shopping, activewear and athleisure in general were one of my favorite categories to work on in the industry. I was extremely pleased of our new workflow for digital launches based on analyzing the data from our previous launches, as with any UX/UI/product designer should. We’re constantly learning, assessing, testing, and validating, all above designing for our always-evolving users.