Trane Technologies
Company Overview
Trane Technologies are climate innovators that set new standards to enhance the health and well-being of our communities, customers, employees and planet. They are a manufacturing company focused on heating, ventilation, and air conditioning and refrigeration systems.
My Role
I was hired on with the role of Experience Designer (XD) assigned primarily to the development of the mobile app and any additional proprietary devices.
Role: XD Designer
Duration: 2 years
Completed: February 2024
Tools: Figma, Protopie, Photoshop, Illustrator
Review
Current Evaluation
Coming into the team I was given access to the current design library done by the previous company and how it was applied to the project so far. Overall, the designs and components are well made and clean and would look well in a finished product. The stakeholders were very impressed and happy with the designs.
When I joined the team a year later, the design system remained unused in the current development of the app. Why is that?
The Problem
Designing based only on what looks nice does not translate to actual user understanding. When Whipsaw performed user tests with their mockups it was received positively solely based off visuals. However, when asked to perform a task or given a scenario to resolve things started to fail.
The Path Forward
The goal of XD is the conversion of user needs into design solutions. So instead of designing every possible asset at once and guessing how users would interact with it. I would be addressing each feature from a “needs, wants, and nice to have” perspective and reducing the pain points along the way. The advantages of this method includes:
Team engagement to express their thoughts and concerns while also building product knowledge.
Flexible quick designs that can be freely iterated upon.
Allows for targeted user testing for both quantitative and qualitative data.
Story 1: Temporary Override
Story Mapping
With the team together which includes the Product Owners, Engineers, Designers, and Researchers into a group Miro board to brainstorm. We started by reframing the feature “Temporary Override” into what a homeowner might look for and broke it down into key feature needs.
Homeowner needs and features.
Simple base elements with minimal color and design flair were used to build the mockups.
The focus here was to create as many variants regardless of design. Exploring any idea or concept has value even if a majority would be discarded.
After reviewing the mockups with the UX team I was able to narrow it down to a design that satisfied the story requirements.
Protype
The goal of the first prototype is not to create something that encompasses every possible scenario or make something visually beautiful. Instead, the goal is to provide a proof of concept that demonstrates functionality of the story to be vetted out by customers, clients, and even the design team itself.
Presentation
Before walking the team through the prototype it is important to set the context to the audience before presenting to get everyone in the right mindset. I needed to remind the team that:
Designs are not set and are open to change.
Review the Story and goals this prototype addresses.
After my presentation I opened the floor for questions and concerns from the team. If there were any confusion on the prototype I am able to update it live or discuss possible solutions. If no major problems were brought up I then hand it over to the dev team with component notes to be built.
Conclusion
With every project my primary goal as a UX Designer as mentioned at the beginning is the conversion of user needs to design solutions.
Story 2: Connect to a Network
Problem
The homeowner needs to connect the thermostat device to the internet in order to link with their Trane account.
Research
When testing our device and researching their competitors I discovered several problems.
The design is outdated
Unintuitive paths to make certain connections.
The device does not naturally guide a new homeowner to connecting to a network.
Define & Ideation
Below is a list of required features that are needed for the device.
Turn On/Off Wi-Fi
View Network Details
Test Network
Connect to a Network
Disconnect to a Network
Search for a Hidden Network
Advanced Network Connection
Intuitive workflow
XL824 Thermostat
Quick Design
With a general understanding of the requirements and goals I moved forward with designing rough ideas on Figma. The first build followed closely with the current device which helped build my product knowledge and its pain points.
Usability Testing & Feedback
By utilizing the developers and technicians as my initial test subjects for the initial walkthrough it allowed for invaluable feedback such as…
There are too many options on the screen when Wi-Fi is off.
Needs a network signal strength icon.
Having “Test Connection” available when Wi-Fi is off doesn’t make sense.
What is the difference between “Done” and “Back”?
Needs ability to disconnect from current network.
Build the rest of the networking API
XL824 Network Setup Screen
Solution
For a new homeowner the I had a theory that current design had too many options and some where even redundant in certain situations such as “Test Connection” when Wi-Fi was off. By reducing the options and building up to a connection, my theory is that this new workflow makes every step clearer for the homeowner.
With a few more weeks of refinement and the addition of the rest of the networking features. The prototype was ready to be delivered to the developers.
Summary
This Sprint took exactly 3 weeks to complete. This experience pushed me to be quick and approach a problem in a new way. My team lead always encouraged me to try ideas knowing that it can be thrown away otherwise all I would be doing is just creating a new skin over an old design.