Product design · 01 · Trico
Convertir la actualización tributaria en un hábito diario
Trico reúne normas, decretos y conceptos de la DIAN en una app para contadores y abogados en Colombia. Antes de diseñar la interfaz, rediseñé la pregunta.
01
El problema
Contadores y abogados en Colombia viven la actualización normativa en modo supervivencia: la norma está en un portal, el decreto en otro PDF y el concepto llega por WhatsApp. No falta contenido; falta una capa de diseño sobre él.
“Busco una norma y termino en tres PDFs distintos, una página del gobierno que no carga y un grupo de WhatsApp preguntando si alguien la tiene actualizada.”
“El problema no es que no exista el contenido. El problema es que acceder a él en 2025 todavía se siente como 2005.”
02
El replanteamiento
El cliente llegó con una intuición: "debería haber una app para esto". Al explorarla, el hallazgo fue otro: el problema no era el acceso, era la ausencia de un hábito. Cualquier profesional puede llegar a una norma si se lo propone; lo difícil es mantenerse al día con constancia.
Eso redefinió el proyecto. Trico dejó de ser un buscador de normas y pasó a ser la app que convierte la actualización profesional en una rutina diaria.
03
Lo que encontramos
Los hallazgos salieron de encuestas a profesionales y de la comunidad que el equipo de Trico tiene a nivel nacional: más de 5.000 contadores y abogados. Aparecieron tres patrones:
- Leen en tiempos muertos: desplazamientos, pausas entre reuniones.
- Prefieren escuchar cuando están ocupados con otra tarea.
- Pierden motivación sin progreso visible ni referencia de otros colegas.
04
Decisiones clave
| Decisión | Qué elegimos | Qué descartamos y por qué |
|---|---|---|
| El núcleo de la app | La lectura diaria con progreso visible como centro | Un buscador como pantalla principal: resolvía el acceso, pero no daba razones para volver al día siguiente |
| Consumir en movimiento | Audio de cada artículo, sin perder el punto de lectura | Dejar solo la lectura y sumar el audio más adelante: excluía a quien estudia mientras se desplaza |
| Generar retorno | Olimpiadas con duelos entre normas y ranking comunitario | Recordatorios genéricos como único motor: generan aperturas, no hábito |
| Dónde vive la IA | Trico AI dentro del flujo de lectura, entrenado en el marco normativo colombiano | Un chat de IA como pestaña aparte: obligaba a salir de la lectura para preguntar |
05
Estructura antes que estilo
Los wireframes de baja fidelidad se enfocaron en tres flujos críticos: llegar a un artículo, percibir el progreso de lectura, y pasar entre lectura y audio sin perder contexto. Sin color ni estilo, cada decisión de layout tuvo que justificarse solo por jerarquía, y eso permitió validar la arquitectura con el cliente antes de invertir en lo visual.
06
El sistema
Diseñé el design system de Trico de cero, con documentación de uso para cada componente.
- Tokens semánticos
- 78
- Tokens tipográficos
- 31
- Componentes documentados
- 12
- El color señala, no decora: verde para progreso, rojo para documentos DIAN, negro para concentración.
- Cada tipo de contenido tiene su ícono propio: módulo, ruta, libro, concepto y artículo.
- Los íconos de interfaz son de una librería de terceros; los mosaicos de color para contenido, cuenta y avisos se diseñaron para Trico.
Primitivos · página 01 — ColorsVer en tamaño completo ↗
Tres pasos por color: claro, base y oscuro. En los tokens se llaman 100, 500 y 900.
El negro y el crema completan la marca. El negro es el acento: el color de la concentración.
Neutros en nueve pasos, del 900 al 100, todos con el mismo tono frío.
El naranja y el azul quedaron definidos, pero ningún token de fondo, texto ni borde los usa.
Tokens semánticos · página 01 — ColorsVer en tamaño completo ↗
Cada token dice para qué sirve, no qué color es: superficie, relleno, éxito, error, advertencia e info.
El verde de marca es el relleno principal: acciones y progreso.
Advertencia apunta a un verde: se ve casi igual que una confirmación. Hoy la conectaría al naranja.
Info apunta al mismo verde que éxito. Hoy la conectaría al azul.
Texto y borde repiten el patrón: text-warning y border-warning también son verdes.
Un token duplicado y «secundary» repetido en cuatro grupos: errores que una revisión automática de los tokens habría detectado.
Especificación del botón · página 09 — ButtonVer en tamaño completo ↗
Cuatro estados de interacción documentados, con el activo en el verde de marca.
Una regla de uso, no solo una muestra: el ícono va antes o después del texto, nunca a ambos lados.
Variantes del botón · página 09 — ButtonVer en tamaño completo ↗
La píldora, con sus cuatro estados: normal, hover, presionado y deshabilitado.
En el rectangular, la propiedad «State» tiene ocho valores: cuatro son estados y cuatro son variantes visuales (transparente, blanco y dos de borrar). Hoy separaría variante, estado y tamaño.
Íconos propios · página 05 — Icon libraryVer en tamaño completo ↗
Cuenta y avisos: perfil, pagos, mensajes, favoritos, seguridad, notificaciones y redes. Todos comparten la misma forma: un mosaico redondeado de color con el glifo en blanco.
Un ícono por tipo de contenido: módulo, ruta, libro, concepto y artículo.
Acciones de lectura y ayuda: guardar un artículo, preguntas frecuentes y lectura en curso.
Los mosaicos tienen su propia gama, aparte de los colores de estado. El color sirve para reconocer cada ícono de un vistazo, no para decir si algo salió bien o mal.
Del sistema a la pantalla · Ajustes y NotificacionesVer en tamaño completo ↗
En Ajustes, el mosaico identifica cada opción antes de leerla: cuenta, guardados, privacidad, suscripción, notificaciones y tres formas de conectar con Trico.
En las notificaciones del sistema, el ícono dice de qué trata cada aviso: seguridad, una función nueva, una actualización, el almacenamiento o la cuenta.
07
Diseñar lo que nadie mira
Un hábito se rompe en los bordes: una búsqueda sin resultados, un artículo sin audio, una conexión que se cae. Por eso el diseño no se quedó en el camino feliz. Cada estado vacío explica qué pasa y ofrece una salida, y cada error dice qué corregir.
- Pantallas móviles diseñadas
- 394
- Estados vacíos
- 26
- Notificaciones de éxito, aviso y error
- 29
- Caminos de error al iniciar sesión
- 10
08
El hábito también se diseña fuera de la app
Si el objetivo era que la gente volviera, la app no podía ser el único punto de contacto. Diseñé 28 plantillas de email para todo el ciclo de vida: bienvenida y confirmación, check-ups de lectura, progreso, recompensas, invitar colegas, prueba de premium, encuestas de satisfacción y avisos de artículos y rutas nuevas.
09
Resultado
Entregué Trico al cliente con nueve módulos diseñados, entre ellos rutas de aprendizaje con progreso, reproductor de audio, olimpiadas con duelos, ranking, Trico AI con resúmenes de decretos, eventos y comunidad, suscripción con PSE, PayPal y tarjeta, y un sistema de PQRS.
Antes del lanzamiento, más de 2.000 profesionales se sumaron a la lista de espera sin pauta pagada. Salí de la agencia al entregar el producto, así que no tengo datos de uso posteriores. Si siguiera en el proyecto, mediría el éxito con lo que define un hábito:
- Retención a 7 y a 30 días.
- Días por semana con al menos una lectura o un audio.
- Porcentaje de personas que completa una ruta de aprendizaje.
- Minutos de audio por sesión, para saber si el formato en movimiento se usa de verdad.
“Liberman entendió desde el principio que no estábamos construyendo solo una app: estábamos construyendo el hábito de estudio de miles de contadores y abogados. Eso se nota en cada pantalla.”
10
Qué haría distinto
Definiría desde el día uno cómo medir el hábito. Era el objetivo central del producto y es el dato que hoy más falta para demostrarlo.