Designing North America smart thermostat from scratch
🌟Outcomes
-
Designing from 0 to 1
-
Reinventing the schedule feature
-
Led presentations with cross-functional teams internationally
📝 Overview
The Second project completed in this internship was designing the UX for Media's North American smart thermostat from scratch. My job started by analyzing to understand the necessary features our product should have. Then, I designed innovative features that make our product stand out from those of rival brands.
Role
Competitor Analysis
Wireframing & Prototyping
International collboration
Design iteration
Team
Product Manager
UI Designer
Front-end Engineer
UX Researcher
Tools
Figma
Miro
Word
📝 Problem discovery
Competitor analysis
(Product features)
During the analysis, I assessed the main features of three leading North American thermostats, summarized them in an Excel sheet, and discussed with my Product Manager which features to adopt in our product.
.png)
Main features found in competitor products
Key learnings
Identified core features
Schedule, edition of AC parameters, general settings, and alerts are the features that need to be implemented.
Swift AC control
In North America, using buttons for large temperature adjustments in °F, like changing from 80°F to 70°F, requires extra time and effort.
Maximized comfort
North America thermostats prioritize comfort over energy savings and lack a scheduled end-time feature. Instead, they allow users to set a temperature range, pausing the HVAC system when it is within this range.
More flexibility
Ecobee's Quick Change feature enables users to swiftly modify the temperature without disrupting the preset schedule, allowing for instant adjustments that accommodate immediate needs while maintaining regular routines.
🎨 Design directions
-
Implement core features: Ensure the solution is comprehensive
-
Improve user efficiency: Streamline the user flow and provide shortcuts
-
Maximize comfort: Easily switch between different modes
Visualizing feature priotization
🧠 Ideation
Feature prioritization
.png)
Labeling features into three levels of priorities: primary, secondary, tertiary
Site map
Mapping out the hierarchy
Using the site map to organize the structure, where each node represents a category or function of the thermostat
.png)
Key features hierarchy diagram of the NA Smart thermostat
Wireframing (Main features)
Mockup specs
The initial stage of wireframing involves determining the dimensions of the mockup. After consulting with the hardware engineers, it was established that the Midea smart thermostat's screen measures 8 inches by 8 inches, approximately equal to 800 pixels by 800 pixels. Similarly, the touch panel is 8 inches by 8 inches, corresponding to 480 pixels by 480 pixels.
.png)
Dimensions for the thermostat's screen and its touch panel
Efficient temperature adjustment
The traditional up and down buttons are inefficient for substantial temperature adjustments in degrees Fahrenheit. Introducing a circular control panel would enable users to set their desired temperature more quickly and efficiently.
.png)
Wireframe for the landing page
Schedule feature
Instead of requiring a specific numerical input, implement two sliders to adjust the maximum and minimum temperature settings. Additionally, eliminate the end time placeholder from the display.
_gif.gif)
AC parameter editing, time setting, schedule copying, and saved schedule display
Implementing quick change
Incorporate the quick change feature, offering "Home," "Away," and "Sleep" as the three default options for users to easily set up. After users set up AC parameters in the schedule, these data will be synchronized in quick change.
_gif.gif)
Quick change entry (inside menu), quick change selection (home, away, sleep), AC setup, and activate quick change
Implementing vacation mode
Allows users to set a prolonged period during which the thermostat maintains a more energy-efficient temperature. This functionality is particularly beneficial for homeowners aiming to ensure their pets' safety and protect their homes from freezing conditions.
_gif.gif)
Vacation entry, customizable naming, vacation schedule setup, AC setup, saved vacation display
🔁 Iteration
Internal check-ins'
Before presenting the designs to Midea's US team, I shared my draft and wireframes with my supervisor for review. Consequently, he highlighted inconsistencies in the information presentation between the Schedule and Vacation modes.
.png)
Inconsistency in information display: Saved schedule display is different compared to that of Vacation
Solution: Maintain consistency across information display
Harmonizing the information display between Schedule and Vacation modes ensures users experience consistency, avoiding confusion from differing appearances.
.png)
Collect feedback from cross team
Every Tuesday, our team at the Foshan headquarter organizes routine meetings to discuss design progress with the product team based in Louisville. I was in charge of leading these presentations, focusing on the design thinking aspects.
.png)
.png)
.png)
Applying collected feedback for iteration
Comprehensive feature collection ✅
The feature list for the NA smart thermostat is complete so follow the site map to create the remaining designs
The confusing connection between quick change & schedule ❌
The existing logic connecting Quick Change and schedule requires significant revision. Data should not automatically transfer from the schedule to Quick Change.
Preset ranges doesn't support climate diversity ❌
Due to climate diversity and personal temperature preferences, enable temperature range customization for users, setting the main display's default to this range.
Quick Change setup via menu access or prompted initial configuration
Initially, when users set up AC parameters in the schedule, the data transfers to quick change simultaneously. Now, the default labels (Home, Away, and Sleep) would be locked so users cannot use these default names until they set up a quick change through the menu.
.png)
Locking default names before users set up quick change
Remove recommended AC parameters
The system won't provide recommended temperature ranges when users use default names in quick changes (Home, Sleep, Away). This change accommodates climate variance across different parts of North America.
🎯Final deliverable
Prototype of Essential features of Midea's NA smart thermostat
The final deliverable of my project includes 50 + wireframes that cover every feature of the smart thermostat
Straightforward setup of schedule & quick change
The system notifies users to set up Quick Changes and schedules efficiently. AC settings from Quick Change are automatically applied to the schedule, streamlining the process and saving time.
Straightforward setup of schedule & quick change
The system notifies users to set up Quick Changes and schedules efficiently. AC settings from Quick Change are automatically applied to the schedule, streamlining the process and saving time.
Screens of essential features from Media's NA smart thermostat
🏅 Reflection
Align design with hardware specifications
In my internship, I learned the importance of matching my designs to the hardware specs. Working closely with hardware engineers, I obtained the exact dimensions of the thermostat's screen and touch panel. This collaboration enabled me to craft wireframes and mockups that were both visually appealing and in sync with the hardware's limits.
Navigating ambiguity for a 0 to 1 product
Developing a 0 to 1 product was both challenging and rewarding. This process taught me the value of adaptability, the importance of customer-centric design, and the power of collaborative problem-solving. Facing the unknown pushed me to think creatively, ultimately leading to a product that truly resonated with the market.
Collaboration with an international team
Working on the North American thermostat project highlighted the value of cross-border collaboration. Weekly meetings with the U.S. team offered insights into North American preferences, significantly shaping my design approach. This experience taught me the importance of tailoring solutions to specific markets and the role of empathy in design. It also underscored the challenges and rewards of cross-cultural teamwork, improving not only the project outcome but also my professional skills.
