LEARNING AND STYLING WEB EXPERIENCE
Trex is a leader in the composite decking industry but with a tagline like, “there are endless possibilities”, their consumers are casted into a world of overwhelming confusion and anxiety. While the customization and color options are a pro when stacked against their competitors, Trex wasn’t taking a stance on how to put the pieces together stylistically to create an ideal outdoor space. Also, decking and railing being sold sequentially and having assigned sub-brand names leads to even more confusion. They have already successfully proven the quality and performance of their product, but the strategy needed to evolve.
I worked with a Creative Director, a copy writer, and another designer to concept the looks and strategize the brand’s positioning.
Strategy, UX and UI design.
Trex’s primary demographic is middle to upper class women.
There are 18 decking colors with three sub-brands and 11 railing colors with three sub-brands with various customizable components.
Consumers purchase Trex via a big box store or through a contractor.
Through focus groups, Trex learned that customers didn’t understand the differences between the sub-brands and that railing was an after-thought when building a deck.
People shop by style. They see their decking and railing as an extension of their home and they want to understand how these components can be paired together to reflect their personality and personal style. Building a deck is surely a functional job but consumers are trying to fulfill an emotional job when they make this purchasing decision.
When there is inclement weather, I want my deck to stand the test of time so I don’t have to pay to build another one.
When I host parties with friends and family, I want them to feel welcomed and comfortable so that they will want to come back.
What if we thought about a deck the same way we thought about decorating our living room? A deck is an extension of one’s home that requires the same kind of style and design-oriented decisions. Customers aren’t just building Trex. They are shopping for Trex. Trex needs to become a style authority and offer real recommendations.
To ensure we weren’t neglecting style “types”, we first had to identify what the style descriptors were. To avoid duplication and ensure equal representation of the style descriptors, we created a system for assigning styles to three core looks to choose your decking with your railing: Coordinate it, Contrast it, and Change it up. Based on research of what type of customers prefer certain colors over others, we were able to informatively assign style descriptors. While only five premium colors were chosen for launch, we had to plan for scale.
Customers are confused by required componentry and another layer of confusion is added when these components are all customizable. In this experience, it was important to educate and then inspire. An interactive experience allows the user to explore each component, learn what their functional need is, and get ideas for how they can add their own flavor to it.
Our hypothesis was that customers shop color first, not sub-brand first. Through a sticky color navigator, customers can quickly jump between the premium color options to see the decking and railing pairs that are categorized by the core looks and styled based on the descriptors. In order to accommodate for a customer that doesn’t resonate with the way the decking and railing was styled, they have the ability to view a close-up of the bare duo with no props.
To turn a decking a railing duo into a transaction, customers can “Get the Look” by sharing a Trex provided tear sheet of the required componentry with a contractor or take it to a big box store. Since big box can be a confusing experience for customers, the tear sheet is as explicit as possible regarding the building materials so an employee who isn’t familiar with Trex can still help.
Trex’s new positioning needed a human touch. In order to gain credibility and trust with customers, Trex had to establish themselves as design authorities. In addition to being known for high-performance decking, they needed to be known for being able to provide styling inspiration that was curated by a team of people who are qualified and thoughtful.
Since this immersive experience had unique interactions, it was imperative to design for different devices to ensure the experience wasn’t sacrificed. Since this was a consideration early on, the art director of the photoshoot and I worked closely together to set an image ratio so there wouldn’t be any unexpected cropping that would prevent a user from seeing a duo.
While we weren’t able to remove the sub-brand architecture, we successfully were able to change Trex from a build to design culture. Customers were excited and inspired by the Trex Looks and could easily shop for decking and railing at the same time. Our work didn’t end here though. Customers associate the whole end-to-end shopping experience with Trex, even though a big box store is a separate entity. Our next challenge was to mend the disconnected experience in a big box store, even though they were not our client. We also had to translate this design culture shift to other collateral.
It became apparent that Trex needed a bigger presence outside of big box stores. The launch of Trex Looks allowed my team to reimagine how customers can access Trex and what that experience was. ShopTrex, their e-commerce site, allowed consumers to order board samples to better shop for all 18 colors. The board sample, to prove that Trex can withstand even the postal service, is mailed without packaging. The messaging provides suggestions for what to do with the board sample and what the next step is if they like the color.
Trex can’t replace the big box experience, but they can make it better. With our partnership with Stuzo, we designed a mobile intercept that aided consumers when they were shopping in big box stores. Through testing this concept, we learned that potential customers will visit Trex.com on their mobile device after they had already decided that they wanted Trex. The content strategy for making a transaction versus discovering the product is vastly different.