Trex

Creating a responsive global site experience on a unified platform

My Role

Design System, Visual and UX Design

Team

Design Director, UX Designer, Project Manager, Business Analyst, Content Strategist, CMS Architect, FED

Timeline

16 weeks

Background

Trex is a leader in the composite decking industry with a holding of other composite outdoor products. They were looking to create a responsive global site experience on a unified and flexible platform. The new experience should be extendable across product lines and geographies, aid Trex content authors, and be architected to grow into a rich commerce experience over time. Their old platform was filled with one-off pages, inconsistencies across sub brand sites, and diffuclt for content authors to update due to lack of process and centralized hub.
‍
Our solution was to replatform into Adobe Experience Manager where all sub brands/properties would be housed under one roof and flexible templates/components provide their authors ultimate control. A new information architecture would be needed as well to organize the eco-system and reduce redundancy.

Process

The other designers, content strategist, and I did an audit of the sites to determine several things:
1. How many unique templates are employed and where can we consolidate
2. Are there any shared components between the Trex brand and the Shop Trex site
3. What components need to be redesigned due to brand inconsistency, usability failure, and/or stakeholder requests

From there we re-framed the pages into a simpler set of proposed components and templates. I worked with the UX designer to create wireframes for the page templates that would require a design overhaul since there was no precedent set for it in the current sites.

Outputs

Trex did not have any site design libraries so I worked on building a design system by recreating existing site components and designing new ones that we had determined were necessary from our audit. All components were documented within Spex, Trex's brand guideline tool, which included use cases and variations.

To reach an MVP, we worked in sprints for wireframing, design, and development. I worked on replicating the page templates, optimizing components where I was able to, and continually updating the design system.

Design System

Templates

E-commerce & DIY Tools

Outcome

Trex was able to reduce effort and cost of creating brand consistency across multiple web properties and geographies. Additionally, they increased efficiency and productivity of managing the site to ensure faster speed to market.

In terms of site metrics, contracting leads increased by 5x and there were 15k+ more samples ordered since launch.
‍
The work we did for this Phase 1 MVP set the foundations to continue onto Phase 2 which was planned for additional design and dev work for backlogged components and moving more sub brands into the main site hub.