Caso UX/UI · Nuclio Bootcamp · 2025

Cinco taps al día.
El resto es cosa de Fika.

Fika es una app iOS para trabajadores remotos. Empiezas el día con un tap, declaras cómo te sientes, y el sistema te recuerda pausas, modos de concentración y cierre, para que no tengas que pensar en ello entre taps.

Concepto exploratorio. Algunos comportamientos (el modal con tiempo restante en Focus mode, horas registradas sin detección real de actividad) requieren extensiones de API o sensores fuera del alcance del MVP. Lo señalo donde importa.
Mi rol
UX/UI · End-to-end
Research · IA · UI · prototype · DS
Investigación
46 encuestas + 6 entrevistas
Encuesta exploratoria · no probabilística
Diseño
14 pantallas + estados
Light / dark / empty · 3 notif
Sistema
Tokens · Energy Ring
Color · tipo · spacing · A11y
Modelo
B2B2C · Freemium
iOS 17 · Nuclio Bootcamp
[ Snapshot ]

El problema y la respuesta,
en una sola pantalla.

Trabajar desde casa borra los límites naturales del día. Fika reemplaza esas señales sin pedirte disciplina.

El problema

El home office
borró las señales del día.

Sin café con compañeros, sin reunión que marque el final, sin trayecto que cierre la jornada. Los trabajadores remotos acumulan fatiga sin darse cuenta y nunca desconectan del todo.

  • Mismo espacio físico · el horario se disuelve
  • Las pausas naturales de la oficina desaparecen
  • El presentismo digital reemplaza al presencial
La respuesta

No añade más trabajo.
Te quita la presión
de organizarte solo.

Fika funciona en silencio durante el día con señales pasivas: pausas a tiempo, concentración intencionada, cierre claro. El usuario declara cómo empieza, el sistema mantiene el ritmo.

  • Un tap empieza el día · otro lo cierra
  • Pausas sugeridas cada 90 min · sin acción del usuario
  • Resumen sin juicio · datos neutros, no un ranking
[ Research ]

No era falta de disciplina.
Era falta de señales.

46 respuestas de encuesta + 6 entrevistas con trabajadores remotos. El hallazgo más fuerte fue una frase que distintos perfiles repetían casi con las mismas palabras.

Hallazgo clave · autoreportado · n=46
83%

No logra separar trabajo de vida personal. La oficina daba límites externos que ya no existen.

Cita de usuario

"Termino el día sin saber si trabajé mucho o poco. Solo sé que estoy cansado."

Marco · persona compuesta — ilustrativa (síntesis de entrevistas)
Dolor emocional
45%

Duda si su empresa confía en su rendimiento. Esa ansiedad alimenta el presentismo digital: trabajar más para compensar la visibilidad perdida.

Contexto social
61%

Siente aislamiento real. Las pausas informales de la oficina regulaban el ritmo del día. Ya no existen.

Comportamiento autoreportado
7/10

No hacen pausas formales aunque saben que les ayudarían. Saber no alcanza; necesitan algo que se lo recuerde.

Métodos · alcance declarado
n=46Encuesta exploratoria · LinkedIn + IG · no probabilística
n=6Entrevistas en profundidad · 30-45 min
6 appsAnálisis competitivo + heurísticas de Nielsen
Síntesis de investigación

La oficina funcionaba con señales compartidas.
En casa, cada uno tiene que construir las suyas.

Qué cambió esto Dejé de diseñar "una herramienta de productividad" y empecé a diseñar "un reemplazo de las señales que la oficina daba gratis."
[ Persona ]

Diseñé para Marco.
La empresa se beneficia después.

Un solo persona primario, compuesto de las 6 entrevistas, para mantener el foco en el usuario antes que en el comprador.

Contexto

  • Trabaja desde casa 4 días a la semana
  • Salta de una reunión a otra sin transición
  • Vive y trabaja en el mismo espacio físico
  • iPhone + MacBook · ecosistema Apple

Necesidades

  • Estructura sin sentirse controlado
  • Pausas que no dependan de acordarse de hacerlas
  • Cerrar el día con una sensación real de cierre
  • Datos sin juicio · solo información

Le frustra

  • Apps de productividad que exigen setup antes de nada
  • Gamificación que premia trabajar más
  • Notificaciones en el peor momento posible
  • Apps que pretenden saber cosas que no pueden

Dispara decisión

  • D1 · Energía declarativa con corrección manual
  • D2 · Pausas por temporizador, no por detección
  • D3 · Fricción intencionada en lugar de bloqueo
  • D4 · La empresa solo ve datos agregados

Un martes típico de Marco

Cómo cambia la energía de Marco durante el día, y dónde interviene Fika sin pedirle nada. La barra muestra energía percibida, reconstruida a partir de entrevistas.

Baja Media Alta
Hora
Etapa
Qué pasa
Pensamiento
Energía
9:00am
Inicio
Abre el portátil sin transición. Directo al email.
"¿Dónde me quedé ayer?"
Media
11:30am
Bloque de foco
Lleva 2.5h en el escritorio sin levantarse. No se ha dado cuenta de la hora.
"Estoy en flow, no quiero cortarlo."
Alta
2:00pm
Tarde
Después de comer, abre Slack y se distrae. La energía baja.
"No estoy rindiendo, debería seguir."
Media
6:30pm
Sin cierre
Sigue respondiendo mensajes hasta las 7:30pm. El día se disuelve sin terminar nunca.
"¿Cuándo terminé hoy?"
Baja
Con Fika
Estructura
Empieza con un tap. A los 90 min llega la sugerencia de pausa. Cierre a las 6:00pm con resumen sin juicio.
"Cerré el día. Mañana empiezo de nuevo."
Sostenida
[ Decisiones ]

Cuatro decisiones
con trade-offs reales.

Cada decisión resuelve una tensión entre lo que Marco necesita, lo que la plataforma permite, y lo que la investigación validó. Cada una tiene un coste declarado.

1Decisión D1 · Energía

Energía declarativa y corregible sin inferencia de sensores

Marco declara su energía al empezar (Alta / Media / Baja). El sistema simplemente la mantiene visible y le deja corregirla en cualquier momento, sin sensores, IA ni biométricos.

Trade-off: el sistema no sabe realmente cómo se siente Marco. Pero cualquier intento de "saberlo" requeriría wearables o biométricos que la app no tiene.
2Decisión D2 · Pausas

Pausas por temporizador simple en vez de detección de inactividad

Tras 90 min de día activo (temporizador desde "empezar el día"), Fika sugiere una pausa. No detecta si Marco se levantó, fue al baño o scrolleó Twitter. Solo sabe que pasaron 90 min en el reloj.

Trade-off: si Marco ya descansó, la sugerencia llega igual. Aceptable porque (a) puede descartarla con un swipe, (b) sugerir una pausa innecesaria cuesta menos que no sugerir una necesaria.
3Decisión D3 · Focus

Fricción intencionada, no bloqueo de apps

Focus mode activa Apple Focus + silencia notificaciones, pero NO bloquea apps. Si Marco quiere salir, ve un modal con el tiempo restante del bloque para decidir conscientemente. La intención es interrumpir el piloto automático dejando el control en sus manos.

Trade-off: bloquear apps no es viable en iOS sin MDM, y el bloqueo duro va contra el ADN del producto.
4Decisión D4 · B2B2C

La empresa ve datos agregados, nunca individuales

Si la empresa ve datos individuales (pausas, energía, horas), la app de bienestar se convierte en herramienta de control. La empresa solo ve métricas agregadas con mínimo 5 usuarios: sin nombres, sin perfiles individuales.

Trade-off: dificulta el upsell B2B (managers que quieren ver "a su gente"). A cambio, se gana la confianza de Marco, y sin ella el producto no funciona.
[ Cómo funciona ]

Cuatro mecanismos
sobre una sola idea: fricción mínima.

Energy Ring, pausas, concentración intencionada y resumen diario. Cada uno responde a un pain point de la investigación y declara su propio límite técnico.

Componente central · Energy Ring

Tu energía,
declarada y editable.

Marco declara cómo empieza el día: Alta, Media o Baja. El sistema lo refleja todo el día y le deja corregirlo en cualquier momento, sin sensores ni biométricos.

1Tres estados con color semántico: verde, naranja, gris
2El anillo es el primer elemento visual de home, y comunica sin palabras
3Pulsación larga para corregir en cualquier momento del día
Sistema de pausas · ActivityKit + Push

Las pausas llegan
a ti.

Cada 90 minutos de día activo, Fika sugiere una pausa en la pantalla de bloqueo. La notificación es accionable: "Listo, pausé" o "Luego", sin abrir la app ni tap extra.

1Notificación en Lock Screen con acción inline
2Sonido suave + háptico sutil, no interrumpe
3Si Marco la ignora 3 veces, Fika baja el volumen; no insiste
Focus mode · fricción intencionada

Concentración que no
te encierra.

Focus mode activa Apple Focus + silencia notificaciones durante 25 min, y no bloquea apps. Si Marco intenta salir, ve un modal con el tiempo restante para decidir conscientemente. Interrumpe el piloto automático sin quitarle el control.

1Activa iOS Focus Filter: silencia mensajes y notificaciones
2Fondo oscuro como señal visual: "estás en otro modo"
3Botón discreto "Interrumpir": existe pero no invita a salir
Resumen diario · sin juicio

Datos sin ranking,
sin gamificación.

Cuando el día se cierra, Fika muestra horas activas, pausas, energía promedio. Deja fuera rachas, "días buenos vs malos" y notificaciones diciendo "tu rendimiento está bajando". Una recomendación accionable basada en patrones simples.

1Datos neutros: horas, pausas, energía declarada
2Recomendación desde una regla simple, no IA
3Tono amable: "Mañana es otro día", sin penalización por bajones
[ Estados especiales ]

Qué pasa cuando algo
se sale del flujo ideal.

Empty state como motivación, dark mode siguiendo al sistema, edge cases con respuestas predecibles.

[ 01 · Empty progresivo ]
Sin datos no es "roto"

Día 1 de 3 visualiza el progreso hacia el primer resumen. Convierte un vacío en motivación, sin penalizar.

[ 02 · Dark mode ]
Sigue al sistema

Fika respeta la configuración de iOS. Verde y naranja se ajustan ligeramente para mantener WCAG AA sobre fondos oscuros.

[ 03 · Edge case ]
Fika sigue funcionando sin permisos

Si Marco deniega notificaciones, Fika sigue funcionando. Un banner persistente explica el coste sin insistir en cada apertura.

[ 04 · Edge case ]
Tres días sin empezar

Si Marco no abre la app en días, Fika no insiste ni cuenta una racha rota. El mensaje cambia: "si necesitas un descanso, está bien."

[ Probá el prototipo ]

El día completo, interactivo.
Arrancalo, viví, terminalo.

Declarrá tu energía, mirá el countdown del break, entrá en modo focus, y revisá tu resumen diario con datos reales de la sesión.

[ Cómo llegué aquí ]

De la entrevista al píxel
en cuatro etapas.

No salté de la investigación a la pantalla bonita. Cada etapa produjo decisiones que sobrevivieron hasta la versión final.

Registro del proyecto

Ocho semanas, una decisión clave por etapa.
8 semanas · proyecto bootcamp
Sem 1-2 Research Output · 52 citas en 4 clusters
Encuesta + entrevistas + affinity mapping
46 respuestas de encuesta + 6 entrevistas en profundidad. Codifiqué 52 citas y las agrupé en 4 clusters de dolor. Una se repetía en 5 de 6 entrevistas con palabras casi idénticas.
Decisión clave: reencuadrar el brief alrededor del cluster que se repetía. Todo lo que vino después — anillo, pausas, cierre — tenía que reemplazar una señal, no sumar una tarea.
n=46 encuesta n=6 entrevistas 52 citas 4 clusters
Sem 3 Exploración Output · 8 sketches + 1 ganador
Sketches en papel antes de tocar Figma
Probé 8 layouts de home en papel: dashboard tradicional, lista de hábitos, agenda, anillo central, agenda + foco lateral, etc. Los filtré con dos preguntas: ¿se entiende en 2 segundos? ¿le pide algo a Marco para ser útil?
Decisión clave: Energy Ring central. Lo primero que busca el ojo al abrir, sin requerir un tap. Comunica estado por color, sin necesidad de leer.
8 layouts probados 2 finalistas 1 ganador
Sem 4-5 Lo-fi + testing Output · 14 frames + 3 ajustes
Wireframes en Figma + 3 sesiones moderadas
Llevé los sketches a Figma con grids y tipografía del sistema. Testé con 3 trabajadores remotos (no participantes de la investigación previa). Cada uno ejecutó 4 tareas pensando en voz alta. La pantalla de focus mode produjo la fricción más interesante: "No entendí bien qué hace."
Ajuste (señal exploratoria, n=3): el focus mode necesita explicar qué hace antes de activarse, porque no es obvio. Añadí un tooltip + tiempo restante visible. La pregunta apareció 0 veces en la siguiente ronda (misma muestra reducida, n=3, exploratorio — no concluyente).
14 wireframes 3 sesiones 3 ajustes aplicados
Sem 6-8 UI + sistema Output · 14 frames + DS + estados
UI final con tokens, dark mode y estados especiales
Apliqué el design system definido (paleta, tipografía Manrope, escala de 4px). Añadí dark mode siguiendo al sistema, empty states progresivos, edge cases para permisos denegados y "tres días sin empezar". Cada estado nació de una pregunta: "¿qué pasa si esto no pasa?".
Output final: 14 pantallas + 4 estados especiales + mockups de notificación + un Design System base de 7 componentes core.
14 frames 4 estados 3 notifs 7 componentes
[ Sistema ]

Design system + accesibilidad,
juntos.

Tokens, escala, componentes y A11y como una sola pieza. El sistema es lo que mantiene las pantallas coherentes dentro de seis meses.

Tokens · color

Paleta semántica · azul + estados

Azul de marca como hilo conductor. Verde / naranja / rojo solo cuando significan algo (Alta / Media / Baja, o estados del producto).

--brand
Identidad, CTAs, estados activos
--energy-hi
Energía alta · estados positivos
--energy-mid
Energía media · alertas suaves
--energy-low
Energía baja · destructivo
--ink
Texto body · 0E1116, no negro puro
Tokens · tipografía

Manrope · una familia bien usada

Una sola tipografía con 5 pesos, escala modular 1.2. Manrope se lee bien en tamaños pequeños y se siente amigable sin ser infantil.

Empieza tu día
28-44 · 800
Display
Esta semana
17-20 · 700
Section
Focus mode activo
14 · 600
Label
Empieza tu día para activar el sistema.
13 · 400
Body
[ DESIGN SYSTEM ]
11 · mono
Eyebrow
Tokens · spacing

Base 4px · siete pasos

Múltiplos de 4. Cada paso tiene un propósito: gap inline, padding de tarjeta, separación de bloques.

8
12
16
24
32
48
64
Componentes · usados

Core aplicado

Lo que realmente usé en los mockups, no una lista de deseos:

1.Energy Ring · 3 estados
2.Pills de estado · color semántico
3.Botones · primario / secundario / destructivo
4.Tarjeta stat · valor + label
5.Fila de lista con chevron
6.Banner · warning + info
7.Notificación Lock Screen
Accesibilidad

Mínimos verificados

Lo que se verificó realmente en el caso. Lo que falta está declarado en lugar de oculto.

✓
Contraste WCAG AA en light + dark
✓
Tap targets ≥ 44×44pt en cada acción
✓
El color no es la única pista: siempre acompañado de texto + icono
✓
Reduce Motion respetado (animación → fade)
!
Dynamic Type · testing extendido pendiente
!
VoiceOver · labels diseñados, no testeados con usuarios
[ Mercado · Modelo ]

Espacio descubierto.
Modelo que separa roles.

Análisis competitivo de 5 apps comparables: solo las que compiten realmente en el mismo problema. El modelo B2B2C separa quién paga de quién usa.

Análisis competitivo · 5 apps directas

Estructura + energía · nadie las combina

App Estructura Energía Pausas auto Focus B2B2C
Fika ●Sí ●Sí ◐Parcial ●Sí ●Sí
Structured ●Sí ○No ○No ○No ○No
Tiimo ●Sí ◐Parcial ◐Parcial ○No ○No
RescueTime ◐Parcial ○No ◐Parcial ○No ●Sí
Reclaim.ai ◐Parcial ○No ○No ◐Parcial ●Sí
One Sec ○No ○No ○No ●Sí ○No
● Sí ◐ Parcial ○ No
Oportunidad de Fika

Structured y Tiimo dan estructura pero ignoran la energía. RescueTime mide tiempo pero no estructura el día. One Sec interrumpe distracciones pero no organiza nada. Fika combina estructura + energía + focus + B2B2C. Sus pausas tienen el límite real de depender de un inicio de día manual (◐), una decisión deliberada que prioriza el control del usuario sobre la detección invisible.

Modelo · B2B2C Freemium

La empresa compra,
Marco usa.

La empresa nunca ve datos individuales. Mínimo 5 usuarios para activar la vista agregada, lo que protege a Marco y sostiene la confianza.

Free Para Marco
Inicio/cierre, Energy Ring, alertas de pausa, focus mode. Deja fuera rachas y gamificación premium.
Premium €3,99 / mes
Resumen detallado, historial completo, exportación de datos, recomendaciones extendidas basadas en reglas.
B2B Por empleado
Todo Premium incluido. Vista agregada para managers (Fase 2). Datos individuales nunca expuestos.
[ Métricas ]

Cómo sabremos
que Fika funciona.

North star + métricas leading que la predicen + métricas lagging que la sostienen. Los objetivos son aspiracionales — se ajustan con datos reales del primer mes.

Framework de medición · post-lanzamiento

Un funnel de comportamiento.
Cada caída es una hipótesis.

En lugar de una lista plana de KPIs, veo el journey del usuario como un funnel: cada paso depende del anterior. Si el cierre del día cae, antes se rompió uno de los pasos anteriores. "Marco no quiere cerrar" es el diagnóstico equivocado.

01
Permiso de notificaciones en onboarding
Sin esto, nada del sistema funciona
≥ 70%Umbral
02
Día iniciado (día 1)
Tap de "Empezar" en primer uso
≥ 80%Aspiracional
03
Primera pausa aceptada
Tap de "Listo, pausé" en vez de un swipe de descarte
≥ 35%Realista
04
Focus mode completado
El bloque llega a 0:00 sin interrupción
≥ 55%Realista
05
Cierre activo del día
Tap explícito de "Cerrar día"
≥ 50%Aspiracional
★
North Star · ≥3 cierres sostenidos por semana
Captura el ritual, no el uso aislado · benchmark consumer ~15-25%
≥ 40%North Star
Métricas lagging · 30+ días
Retención D14
≥ 30%
Usuarios activos a las 2 semanas: confirma que el ritual se sostiene.
NPS in-app
≥ +30
Encuesta cada 30 días en el primer minuto del resumen.
Los umbrales son hipótesis priorizadas por riesgo. Cada uno se ajusta con el primer mes. Sin una baseline real, fijar números exactos es especular. La lógica del funnel importa más que los números exactos.
[ Sobre mí ]

Quién diseñó Fika,
y qué busco ahora.

Fika fue mi proyecto final del bootcamp UX/UI en Nuclio Barcelona. Lo refiné después para poder defenderlo en entrevistas. Si te llamó la atención, hablemos.

Hard skills

Herramientas y prácticas

Research & estrategia

Entrevistas 1:1 Encuesta exploratoria Affinity mapping Business Model Canvas

Producto

Funnels de adopción Métricas leading/lagging Trade-offs documentados

Design

Figma · auto-layout · variants Design tokens Apple HIG

Idiomas

Español nativo Inglés C1
Disponibilidad

Qué busco

Seniority
Junior · Mid Product/UX Designer
Modalidad
Remoto · híbrido en BCN/Madrid
Geografía
ESP · LATAM · UE
Industrias
Producto · SaaS · Wellness
La decisión más difícil

D4 · Solo datos agregados, nunca individuales

El modelo B2B2C tenía una tensión obvia: la empresa paga, la empresa quiere datos. Pero si Fika expone pausas o energía individual, deja de ser bienestar y se convierte en vigilancia. Decidí que la empresa solo ve métricas agregadas, mínimo 5 usuarios. Eso dificulta el upsell pero protege la confianza de Marco. Sin ella, el producto no funciona. Si hablamos, esta es la decisión que defenderé con más fuerza.

Trabajar bien
empieza por terminar bien.

Si quieres ver el archivo de Figma, profundizar en la investigación, o discutir cualquier decisión del caso, escríbeme.

Fika · UX/UI Case · Nuclio Bootcamp · 2025 · Nicolas Marciano