Trane Technologies

Temporary Override

Role: XD Designer

Duration: 2 week sprint

Completed: Nov 2022

Tools: Figma, Protopie, Photoshop, Illustrator

Challenge

Based on a survey of their product users, the organization wants to add a new feature to the mobile app that will allow homeowners to temporarily adjust or pause the current temperature settings of their home thermostat.

The Problem

Use Case: Angela is preparing for a movie night with friends and family. She wants to temporarily cool down her home for a few hours while guests are over so everyone is more comfortable and have it return to her regular scheduled routine after her guest has left.

With the current mobile app Angela has two paths to approach this scenario.

  1. Lower the temperature via the home screen.

  2. Go into scheduling and edit the temperature setpoints.

Both options end up being permanent edits to the thermostat and that was only one of the many example use cases to warrant building this feature.

Journey Maping

In order to empathize with and better understand Angela as a team, I created a simple journey map based on the above scenario to document the steps and identify pain points to ideate solutions.

With the journey map I scheduled a video meeting with the team to discuss and refine my findings. We were able to narrow down the “key feature needs” from the journey map for me start building Lo-Fidelity mockups.

Journey Map

Key feature needs

Key Feature Needs

Design Process

Building From Scratch

Since the app was undergoing a complete overhaul, there was no established design library to reference. From both a UX Designer and Developer perspective, this gave me the freedom to prioritize functionality and focus on the user experience rather than being slowed down by visual elements.

An additional benefit of using simple design elements was the ability to quickly generate a large number of different designs and workflows to explore. This approach allowed me to:

  • Innovate and experiment with ideas that might have otherwise been overlooked.

  • Build a deeper understanding of the product.

  • Identify better solutions that were missed in earlier discussions.

After two days and dozens of iterations, followed by discussions with my team lead, I settled on functional screens that met the key feature requirements while keeping the workflow as streamlined as possible."

Prototype & Presentation

Figma is the preferred tool I use to creating prototypes for not only for presentations but also for building design libraries and tokens. After a day of linking screens & testing, the MVP was ready to be presented and discussed with stakeholders before shipping out to developers. The goal of the prototype was not meant to create an all encompasses app with every possible scenario or make something visually beautiful (for now). Instead, it was to provide a proof of concept that demonstrates functionality of the feature.

With that in mind, when presenting the prototype I needed to set the context and purpose to the audience.

  1. Visual appeal is not a major concern at this point but visual usability concerns are.

  2. Each viewer needs to imagine themselves in the scenario of a homeowner that wants to temporarily adjust home temperature.

  3. Questions and feedback are highly welcomed after the demonstration.

Link to full Prototype

  • Home

  • Paused

  • System Off

  • Temporary Override

Feedback & Critiques

Overall, feedback from the demonstration was minimal but positive. The stakeholders understood the reasons behind the visual simplicity, and the developers appreciated that I made their work easier. The temporary override feature was intuitive and clear.

With the stakeholders' approval, the prototype was delivered to the UX Researchers for short online tests and to the Developers to begin building, while I moved on to start the next feature on the project journey map.

What I Learned

Amazing Leadership & Team

I joined near the beginning of the project, so it was a bit daunting to know where to start during my onboarding period. However, my UX team lead, Jason Haggstrom, was not only an excellent leader but also a wealth of knowledge, able to break down the complex project into manageable features.

Communication with other departments was also a great experience. Bouncing ideas and addressing roadblocks in Miro meetings proved insightful and helped make my workflow more agile.

Being Agile

As much as I enjoy creating a visually stunning design library with appealing elements and animations to showcase the product, I was advised by my team leads to avoid this potential pitfall. From a high-level perspective, it doesn’t create actual user desirability. In fact, it slows down production and user testing focused on visuals rather than functionality wasn’t a priority at the time. This was the moment I truly understood what 'Agile' means—not just the ability to adapt and change quickly in an ever-evolving environment, but also to focus on key areas to build a strong foundation.

Since then I have kept this view point at the top of my mind when approaching any project.