tomrullo.com

Design Challenge · Sr. Product Designer

Cuadra

El momento, cuadra. La cuadra, también.

Juntarse no cuesta. Organizarse sí.

Como organizadora histórica del grupo, quiero delegar la coordinación en un sistema que cruce las rutinas de todos de forma asíncrona, para mantener el hábito de vernos cada 15 días sin sufrir el desgaste mental de organizarlo.
La fricción

Victoria quiere juntar a sus amigos pero está cansada de ser la que siempre insiste. Las agendas complejas, los hijos y la distancia hacen que coordinar algo por chat sea imposible.

La carga de datos

Cada amigo entra a la app cuando puede y carga su realidad en segundos: Ignacio sus mellizos y menú vegano, Blas y Andrea los horarios de sus hijos, Mariano la casa disponible, y Rafael el preaviso que necesita para viajar desde Córdoba.

El procesamiento

El sistema trabaja en segundo plano absorbiendo la complejidad. Cruza las franjas horarias semanales, barrios, restricciones alimentarias y tiempos de viaje de todo el grupo.

La propuesta

En lugar de abrir una votación que genere más debate, la app muestra una única solución cerrada directamente en la pantalla de inicio: "Cuadró. Sábado 20:30 en lo de Mariano. Menú apto vegano y coordinado con el viaje de Rafael."

El reencuentro

El grupo hace lo único que el sistema no puede hacer por ellos: confirmar con un tap. Se elimina el peso de la organización y Victoria vuelve a disfrutar de la juntada como una invitada más.

Diseñar una experiencia que facilite
encuentros regulares entre amistades.

Se presentó el caso de Victoria, diseñadora gráfica que tiene un grupo de amigos con quienes solía juntarse cada 15 días. Compromisos laborales, familiares y mudanzas fueron diluyendo esa tradición.

El objetivo: diseñar una experiencia de producto que facilite encuentros regulares entre personas con realidades y preferencias diversas.

Flujo completo del servicio Prototipo interactivo Al menos una microinteracción Proceso de pensamiento visible

Seis personas. Seis tensiones reales.

Antes de abrir Figma, analicé cada perfil no como un personaje de un brief sino como un usuario con fricciones concretas que el producto tenía que resolver.

Victoria

38 · Palermo · Diseñadora gráfica

Creadora

La que históricamente organizó todo y cargó el peso del grupo. El producto existe para librarla de ese rol.

Mariano

40 · San Telmo · Chef

Anfitrión

Su casa y su cocina son recursos del grupo que nunca se activaron solos. Cuadra los activa automáticamente.

Ignacio

37 · Recoleta · Multinacional · Mellizos

El que más quiere

Su pareja Antoine es vegano. Tiene mellizos. Es quien más valora el encuentro pero tiene menos margen. Cuadra nunca propone un lugar sin opciones para Antoine.

Rafael

39 · Córdoba · Industria automotriz

El que viaja

Viaja a Buenos Aires para ver al grupo. Cada vez que vuelve, el grupo no puede. Cuadra le da la anticipación que necesita para que el viaje valga la pena.

Andrea

37 · La Plata · Madre soltera

La que planifica

Necesita días de anticipación para organizar el cuidado de su hijo antes de comprometerse. Cuadra nunca propone sin ese margen.

Blas

41 · Villa Crespo · Contador y músico · 3 hijos

Ventana mínima

Vida muy ocupada. Ventana de tiempo finísima. Cuadra detecta esa ventana sin pedirle nada extra.

La lectura superficial no alcanzaba.

La primera lectura era obvia. Necesitaba llegar más profundo.

"No se pueden coordinar", síntoma visible.
"Cada uno está en la suya", más cerca, aún superficial.
"Se perdió el hábito", consecuencia, no causa.
"El problema real: nadie tiene la energía colectiva para convertir el afecto en un plan concreto."

Juntarse no cuesta. Organizarse sí.

El afecto existe. Lo que no existe es el sistema que lo traduzca en un encuentro. Cuadra no organiza eventos, absorbe ese costo.

Cuadra

Un sistema que trabaja en silencio, conoce a cada integrante del grupo y propone el encuentro cuando las condiciones se alinean. No requiere que nadie organice. No requiere que nadie elija. El grupo hace una sola cosa: confirmar.

01

ONBOARDING ÚNICO
Se carga una sola vez

Nombre, ciudad, barrio, restricciones, días de preaviso, disponibilidad de casa, preferencia de encuentro y semana típica. Nunca se vuelve a preguntar.

02

CHECK-IN SEMANAL
30 segundos los domingos

La semana llega precargada con la rutina de cada uno. Solo se ajusta lo que cambió. Si nada cambió, ni hace falta abrir la app.

03

EL MATCH
Cuadra propone. El grupo confirma.

Cuando todos coinciden, Cuadra detecta el momento y elige el lugar. Día, hora, lugar y contexto, todo resuelto y explicado.

Home con el match, Cuadra propone Sábado 20:00
Home · Cuadró
Detalle del match, En casa de Mariano
Match Proposal

Cómo pensé el producto.

El proceso no fue lineal. Arrancó por el problema, pasó por los perfiles y terminó en las decisiones de sistema.

01

Leer los perfiles como tensiones, no como personas

Victoria no es solo "diseñadora de 38 años". Es quien carga con el peso organizativo del grupo. Rafael no es solo "el que vive en Córdoba". Es quien más esfuerzo hace para verse con sus amigos y más seguido se frustra cuando no puede. Cada perfil tenía una tensión de diseño adentro.

02

Definir qué hace el sistema solo

El principio que guió todo: el grupo no debería tomar ninguna decisión que el sistema pueda tomar por ellos.

¿Cuándo pueden verse?El sistema cruza disponibilidades.
¿Dónde se juntan?El sistema propone según perfiles.
¿Quién organiza?Nadie. Cuadra lo resuelve solo.
¿Por qué ese lugar?El sistema lo explica en una línea.
03

Diseñar la información mínima necesaria

Cada campo del onboarding tiene un uso directo en el sistema. Si no afecta ninguna decisión de Cuadra, no está.

Restricciones alimentarias→ afecta la propuesta de lugar.
Días de preaviso→ afecta cuándo se propone.
Casa disponible→ entra al pool de lugares.
Ciudad y barrio→ calcula zona de encuentro.
Semana típica→ base del match semanal.
04

Mantener la propuesta opaca para el usuario

El sistema hace cálculos complejos en el fondo. El usuario ve una sola cosa: "Cuadró. Sábado 20:30. En casa de Mariano." Con una línea de contexto: "Cocinero del grupo, apto vegano para Antoine, sin límite de horario." La complejidad del sistema se convierte en la simplicidad de la experiencia.

05

Validar que cada pantalla tiene una sola razón

WelcomePresenta el producto en 5 segundos.
Profile SetupRecolecta lo que el sistema necesita.
Typical WeekEstablece la base de disponibilidad.
Create GroupDefine las preferencias colectivas.
HomeEstado del grupo en tiempo real.
Match ProposalEl momento que el producto existe para generar.
Group DetailTransparencia de lo que sabe Cuadra.
EncuadraLa memoria del vínculo.
CelebrationEl cierre emocional del flujo.

Cada decisión tuvo al menos una alternativa seria.

Decisión 01 · La grilla de disponibilidad

Integración con calendario del teléfono

No todos usan calendario digital de forma activa. Forzar esa integración era diseñar para una minoría y transferir la responsabilidad al usuario.

Semáforo verde / naranja / rojo

El estado intermedio "tal vez" devuelve ambigüedad al sistema. Cuadra no puede construir una propuesta sólida sobre respuestas inciertas.

Grilla semanal precargada, estado binario

7 días × 4 franjas. Bloque encendido = disponible. La semana típica funciona como estado por defecto. Los domingos solo se ajusta lo que cambió.

La grilla fue diseñada inicialmente con días como columnas. En mobile, 7 columnas no entraban cómodamente. La versión final invierte la orientación, con los días como filas y franjas como columnas, más compacta y mejor para el tacto.
Grilla de disponibilidad vacía
Estado inicial
Grilla de disponibilidad completada
Con disponibilidad cargada

Decisión 02 · Quién elige el lugar

El grupo vota entre opciones

Presentar opciones devuelve la carga de decisión. El producto prometió eliminar exactamente eso.

Rol rotativo de organizador

Aunque el rol rote, alguien sigue activamente tomando una decisión. Contradice el principio central.

Cuadra decide automáticamente

Jerarquía: casa disponible, pool de favoritos, zona calculada. La propuesta incluye una línea que explica por qué ese lugar y no otro.

Match proposal, En casa de Mariano

Decisión 03 · La información del perfil

Toggle "¿Viajás para verte con el grupo?"

La ciudad ya contiene esa información. Campo redundante.

Campo dirección exacta

No necesaria para el cálculo de zonas. Genera incomodidad sin agregar precisión real.

Ciudad + barrio + días de preaviso

Un campo cubre tres casos: distancia, hijos, trabajo. El texto de ayuda lo explica sin agregar campos extra.

Profile Setup paso 2, preferencias y estilo

Decisión 04 · Las franjas horarias

Tres franjas: mañana / tarde / noche

El mediodía es un momento social relevante en Argentina que no encajaba en ninguna otra categoría.

Cuatro franjas con horario explícito

Mañana 8–12 · Mediodía 12–15 · Tarde 15–20 · Noche 20+

Decisión 05 · El flujo del match

Pantalla dedicada de match proposal

Más pasos, más fricción. La información esencial ya estaba disponible en el card de actividad del home.

Card en home + detalle a un tap

El impacto de "Cuadró." llega directo al home. El detalle completo está disponible antes de confirmar. ¡Voy! confirma la asistencia.

Las interacciones que se sienten.

Dropdown

Frecuencia de encuentro

Especificado en el brief
Cada 15 días
Cada semana
Cada 15 días
Cada mes
Semestral
Anual

Lista expandible con selección única. El componente más explícito del flujo como interacción.

Pills de selección múltiple

Restricciones alimentarias

Vegano Vegetariano Sin TACC Sin lactosa Sin mariscos Kosher Alergias / otros

Tap activa/desactiva. Estado en #00C9A7 con checkmark. Una persona puede tener más de una restricción.

Pills de selección múltiple

Preferencias del grupo

Comer Cultura Música Bar Casa Al aire libre Conciertos Karaoke

Mismo comportamiento. Comunica preferencias sin formularios.

Switches

Toggles del perfil

Casa disponible
Preferencia de salida

Feedback visual inmediato. Componentizados y consistentes a lo largo del onboarding.

Interacción principal

Grilla de disponibilidad semanal

Mañana
Mediodía
Tarde
Noche
Lun
Mar
Mié
Jue
Vie
Sáb
Dom

7 días × 4 franjas horarias. El gesto más repetido de la app. Precargada con la semana típica, solo se ajusta lo que cambió.

Creá tu grupo, estado vacío
Crear grupo · vacío
Creá tu grupo con La Banda, preferencias seleccionadas
Crear grupo · completado

Los componentes que sostienen el producto.

Cada elemento de la UI fue diseñado como un componente consistente, desde los bloques de la grilla hasta los switches del perfil. La librería completa está disponible en el Figma File.

Lo que no está,
y por qué importa haberlo sacado.

Toggle de viaje La ciudad de residencia ya contiene esa información. Si Rafael cargó Córdoba, el sistema sabe que viaja.
Dirección exacta Ciudad y barrio alcanzan para el cálculo de zonas. Puede generar incomodidad sin agregar precisión real.
Pantalla celebration separada de la confirmación El home confirmado la resuelve con menos pasos en el flujo.
Múltiples opciones de lugar para elegir Tres opciones siguen siendo una decisión. Una decisión sigue siendo peso.
Organizador rotativo Aunque el rol rotara, el peso solo cambiaba de manos. Contradice el principio central del producto.

Las decisiones de marca.

El nombre

  • LesGo, energía sin profundidad conceptual.
  • Pinta, doble sentido excelente, descartado.
  • Hueco, demasiado abstracto.
  • Dale, demasiado genérico.
  • Cuadra, cuadrar (encajar) + cuadra (manzana urbana). Dos lecturas. Una sola palabra.

El logo

Cuatro bloques oscuros separados en grilla 2×2. Los espacios entre ellos representan las calles. Un punto #00C9A7 en el centro representa el punto de encuentro. El logo es una metáfora del producto.

El color

Verde estándar (#22C55E), asociación directa con finanzas. Descartado.

Coral, en UI un punto pequeño en ese tono lee como error o alerta. Descartado.

#00C9A7, turquesa tirando a verde. Sin connotación financiera ni de error. El mismo color del bloque seleccionado en la grilla, logo y producto hablan el mismo idioma visual.

Encuadra

"Memoria" era genérico y frío. "Historial" era de banco.

Encuadra = en + cuadra = enmarcar. Cada encuentro queda enmarcado en el tiempo con fotos, fecha y lugar. La bitácora del grupo. Se construye sola después de cada encuentro.

Pantalla Encuadra de La Banda, bitácora del grupo

Si el producto siguiera creciendo.

Gestión de gastos compartidos

Dividir la cuenta después del encuentro desde la misma app. El paso natural que sigue al ¡Voy!

Meet virtual con temática

Cuando pasan semanas sin coincidencia presencial, Cuadra propone una llamada con intención, no vacía, con un tema para darle sentido.

Amistades a distancia permanente

Cuadra nació para grupos que pueden verse. Pero el vínculo no entiende de geografía.

Múltiples grupos con detección de conflictos

La arquitectura lo soporta desde el día uno. Si dos grupos coinciden en el mismo horario, Cuadra presenta la elección. El otro se reagenda automáticamente.