Un termostato, una nueva generaciónA thermostat, a new generation

ContextoContext

Tres segundos, usarlo frente a la paredThree seconds, standing at the wall

Es un termostato con la interfaz en el propio dispositivo: la pantalla en la pared desde la que se controla la climatización de cada zona.It's a thermostat with the interface on the device itself: the screen on the wall that controls the climate in each zone.

Se usa de pie, de paso por el pasillo, en dos o tres segundos. Y lo usa gente muy distinta: quien vive en la casa y lo toca todos los días, el empleado de una oficina que no tiene la app del móvil y depende solo de esa pantalla, el huésped de un hotel que necesita subir la temperatura y poco más.People use it standing up, on their way down the hall, in two or three seconds. And very different people use it: whoever lives in the house and touches it every day, an office worker without the mobile app who depends on that screen alone, a hotel guest who just needs to turn up the heat.

Todos quieren lo mismo: resolver y seguir. Ese fue el norte de todo el proyecto: que ajustar la temperatura sea tan simple que casi no haya que pensarlo.They all want the same thing: sort it out and move on. That was the north star of the whole project: making temperature adjustments so simple you barely have to think about them.

Si alguien tiene que pararse a pensar frente al termostato, algo no estaría del todo resuelto.If someone has to stop and think in front of the thermostat, something isn't quite solved.

El desafíoThe challenge

Sumar y simplificarAdd more, keep it simple

La nueva generación juntaba dos productos en uno: al control de la climatización se sumaba el de la calidad del aire, con ionización y purificación. Más prestaciones y más información: modos de frío, calor, seco y ventilación, varias etapas a la vez (aire, suelo, radiador), zonas, velocidad, programaciones, avisos y errores. Todo en cuatro pulgadas.The new generation merged two products into one: on top of climate control came air quality control, with ionization and purification. More features and more information: cooling, heating, dry and fan modes, several stages at once (air, underfloor, radiator), zones, speed, schedules, alerts and errors. All on four inches.

La versión anterior tenía problemas de usabilidad, pero también había creado costumbre. La nueva versión llegaba para resolver esos pain points sin que nadie sintiera que tenía que reaprender comportamientos de interacción desde cero.The previous version had usability problems, but it had also built habits. The new version had to fix those pain points without anyone feeling they had to relearn how to interact with it from scratch.

Que un producto cada vez más potente se siga sintiendo simple.Keeping an ever more powerful product feeling simple.

Mi rolMy role

Llegué con el proyecto en marchaJoining a project already in motion

Entré cuando el proyecto ya llevaba un año en marcha. Mi compañero de UX había hecho la base del research (entrevistas y tests sobre la generación anterior) y los primeros wireframes y prototipos.I joined when the project had been running for a year. My UX colleague had laid the research groundwork (interviews and tests on the previous generation) and the first wireframes and prototypes.

Lo primero no fue diseñar: fue entender cómo funcionan por dentro los sistemas de climatización. Revisé la documentación con él y me reuní con los ingenieros que habían escrito las especificaciones, hasta saber qué era negociable para la UI y qué no.The first job wasn't designing. It was understanding how the climate systems work on the inside. I went through the documentation with him and met the engineers who wrote the specs, until I knew what was negotiable for the UI and what wasn't.

Desde ahí, convertí esas ideas en diseño: les di forma, ajusté patrones de comportamiento y fijé las reglas que después serían el sistema de diseño. Validaba con UX, producto e ingeniería, y nuestra UX writer reescribía los textos a partir del glosario de HVAC y de los términos que ya conocían los usuarios.From there, I turned those ideas into design: I gave them shape, adjusted behavior patterns and set the rules that would later become the design system. I validated with UX, product and engineering, and our UX writer rewrote the copy based on the HVAC glossary and the terms users already knew.

Hubo tira y afloje. Más de una vez, ingeniería quiso volver a comportamientos de la versión anterior, por costumbre propia, o porque los usuarios ya conocían esos patrones. Nuestras decisiones de UX se sostuvieron ya que estaban respaldadas por tests con usuarios reales. De eso estoy orgullosa: de haber tenido la evidencia para proteger las buenas decisiones.There was some back and forth. More than once, engineering wanted to go back to behaviors from the previous version, out of habit or because users already knew those patterns. Our UX decisions held because they were backed by tests with real users. That's what I'm proud of: having the evidence to protect good decisions.

Debatir decisiones partiendo de datos reales que nos aportaron nuestros usuarios fue mucho más fácil que discutir con opiniones.Debating decisions from real data our users gave us was much easier than arguing over opinions.

ExploraciónExploration

Del papel a las reglasFrom paper to rules

Me encantaría decir que seguí el design thinking de manual. Pero en la vida real casi nunca es tan así.I'd love to say I followed textbook design thinking. In real life, it's rarely that neat.

Antes de dibujar, me metí de lleno en el producto (me volví usuaria de su versión anterior en la oficina), leí documentación y especificaciones, y hablé con los ingenieros que lo habían construido. Después vino el cuaderno. Bocetaba a mano cómo podían verse y comportarse las pantallas, aún en esa etapa sin IA de por medio. Algunas ideas se caían enseguida; otras pasaban a Figma, se testeaban y volvían.Before drawing anything, I dove into the product (I became a user of the previous version at the office), read documentation and specs, and talked to the engineers who had built it. Then came the notebook. I sketched by hand how the screens could look and behave, still without AI at that stage. Some ideas fell apart right away; others moved to Figma, got tested and came back.

Ahí apareció una de las ideas que más me gustan del proyecto: la nebulosa. En el cuaderno arrancó como un color y una forma para cada modo: verde para el confort, rojo para el calor, azul para el frío. En pantalla quedó como capas de degradado detrás de la temperatura, que se mueven de forma aleatoria mientras la máquina está funcionando o en confort, y cambian de color según el modo.That's where one of my favorite ideas in the project came from: the nebula. In the notebook it started as a color and a shape for each mode: green for comfort, red for heating, blue for cooling. On screen it became layers of gradient behind the temperature, drifting randomly while the system is running or in comfort, and changing color with the mode.

El hardware también ponía reglas. Con un procesador chico, el glassmorfismo, que en principio fue una idea genial, y las animaciones pesadas se quedaron afuera.The hardware set rules too. With a small processor, glassmorphism (a great idea at first) and heavy animations were left out.

Probé tres estilos de UI sobre las pantallas principales y elegimos el neomorfismo, con un único marco negro y la sensación de pantalla infinita: el display se funde con los bordes.I tested three UI styles on the main screens and we chose neumorphism, with a single black frame and an infinite-screen feel: the display blends into the edges.

Mi trabajo no era decorar la pantalla, era encontrar las reglas que la ordenan.My job wasn't to decorate the screen. It was to find the rules that organize it.

El sistemaThe system

El sistema que construíThe system I built

Un color, el tamaño de una cifra, la posición de un estado: cada decisión tenía que funcionar en todas las pantallas y escalar a las que todavía no existían.A color, the size of a number, the position of a status: every decision had to work on every screen and scale to the ones that didn't exist yet.

Partí del atomic design: definí los átomos, luego los elementos que surgen de combinarlos, y con esas bases construí cada componente para su funcionalidad concreta.I started from atomic design: I defined the atoms, then the elements that come from combining them, and on that foundation I built each component for its specific job.

Pero el sistema no creció solo de abajo hacia arriba. Muchas piezas nacieron al revés: al resolver cómo iba a funcionar una pantalla aparecía una necesidad nueva, la convertía en átomo y de ahí pasaba a formar parte del resto de la interfaz. El sistema se construyó en los dos sentidos, y eso lo mantuvo pegado a los problemas reales del producto.But the system didn't only grow bottom-up. Many pieces were born the other way around: working out how a screen would function surfaced a new need, I turned it into an atom, and from there it became part of the rest of the interface. The system was built in both directions, and that kept it tied to the product's real problems.

En una interfaz embebida, además, no todo se repite: un slider que funciona como selector no reaparece igual en otra pantalla. Lo que el sistema reutiliza no es siempre el componente, sino su lógica: la estructura, la forma y el gesto que hace el usuario. Así, quien aprende a usar un selector ya sabe cómo usar el siguiente, aunque se vea distinto.In an embedded interface, not everything repeats: a slider that works as a selector doesn't reappear the same way on another screen. What the system reuses isn't always the component, but its logic: the structure, the shape and the gesture the user makes. So once you learn one selector, you already know how to use the next, even if it looks different.

El color como canal de estado. La nebulosa y los acentos cambian con el modo (frío, calor) o el confort, así que de un vistazo, y a la distancia, se entiende qué está haciendo la máquina sin leer una palabra.Color as a status channel. The nebula and accents change with the mode (cooling, heating) or comfort, so at a glance, even from across the room, you can tell what the system is doing without reading a word.

Otro gran desafío al diseñar componentes fue comprender el uso que iban a tener, y testear los idiomas más complejos en los que se iba a traducir el producto. Esto fue en colaboración con la UX writer, quien, además de diseñar el contenido, se encargó de las strings de traducción.Another big challenge in designing components was understanding how they'd be used, and testing the most complex languages the product would be translated into. I did this with our UX writer, who, besides designing the content, owned the translation strings.

Los textos, cortos: donde antes había una frase, quedó una etiqueta. Y los probé con contenido real en cada idioma, no con relleno, para que ningún texto quedara cortado o desbordado al traducir.Short copy: where there used to be a sentence, now there's a label. And I tested it with real content in every language, never filler, so no text would get cut off or overflow in translation.

El handoff a front-end fue por paquetes, cada bloque documentado y listo para implementar.Handoff to front-end happened in packages, each block documented and ready to build.

ValidaciónValidation

Testing con el mercadoTesting with the market

Lo probamos en tres frentes: rondas internas con el equipo, tests con usuarios y la feria Light+Building de Frankfurt, donde el producto se encontró con gente real y de perfiles muy distintos.We tested it on three fronts: internal rounds with the team, user tests, and the Light+Building trade fair in Frankfurt, where the product met real people with very different profiles.

Ver a alguien usar la pantalla por primera vez, sin contexto, es la prueba más honesta que hay. Confirmó las decisiones que ya venían respaldadas por usuarios y ajustó las que todavía no terminaban de cerrar.Watching someone use the screen for the first time, with no context, is the most honest test there is. It confirmed the decisions already backed by users and refined the ones that weren't quite settled yet.

Los tests ajustaron sobre todo microinteracciones y comportamientos, con mejoras concretas de usabilidad.Testing mainly refined microinteractions and behaviors, with concrete usability improvements.

ValidaciónValidation

Testing en el dispositivoTesting on the device

Figma no es la pared. A medida que desarrollo entregaba cada paquete, lo probábamos en prototipos conectados, con la interfaz corriendo en el hardware real, para validar lo que ese paquete resolvía.Figma isn't the wall. As development delivered each package, we tested it on connected prototypes, with the interface running on the real hardware, to validate what that package solved.

Durante la semana trabajábamos codo a codo con desarrollo, en reuniones cortas y sesiones de trabajo en conjunto. Y en las reuniones de avance presentábamos lo hecho al resto de los compañeros: otros ingenieros, producto y directivos.During the week we worked side by side with development, in short meetings and joint working sessions. And in progress reviews we presented the work to the rest of the team: other engineers, product and leadership.

Ahí aparecían cosas que en pantalla de diseño no se ven. Contrastes que en Figma eran perfectos perdían fuerza en el display y hubo que ajustarlos, etc. Lo que con el mouse parecía cómodo, con el dedo y a un brazo de distancia pedía más aire.That's where things showed up that you can't see on a design screen. Contrast that looked perfect in Figma lost strength on the display and had to be adjusted, and more. What felt comfortable with a mouse needed more room with a finger at arm's length.

Una pantalla puede verse impecable en Figma y pedir cambios en cuanto se enciende en la pared.A screen can look flawless in Figma and still need changes the moment it lights up on the wall.

La soluciónThe solution

La soluciónThe solution

Climatización y calidad del aire conviven en la misma interfaz sin pisarse. La temperatura manda en la pantalla principal, y el resto de las funciones siguen los mismos patrones de uso, así que se sienten parte de un solo producto y no de dos. El sistema de diseño fue lo que hizo posible esa coherencia en toda la nueva generación.Climate and air quality live in the same interface without getting in each other's way. Temperature leads on the main screen, and every other feature follows the same usage patterns, so they feel like one product, not two. The design system is what made that consistency possible across the whole new generation.

Calidad del aire: buena, media y baja, con el mismo patrón que la temperatura.Air quality: good, moderate and low, following the same pattern as temperature.

El marco negro, pantallas mínimas, el color de cada modo contando en qué estado está el sistema, números grandes y limpios que se leen desde lejos. Todo lo que no ayudaba a resolver en segundos quedó afuera.The black frame, minimal screens, the color of each mode telling you what state the system is in, big clean numbers you can read from a distance. Anything that didn't help you get it done in seconds was left out.

CierreWrap-up

Resultados y reflexiónResults and reflection

Ya se ha presentado en más de 5 mercados y 10 países, y funciona en 11 idiomas, testeados con traducciones reales.It has already been presented in more than 5 markets and 10 countries, and it works in 11 languages, tested with real translations.

Me llevo varias cosas. La primera, y la que más disfruté: diseñar para algo que no es una web ni una app. Al termostato nadie se sienta a usarlo: se acerca de pie, sube, baja o apaga la temperatura en segundos y sigue con lo suyo. Entender ese contexto de uso fue la base de todo lo demás.I'm taking a lot away from this. First, and what I enjoyed most: designing for something that isn't a website or an app. Nobody sits down to use a thermostat: you walk up, turn the temperature up, down or off in seconds and get on with your day. Understanding that context of use was the foundation for everything else.

También fue la primera vez que cada toque tenía consecuencias fuera de la pantalla. Subir un grado, activar la purificación: cada acción cambiaba algo en el mundo real, y eso me obligó a diseñar con otro nivel de responsabilidad.It was also the first time every tap had consequences beyond the screen. Raising a degree, turning on purification: every action changed something in the real world, and that pushed me to design with a different level of responsibility.

Y me quedo con dos aprendizajes que ya aplico en todo. Que la evidencia del usuario final es la mejor forma de defender una decisión frente a diseño, ingeniería o dirección, sobre todo en productos que llevan años en el mercado. Y la costumbre de diseñar a partir de las restricciones, no a pesar de ellas.And two lessons I now apply to everything. That end-user evidence is the best way to defend a decision to design, engineering or leadership, especially with products that have been on the market for years. And the habit of designing from constraints, not in spite of them.