menu

Work

Contact👋

Stance.com

An Uncommon Staple

As UX Designer for Stance's DTC team, I'd been given the opportunity to take a fresh replatform and fine-tune the interaction and user experience to maximize both conversion and brand presence.

The Opportunity

Fine-tune The Replatform

Our task was a broad directive: to improve the overall UX of the site while maintaining performance of a brand new platform that needed the space to shake off its initial growing pains. There was a lot of manual work being put into merchandising the site and generating pages. Ultimately we knew we needed the site to respond to user input instead of serve up static data based on manual grunt work. That meant working with the merchandising and product teams to get the right data in the system so that we'd have the flexibility on the front-end. It also meant working with our development team to get the front-end templating logic set up to successfully by as flexible as we needed.

Dynamic Merchendising Tiles

Cutting Brute Force Production Time

One of the first pieces we wanted to tackle was the amount of time our production team spent cropping images for display. In order to satisfy all potential locations a story or product was to appear on-site or in email promotion, our team needed to crop five unique sizes. A quick win for us was to adjust the way images are served up on the front-end of the site to make them dynamically cropped and optimized for device no matter where they live on Stance.com - effectively reducing the amount of crops needed per story from five to one. What's more, is that the only "crop" needed now was the original aspect ratio received from the creative team. And so to take it one step further, we developed a script that ingested the output of the creative shoot and automatically optimized the asset so it would be ready for use everywhere. Our time spent on asset production was reduced by over 80%.

The Product Listing Page

Making The Manual Grid Dynamic

At most, 30% of Stance.com's traffic comes through the homepage. That means that the majority of users visiting the site are driven there from a specific search or social media ad. Which, in turns means that the product listing page does a lot of the heavy lifting as a landing page. We needed this page to be as dynamic as possible, allowing our performance marketing and costomer acquisition teams to drive to a very specific subset of products depending on the audience segment they are targeting.

Old Product Listing Page

It was important to be able to generate an attribute-driven product listing grid, allowing for endless product groupings and dynamic filtering priorities without manual effort.

The new product grid is generated based on product attributes instead of hard-fixed product category groupings. It also prioritizes certain filters based on relevance and hides less helpful options, giving the user a clearer path to finding what they need. Testing through iterations of the new page gave us the insights needed to make other decisions like removing the top banner from most product listing pages. Unless providing larger category breakdown or product eduction, the photo banner proved to merely take up valuable screen real estate for product and, in effect, hurting conversion.

The Product Tile

From Sock Image to Cross-Category Converting Component

As we expanded into other categories beyond socks, evolving the product tile involved a redesign that would accommodate a product image shot in studio and on model. A refactored aspect ratio and background allowed the tiles to be closer and larger - giving the user a bigger and better look at the product. A quick-add feature replaced the quick-view function to allow for shopping directly from the product listing page.

With over 60% of Stance.com's website traffic on mobile devices, "mobile first" is more gospel than guiding principle.

Stats & Data

Living By The Numbers

All of these improvements mean nothing if we don't have results to show for it. These efforts were not just to fine-tune the look and UI of Stance.com. Far and away the primary goal was to get the site to a point where it was working at a much smarter level, opening up tools and opportunities for external teams (i.e., customer acquisition, performance marketing, social, etc.) to leverage ways to target consumers. Through this process we setup a UX framework where granular adjustments to product display can be made dynamically and even the smallest components can be A/B tested easily and quickly iterated on. As a net result, we've seen improvements across all metrics - conversion, average order value, session value, and revenue - and we continue to test and iterate daily.

🤘 Thanks for stopping by.