Propuesta de colaboración · Abril 2026
Propuesta para
construir un nuevo
framework de trabajo
Cómo podría evolucionar el rol de Rayo dentro del equipo WiseCost — aportando metodología de producto y criterio UX, sin reemplazar ni superponer las responsabilidades que ya funcionan.
Alfonso Product Owner
Rayo Estudio Product + UX
Cambalache Dev + QA + Producto
1 / 8
Contexto
¿Qué cambió y cómo nos nos adaptamos?
Antes
Diseño y desarrollo en ciclos separados
El diseño y el desarrollo operaban en mundos distintos. Rayo entregaba prototipos, Cambalache los implementaba. Los ciclos eran más largos y la coordinación, más costosa.

MVP funcional con iteración más lenta
Ahora
React + Next.js + Claude
Alfonso rehizo la plataforma desde cero con Claude. La distancia entre una buena especificación y código funcional se redujo enormemente. Cambalache también aporta profundo conocimiento del producto. El equipo puede moverse mucho más rápido si trabajamos bien coordinados.

Nuevo modelo de colaboración posible
La pregunta que queremos responder juntos
¿Cómo puede Rayo aportar más valor en este nuevo contexto, sin duplicar lo que ya hace bien el equipo?
Esta presentación es una propuesta para explorar y discutir — no un modelo cerrado. Queremos acordar la forma de sumar más valor, y que cada parte del equipo opere en donde más puede aportar.
2 / 8
Estructura de equipo
Roles propuestos — a discutir
AA
Alfonso
Product Owner · Visión estratégica
  • Define prioridades y visión de negocio
  • Foco en lo comercial y partnerships
  • Validación final antes del release
  • Decisiones de roadmap y arquitectura de producto
RY
Rayo
UX + Metodología de producto
  • Aporta visión UX profesionalizada en cada feature
  • Traduce necesidades de negocio a flujos y specs
  • Trabaja con Claude para iterar diseño rápido
  • QA UX/UI — guardiana de la experiencia
  • A/B testing y optimización del sitio de venta
  • Métricas de UX: qué medir y para qué
  • Documentación del producto y onboarding
  • Desarrollo de features puntuales end-to-end
  • Alineada con el roadmap que define Alfonso
CB
Cambalache
Dev + QA + Conocimiento del producto
  • Diego: conocimiento profundo del producto y lógica de negocio
  • Diego: webhooks, integraciones, decisiones técnicas
  • Florencia: QA funcional — es igual de crítico que el diseño
  • Revisión e integración de código (propio o via Claude)
  • Performance, seguridad, arquitectura
  • Referente técnico en decisiones de feature
3 / 8
Proceso propuesto
Cómo podría fluir una feature nueva
1
Alfonso
Kick-off
Define prioridad de negocio y contexto de la feature
2
Diego + Rayo
Exploración conjunta
Diego aporta conocimiento del producto; Rayo, criterio UX. Juntos definen el problema real.
3
Rayo
Diseño + Spec
Figma · flujos · spec técnica · borrador con Claude si aplica
4A
Rayo
Desarrollo asistido con Claude
Rayo implementa una primera version funcional end-to-end sobre la spec, aprovechando Claude para acelerar entrega.
4B
Cambalache
Desarrollo +Revisión técnica e integración
Cambalache desarrolla también features, revisa los desarrollos de Rayo, ajusta e integra. Diego valida lógica y arquitectura; Florencia ejecuta QA funcional.
5
Rayo + Alfonso
Revisión y release
QA UX de Rayo + validación final de Alfonso → release
Nota sobre el paso 2: Diego conoce el producto en profundidad. La exploración conjunta Rayo + Diego antes de diseñar evita rehacer trabajo y asegura que el diseño sea técnicamente viable desde el día uno.
4 / 8
Alcance del trabajo
Áreas de impacto de Rayo
Plataforma — mejoras continuas
  • Payroll Periods: mejora UX + integración completa
  • Módulos de Reporting (pendientes)
  • Mobile accessibility para contractors/employees
  • Sistema de mejora continua: encuestas in-app, user testing
  • QA UX/UI general de la plataforma
Landing / conversión
  • Estrategia de métricas: qué medir, cómo y para qué
  • Setup Google Analytics + eventos clave
  • A/B testing de copy, CTAs y estructura
  • SEO y contenido del sitio
  • QA UX/UI general
Design System
  • Design tokens Figma ↔ React (colores, tipografía, spacing)
  • Componentes reutilizables alineados con Claude
  • Integración Figma → Claude → código consistente
  • Guía de estilos viva y mantenida
Documentación y onboarding
  • Documentación del producto y roadmap
  • Videos y demos para usuarios
  • Entrenamiento y materiales de onboarding
  • Criterios de aceptación por feature
5 / 8
Data & conversión
Estrategia de métricas
El orden correcto: primero definir qué decisiones queremos tomar con los datos, después qué medir.
Métricas de plataforma
¿Los usuarios completan los flujos clave?
→ Funnel completion de LAbor Distribution, Carga de Time Tracking, Aprobación de Timesheets, etc.
¿Dónde abandona el usuario?
→ Drop-off rate por paso. Input para mejoras UX priorizadas.
¿Qué tan satisfechos están?
→ NPS in-app o encuestas cortas en momentos clave del flujo
Métricas de landing / conversión
¿Cuántos visitantes se convierten?
→ CVR por fuente de tráfico. A/B testing de CTAs y copy.
¿Qué sección genera más interés?
→ Scroll depth, click heatmaps, tiempo en página
¿Cómo llegan los usuarios?
→ Canales de adquisición. Impacto de SEO y partnerships.
6 / 8
Integración
Figma → Claude → código consistente
🎨
Figma
Tokens nombrados · Componentes · Guía de estilos
→
⚡
Spec + Prompt
Rayo traduce diseño a spec técnica + instrucciones para Claude
→
🤖
Claude
Genera código usando los tokens y componentes definidos
→
✅
Cambalache
Revisa, integra y hace QA técnico
Tokens como lenguaje común
Colores, espaciados y tipografía nombrados consistentemente en Figma = menos ambigüedad para Claude al generar código.
Rayo es guardiana del sistema
Cualquier nuevo componente pasa por Rayo antes de entrar al código. Evita fragmentación visual a medida que la plataforma crece.
Velocidad sin perder coherencia
El DS bien definido permite que Claude genere UI consistente. Rayo itera diseño en paralelo al desarrollo.
7 / 8
Plan de acción
Lo que proponemos probar
01
Un feature pilot para calibrar el workflow
Elegir una feature del backlog — se sugiere Payroll Periods o una sección de Reporting — y aplicar el nuevo modelo de trabajo. Rayo trae el diseño y la spec, Alfonso aporta contexto de negocio, Diego aporta contexto técnico y de producto, Florencia hace QA funcional, Alfonso valida. Si el piloto funciona, escalamos. Si no, ajustamos. La idea es probar antes de comprometer.
⚠ Para poder colaborar activamente, necesitamos acceso al entorno: repositorio, staging y herramientas.
02
Acuerdo sobre cómo colaborar
Definir juntos qué decisiones toma cada uno, cómo se comunican cambios y cuál es la cadencia de sincronía.

Todo el equipo
03
Estrategia de métricas
Rayo en conjunto con Alfonso proponen qué medir y para qué, validando que tenga sentido con los objetivos del negocio.

Rayo + Alfonso
04
Revisión del Design System
Alinear tokens Figma con el stack actual para que la colaboración con Claude sea más fluida para todos.

Rayo + Cambalache
8 / 8