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.
9:41●●● 88%
Day in progress
Marco
M
⏸ Break in 42 min 🕕 Shutdown 6:00pm
Energy
High
4.5h / 9h
Ring · day completed · 50%
Focus mode
End day
4.5h
Tracked
1/3
Breaks
09:02
Started
Today
History
Profile
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
02 · 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
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 · 27 · consultor · entrevista 03
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 observado
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

El problema no era falta de disciplina.
Era falta de señales.

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."
03 · 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, no 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
04 · Decisiones

Cuatro decisiones,
cuatro 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 — no inferida por 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, sin IA, sin 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. Reconocer la limitación es más útil que simular precisión.
2Decisión D2 · Pausas

Pausas por temporizador simple — no por 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, no quitarle el control.

Trade-off: bloquear apps no es viable en iOS sin MDM, y el bloqueo duro va contra el ADN del producto. Esta decisión es producto + plataforma — una restricción técnica que se convirtió en una elección de diseño deliberada.
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 — sin la cual el producto no funciona. Una decisión de producto, no solo una postura moral.
05 · Cómo funciona

Cuatro mecanismos.
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, sin biométricos.

1Tres estados con color semántico — verde, naranja, gris
2El anillo es el primer elemento visual de home — comunica sin palabras
3Pulsación larga para corregir en cualquier momento del día
High
Energía alta
Trabajo profundo, decisiones complejas, reuniones difíciles.
Medium
Energía media
Tareas operativas, emails, seguimientos, admin.
Low
Energía baja
Día de pausas, tareas ligeras, recuperación.
⏸ 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, sin 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
9:41●●● 88%
11:30
Tuesday, January 14
f
Fika now
Hora de una pausa ⏸
90 min activo. Tómate 5 — sigo aquí cuando vuelvas.
f
Fika 5:30pm
Tu cierre está cerca
30 min para el cierre que configuraste. Empieza a cerrar.
f
Fika 6:02pm
Día cerrado · 9h 00min
Energía sostenida hoy. Mañana es otro día.
🧠 Focus mode · fricción intencionada

Concentración que no
te encierra.

Focus mode activa Apple Focus + silencia notificaciones durante 25 min. 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
FOCUS MODE
Trabajando en
Informe mensual Q1
14:32
tiempo restante
Bloque 25 min
Inicio 10:32
Interrumpir foco
📈 Resumen diario · sin juicio

Datos sin ranking,
sin gamificación.

Cuando el día se cierra, Fika muestra horas activas, pausas, energía promedio. Sin rachas, sin "días buenos vs malos", sin 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
9:41●●● 88%
▼ Resumen diario
Buen martes, Marco.
8h 12mActivo
3 / 3Pausas
AltaEnergía prom.
Hoy de un vistazo
0911131517
💡
Patrón observado Después de las 3pm tu energía tiende a bajar. Reserva ese bloque para tareas más ligeras si puedes.
"Mañana es otro día."
06 · 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. Los estados "raros" son donde un producto deja de generar confianza si no están diseñados.

9:41●●●
📊
Sin datos aún
Completa 3 días para ver tu primer resumen semanal.
T
W
Día 1 de 3
▼ 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.

9:41●●●
Day in progress
Marco
M
High
energy
4.5h
Tracked
1/3
Breaks
▼ 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.

9:41●●●
!
Notificaciones desactivadas
Sin permiso, las pausas y el cierre no llegan a la pantalla de bloqueo. Puedes seguir usando la app, pero pierdes lo más útil.
Activar
Banner persistente · arriba de Today
▼ 03 · Edge case
Sin permisos no es "roto"

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

9:41●●●
Cuando estés listo
No has empezado el día en 3 días. Si necesitas un descanso, está bien.
Empezar el día
Inicio sugerido · 9:00am
▼ 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.

07 · Cómo llegué aquí

De la entrevista al píxel.
Cuatro etapas, una decisión por etapa.

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: el problema no era falta de disciplina, era falta de señales. Eso reencuadró todo el producto — dejó de ser "una herramienta de productividad" y pasó a ser "un reemplazo de las señales que la oficina daba gratis".
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 validado: el focus mode necesita explicar qué hace antes de activarse — no es obvio. Añadí un tooltip + tiempo restante visible. La pregunta apareció 0 veces en la siguiente ronda.
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
08 · Sistema

Design system + accesibilidad,
juntos.

Tokens, escala, componentes y A11y como una sola pieza. El sistema no es decoración — 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
CH. 08 · 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, no 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
09 · Mercado · Modelo

Espacio descubierto.
Modelo que separa roles.

Análisis competitivo de 5 apps comparables — solo apps 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
Structured
Tiimo
RescueTime
Reclaim.ai
One Sec
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 — protege a Marco y sostiene la confianza.

Free Para Marco
Inicio/cierre, Energy Ring, alertas de pausa, focus mode. Sin rachas, sin 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.
10 · 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, no es porque "Marco no quiere cerrar"; es porque uno de los pasos anteriores se rompió.

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é" — no 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. Lo que importa es la lógica del funnel, no los números.
11 · 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. Lo mejor de un caso es una conversación real sobre él.

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