Product Compare
Landing Page Design • Wireframes • User Interface • Prototyping
Project Overview
The goal of this project was to redesign the product comparison tool for Trane’s residential HVAC site. This tool will allow users to easily visualize different products and how they compare to one another in order to make an informed choice about the specific HVAC solution best for their situation. Ducker research showed that while in consideration phase users looked and asked for tools like product compare to help them decided between hvac units.
My Contributions
I was the lead product designer on this project and was responsible for the user research, user testing, developing the wireframes, and the final UI designs.
Market Research
I began this process by documenting our competitors product comparison tables. I also looked into how other industry leaders, such as Amazon and Apple, approached their product compare tables. I found our competitors use tables that are very content heavy but don’t provide insight into the technical terminology. However, our competitors were using product ratings which I felt was necessary.
User Journey
Establishing the user journey begins on the product hub pages. Once a user clicks on the compare check box, a bottom bar appears with the selected products. The user is then takes to the compare page where they can easily swap out units in the same category. The product comparison tool will allow users to easily visualize different products and how they compare to one another in order to make an informed choice about the specific HVAC solution best for their situation.
User Testing the Current Design
After the user Journey was established, it was time to validate and improve the current design. I looked at what works, what doesn’t work, what can I can improve?
I Conducted 10 unmoderated users interviews and discovered that users felt the current tool did the job but could be improved by adding pricing, product ratings and allowing them to interchange products within the tool.
Wire Framing and Testing
After developing wireframes based on user requirements, I tested these low-fidelity prototypes on usertesting.com. It consisted of 10 unmoderated user tests (each under 20 questions). A lot of the questions revolved around completing tasks and grading the overall experience on a scale of 1-5.
Introduction: You are a homeowner looking to buy a new HVAC system. During your buying process, you come across Trane’s website and are now ready to compare products using the product comparison tool.
Qualitative Findings
Quantity of items: Users felt that comparing more than 3 products at time would be too overwhelming
Design Update: Allow users to only compare 3 products instead of 4
Addition of products: Several users liked the idea of being able to add and remove products to compare but felt the placement of the plus button was easily missed.
Design update: Moved the plus button to where products would show.
Cross Functional Team Checkpoints
Final UI Designs
After the wireframes were complete and we got stakeholder approval, I moved on to designing the UI. It was important that the final design be easily implemented across all of Trane’s residential HVAC brands. I tried to keep the interface simple so it could be scaled in the future if need be.
