Trane Technologies

Back-End Service

Role: XD Designer

Duration: 4 weeks

Completed: Dec 2023

Tools: Figma, Protopie, Photoshop, Illustrator

Challenge

When installing a thermostat in a new or existing home, technicians need to link, measure, and test the HVAC system/accessories with the thermostat. This critical step typically takes 1-2 hours to complete for a technician depending on experience. My goal is to not only shorten this time but also bring more clarity to each step of the process.

I was given the opportunity to lead lead and

The Problem

Use Case: Tom has finished installing the exterior HVAC unit and the air handler in the attic. The last task on his to-do list is setting up the home thermostat to link everything together. After completing the setup, Tom is informed that the final system diagnostics and updates will take between 15 minutes to an hour, leaving him frustrated.

When testing the current workflow myself, it felt a bit odd. There were moments where I thought I had reached the end, but the setup continued. The screens only showed titles and set-points, with no further explanation or guidance on where to find more information. It also displayed edit screens for accessories or features that weren’t even installed. While experienced technicians can navigate the workflow without too much trouble, beginners often find themselves flipping through the manual for confirm.

This test was insightful and encouraged me to plot out the workflow to be further discussed with the team.

Legacy Device: Connect to a Network

Building A Foundation

Journey Map

The journey map in this scenario highlights the frustrations experienced by both current and new users of the thermostat. It helped the team visualize how the average user gets stuck on something as routine as connecting to a network. This served as a valuable starting point for brainstorming ideas to alleviate each pain point while defining the MVP for this feature.

Workflow

With the insights gained from the team, the next step was to plot out a new workflow using sticky notes to address these pain points and ensure I stayed on track without missing any steps. A key benefit of this process was that it also sped up my overall development. The proposed workflow changes included reorganizing the menu screen, reducing navigation paths, and update the language to better guide users.

New Workflow Proposal

Design Process

Keep It Simple, Stupid (KISS)

Lo-fi Wireframes

With my background in graphic design, it's easy for me to fall into the trap of over-designing. To avoid this, I built the first draft using basic elements, focusing solely on proving whether the new workflow was better for homeowners. This approach allowed me to quickly create low-fidelity wireframes within a few hours.

Quick Test

I once again asked my spouse to try connecting to the network using the new prototype. This time, she was able to complete the task in less than half the time and noted:

  • "The Wi-Fi page was easier to find."

  • "Oh, turning on the Wi-Fi shows me the next step."

  • "It felt easier to do, but I'm not sure why."

The last point could be due to several factors, such as the reduced number of options, since it's not a fully built prototype with branching paths to get lost in. However, I felt confident in moving forward with building out the rest of the prototype.

Prototyping

For Developers

While building the wireframes, I kept the elements extremely simplified, knowing they would evolve as the design library and technical details became more established. This approach was highly appreciated by the development team, as it not only clarified the design intentions but also provided a clear roadmap for implementation. The integration reduced potential misunderstandings and rework, ultimately accelerating the development timeline.

For Presentation

A valuable piece of advice my team lead, Jason, taught me when presenting was to always set the context and expectations:

  • Visual designs are not final: This helps ensure the focus is on the experience rather than the visuals.

  • Perspective of the homeowner: This puts everyone in the right mindset when viewing the presentation.

  • Feedback and questions at the end: This allows everyone to fully experience the workflow before diving into discussion.

What I learned

Empathy

For this project, innovating and improving an already well-established method seemed daunting. However, I quickly realized the flaws when viewed through the eyes of a non-tech user. What was easy for me wasn’t the same for others. Recognizing these pain points helped me grow, not only as a designer but also in my ability to keep the user in mind. This experience deepened my appreciation for user-centered design and its crucial role in developing successful products.