WorksAbout

Google Nest Thermostat Redesign


CONTENTS

Overview

• Highlights
  
• The Problem
  
• Timeline
• Research
• Visual Guide
• Wireframe
• Usability Test
  
• Iteration
  
• High Fidelity
• Design System
• Features
• Takeaways

Design System

Standardized UI elements, typography, and iconography ensure consistency and scalability of the design.

CareMi’s design system ensures clarity, consistency, and ease for caregivers. High-fidelity prototypes feature intuitive navigation, accessible typography, and calming colors, all refined through caregiver feedback to create an empathetic, seamless experience.

Applying Design Tokens in Google Nest Thermostat

#1 Typography Variables During our design phase, Figma introduced Typographic Variables, which allowed us to move beyond traditional styles. By leveraging this feature, we gained the flexibility to globally adjust font size, line height, and other typographic properties effortlessly. This approach is more efficient than using predefined styles, as it enables quick iterations and ensures uniform updates across the entire system.

#2 Color Modes with Variables We implemented light and dark modes using Figma’s variable system. Once the light & dark mode variables were properly defined, switching between themes became seamless. This allowed us to preview and adapt the UI for different environments instantly, enhancing both accessibility and user experience.

© 2025 All Rights Reserved.Email: mingxu22@student.scad.edu  Tel: +19124196929  

Back