Trane Technologies

Connect To A Network

Role: XD Designer

Duration: 4 weeks

Completed: Oct 2023

Tools: Figma, Protopie, Photoshop, Illustrator

Challenge

On the thermostat device side of the project, Trane is developing a brand-new product line to replace its decade-old thermostats, and homeowners needed a way to connect to the network to keep the device updated and access smart home features.

The Problem

Use Case: Nick and Kelly are moving into their newly purchased home. While adjusting the home temperature, Kelly wants to take advantage of the smart home features, but the device needs to connect to a network to access them.

The current device workflow is already clear and easy to follow (for me), and I could have simply refreshed the UI. However, this perspective is biased, coming from someone who works with technology. To test it further, I used my spouse, who isn’t tech-savvy, as an experiment and recorded her attempting the same task. She ended up navigating to the wrong screens, repeated actions due to unclear button placements and found some of the wording confusing.

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.

Pictured Above: Trane thermostat prototype.

(link to prototype)

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.