Website Redesign
Landing Page Design • Personas • Wireframes • User Interface • Prototyping
Company Overview
American Standard has a strong reputation for providing reliable, energy-efficient air conditioning units. The Trane company is renowned for high-quality, energy-efficient, quiet and reasonably priced units that also adapt to suit every need. American Standard is among the top HVAC companies in the market.
My Contributions
As the lead product designer on this project, I was involved in everything from defining the brand and personas, creating flows, user testing, wireframes, all the way to creating final UI designs.
The Content Audit
I started off the project by mapping out the current information architecture of the website and worked with the team to change the layout of information in a way that is more intuitive and user-friendly. In purple are the elements in the previous navigation of the website, and below them the pages of the corresponding drop-downs. This was done in order to ensure that once the user visits the site, they can find the information they need quickly and in an easy to understand manner.
New State
After the analysis of the current website state, it became apparent that the website would benefit from a restructuring. Outlined in purple are the sections that we moved, and in pink are the sections we added to further create an intuitive and easy to navigate website. For example, we noticed from our research that users were having difficulty understanding how to find pricing information, so we added pricing in the navigation. After a card sorting test, we renamed buyers guide to “Getting Started” because we found users associate those particular resources with that verbiage.
Laying out the Content
After identifying the updated content structure for the website, I began wireframing how this content could be put into sections. The focus for this exercise was to showcase the content in a way that met both business goals (getting users to join focus rooms) and user goals (gaining an understanding of how the platform works). Once the layout was identified in a way that prioritized important content and created a user friendly experience, I dove in to high fidelity designs to focus on the visuals. The final designs can be found under the redesign section.
Curating a Design System in Figma
One of my favorite parts of this project was structuring the design system that would go on to be used across all 4 Trane brands. I followed the Atomic Design Methodology while creating the design system and utilized things like auto layout and bullion values when creating components.
It was important for me to have a solid foundation with rules, guidelines, and best practices for our design system. It’s not just the icons and buttons, but how each element interacts with each other for the best usability possible. With a standardized multi-brand design system in place, the design process was more efficient and consistent.
Final UI Designs
The final UI was based off the new brand standards Trane and M-Tech finalized together. American Standard relies more heavily on lifestyle imagery than the primary Trane brand. This was a direction Trane did not want to deviate from. We were able to add a few more colors and introduce a new font and iconography. Overall 60+ screens had to be redesigned with new brand standards and content.
HVAC Product Pages
Landing Page Design • Personas • Wireframes • User Interface • Prototyping
Company Overview
The goal of this project was to redesign the Trane Technologies product pages which would be implemented across all of Trane’s HVAC brands including Trane and American Standard. These product pages need new filtering options as well as an easy way to compare multiple units. These product pages display pricing information and valuable rebate information and are one of the primary OKRs when it comes to generating leads.
My Contributions
As the lead product designer on this project, I was involved in everything from defining the brand and personas, creating flows, user testing, wireframes, all the way to creating final UI designs.
Wireframing
After we defined the problems with the product pages, we found there was no easy way to compare units within the same category. I proceeded with wireframes that had a dropdown functionality containing some high level stats of each unit. We ran these wireframes through usertesting.com and were able to find out the characteristics of each unit users cared about the most and the ones they had trouble understanding.
Final UI Designs
After the wireframes were complete, I was able to validate some of my design decisions through more unmoderated user-testing. These users were selected based on survey questions that correlated with our personas from the dealer locator. The filter options proved to be intuitive as we as the dropdown for more details. Adding more educational content to each category helped users better understand the systems they were looking at.
