Hablemos
Superficie de agua en azul profundo
Red de clubes deportivos · 2026

Cada gota, contada.

Un tótem de recarga con tablero de impacto en vivo y una botella inteligente con su app: diseño de producto y UX/UI para traducir el agua servida en plástico evitado.

  • Diseño de producto
  • UX/UI
  • Sistema visual
  • Visualización de datos
  • 3D y render

Un tótem de recarga que cuenta lo que reparte, un tablero público que lo traduce y una botella con su app para llevarse el hábito a casa. El encargo: que el agua se pudiera leer. El cliente no se nombra por acuerdo de confidencialidad — el trabajo se enseña entero.

El reto

Una red de clubes deportivos quería que cada botella rellenada en sus salas contara de verdad: litros servidos, plástico que no se compró, CO₂ que no viajó. Y que los datos dejaran de ser técnicos: un tablero que cualquier persona pudiera leer de un vistazo, junto a sus tótems de recarga. El objetivo, escrito en el propio proyecto: traducir datos técnicos en información visual accesible para cualquier persona. Salieron dos interfaces que se hablan: el monitor público del tótem y la botella inteligente con su app.

Lo que enseña el tablero

Las cifras de la demo del monitor — no son resultados nuestros: son la interfaz haciendo su trabajo, que es exactamente lo que se diseñó.

2
interfaces el tótem con su tablero público y la botella con su app
4.800
botellas evitadas el plástico que la red convierte en recargas, contado en vivo
1.250
personas abastecidas quién bebe de la red, no solo cuánta agua sale
120,5
kg de huella al día el carbono evitado, con su tendencia semanal en el tablero
El sistema

Dos azules y una sans geométrica: el institucional que ordena y el cian que señala el dato. Todo lo demás es espacio.

el azul que manda Principal #002F6C
el cian del dato Secundario #5BC2E7
la luz detrás del tótem Halo #004380
el aire y la letra Blanco #FFFFFF

Los hex salen de la propia landing del proyecto; el contraste del cian sobre el azul de fondo está verificado para el dato en pantalla.

Tarjeta de la tipografía Raleway del proyecto
Raleway · La única familia — Sans-serif geométrica, elegida para leerse de lejos en un tótem.
Espécimen Aa de Raleway en blanco sobre azul
Aa · El espécimen — La letra a tamaño de cartel, como vive en el monitor.
Pastillas con el vocabulario del proyecto — sostenibilidad, innovación, datos en vivo, cero plástico, impacto real

El tablero

El monitor del tótem no es un salvapantallas: es un tablero vivo. Un mapa con la red de recarga, y cuatro métricas que se entienden sin leyenda — agua suministrada, botellas evitadas, huella de carbono y personas abastecidas. Cada número con su unidad y su tendencia, en Raleway a tamaño de cartel.

Pantalla del monitor con el mapa de la red de recarga y sus métricas en vivo
Las tarjetas de métricas del tablero, sueltas — agua, botellas, huella, personas
El tablero en tablet y móvil, con el mapa de la red en vivo
Superficie de agua con la pastilla de vidrio de huella de carbono cero

La botella

La segunda interfaz cabe en una mano. Una botella inteligente que mide lo que bebes y lo que evitas, y una app que lo convierte en hábito: meta diaria, última recarga, huella y plástico evitados, premios por constancia y la comunidad alrededor de la red. La propuesta expande el proyecto desde el espacio público hacia el cuidado personal.

La botella inteligente en blanco, con su ventana de nivel
La botella: blanca, con la ventana de nivel y el aro de carga. El producto físico diseñado para la red.
Pantalla principal de la app con la meta diaria y la última recarga
La app, con la botella de frente: 75 % de la meta diaria, la última recarga y el siguiente trago. La marca del cliente va difuminada a propósito.
La app flotando con las métricas de huella y plástico evitado
Huella de carbono y plástico evitado, con la recarga como gesto central.
La pantalla de inicio con premios y comunidad
Premios por constancia — el héroe cero plástico, la racha perfecta — y la comunidad de la red. El hábito, gamificado sin infantilizarlo.

Un dato que no se entiende no cambia ningún hábito. El trabajo fue hacer que el agua se pudiera leer.

Qué hizo falta
  • Diseño de producto

    El tótem de recarga y la botella inteligente, pensados como una sola familia — misma geometría, mismos azules.

  • UX/UI

    El tablero público y la app, con recorridos que se entienden sin manual y métricas que se leen de lejos.

  • Sistema visual

    Dos azules, Raleway y aire: un sistema que aguanta igual en un tótem de calle que en una pantalla de móvil.

  • Visualización de datos

    Cuatro métricas con unidad, tendencia y jerarquía. Nada de gráficos que exigen leyenda.

  • 3D y render

    El tótem y la botella modelados y renderizados para contar el producto antes de fabricarlo.

  • Confidencialidad

    El cliente no se nombra y algún detalle de su identidad se ha cambiado a propósito. Las marcas van difuminadas en las piezas. El trabajo que ves, ese sí, entero y real.

El nombre del cliente no aparece en esta ficha por acuerdo de confidencialidad, algún detalle de su identidad se ha cambiado a propósito y las marcas visibles en las pantallas van difuminadas. Lo que sí se puede enseñar — el sistema, las dos interfaces y el criterio — está entero.

Manos sujetando un brócoli dentro de un coche clásico

Hablemos sin rodeos.

Hablemos sin rodeos.

Primera conversación gratis. Sin formularios de 20 campos. Solo cuéntame qué necesitas.

Volver al Portafolio