Timbertech
TimberTech and its parent company, Azek, were merging into one consumer brand. This meant re-introducing TimberTech to the market as a technologically superior choice to their competition. With the brand in flux we had the imposing task of consolidating two disparate site experiences, and coming up with an IA solution to effectively blend multiple product lines.
Role
Product Design Lead
Team
Strategy
UI Designer
Content Strategy
CMS Architect
Front-End Developer
Goal Setting
In order to gain alignment with stakeholders, we began with deep dives, workshops, current state analysis, and landscape analysis stakeholder interviews. This allowed us to set the stage for the work to come.
OUTPUT:
Key Goals
Discovery & Definition
Time was of the essence as the new brand launch was quickly approaching. So we conducted lean, but thorough, discovery to in order to rapidly move into defining the solution.
OUTPUT:
Competitive & Comparative Analysis
Data Analysis
Target Market Definition
Framework Definition
Competitive & comparative analysis
We saw an opportunity to analyze comparative sites—which were more editorial and had a lower barrier to checkout—rather than competitive sites that felt contrived and hard to navigate.
site analytics analysis
We gathered data on user behavior for a baseline to measure success and gathered insights we could use to improve the experience.
Target market definition
Through interviews, we defined the target market and their behaviors in order to paint a picture of who we needed to design for.
framework definition
Based on analytics and interviews with the target market, we focused on reducing friction along the journey and enforced a framework for content, guidance, and clear calls to action.
IA Modeling
Because we were merging two experiences and product lines into one, we wanted to explore and test various ways of navigating and showcasing information.
OUTPUT:
IA Framework
Testing Results
Site Flow
Sketching & experiementation
We started sketching and whiteboarding to explore various models to support the experience.
Testing
We tested two models with the target market—journey-centric and product first—to acquire learnings and steer the direction of the framework.
Site Flow
With results and learnings from testing we moved forward to define the site flow, highlighting important calls to action along the way.
Designing a System
In order to hit the ever-closer deadline and work more agile, we bypassed traditional wireframing and instead started with journey flows, components, and building a design system.
OUTPUT:
Design System
Flows
Templates
Journey flows
Flows that aligned to the framework were created to map components and every flow needed to support the customer journey.
We began designing components that mapped to journey flows
From the framework, components, journey and site flows we created common templates.
We brought in moments of delight to take users down paths that they might want to come back to.
And got out of the way of users when it mattered most.
Testing & Iterating
Testing surfaced three areas of confusion: understanding of railing packages, findability of product details, and how to get support.
OUTPUT:
Testing Results
Iterative Design Comps
Outcomes
144% increase in mobile usage
The biggest goal-completion on mobile is requesting a quote.
460% Increase in leads
There is now the ability to qualify leads through capture forms, and leads are more strategically contacted by registered contractors.
“The team’s ability to think strategically, work quickly, and deliver on very tight timelines was very impressive. We could not be more pleased with the result of our collaboration—a state-of-the-art website and digital strategy that represent a huge step in the evolution of AZEK and TimberTech.”
-TimberTech client
