Lennox set out rebuild a legacy portal from scratch and add some critical new applications for their HVAC professionals. My focus as the UX Lead was complex: to create a solid information architecture for a robust portal using site maps and wireframes so we could nail the usability for applications that would be used by HVAC technicians in the field and on the go.
There were several challenging aspects of this website and mobile apps. Among its features, it had to include the following:
- A complex registration system
- A native app interface for mobile and tablet
- Part finders
- A quote generation tool
- Document / Warranty lookups
- A comprehensive portal search
- Over 50 small applications
- Security trimmed information portal
- An integrated web interface for HVAC professionals to monitor their customer iComfort thermostats
- 3 product catalogs, including an ecommerce workflow
- Community forum
- News portal
User Testing and Wireframes
We identified five critical applications, which, along with the portal navigation system, needed to be user tested:
We conducted over 25 screen-share usability tests that were screened by the business according to user personas we created specifically for the testing.
Every usability test was incredibly insightful. We discovered, for instance, that there were some applications that needed to be revamped because certain segments of users had been previously overlooked during the requirements gathering stages.
Extensive High-Fidelity Wireframes and Site Map
350 More Wireframes
After receiving a completed style guide, we decide to use high-fidelity wireframes to flesh out over 350 more wireframes. These wireframes were changing all the time. Because of their key role in proving out technical feasibility and vetting out requirements, they became invaluable to the business.
Because this was a portal and needed to account for over 50 applications and over 200 portal pages, I maintained a working site map file throughout the course of most of the project.
In less than a year, we finished the massive undertaking. This included launching the application and adding significant and valuable new features. This was by far my largest information architecture effort.
Over the course of the project, I learned some key things:
- Talking to customers and doing usability testing can shed invaluable feature prioritization ideas. Our user testing helped the client see where adjustments needed to be made.
- Wireframes become increasingly valuable for larger projects with inherent business risk.
- It's crucial to be organized and leave nothing subject to loose interpretation. Even though the project was big, it was possible to wireframe several hundred pages in a relative short period of time.
- It's also critical to continuously vet your ideas with the business stakeholder, users, and technical folks, even if you need to force people to look your work. The larger a project is, the easier it is for everyone to misunderstand requirements. Frequent communication and reviews help nip miscommunication in the bud.