Aleks Sánchez Logo
Aleks Sánchez
Volver a todos los proyectos
PortfolioMap · Lente 3 · Lifestyle & PlanningEn producción · portfoliomap · live

Lifestyle: planificación financiera completa en un solo módulo

La capa de planificación de PortfolioMap. Lending, insurance, goals, budgets, subscriptions, tax, calendar, pension y splits — diez submódulos que comparten design system, calendar y categorización.

Mi rolProduct Designer · modelado cross-módulo + formularios primitivos
CuándoEn desarrollo · 2026
EquipoSolo founder por ahora — diseño, sistema y producto
StackVite + SWC, React 18, TypeScript estricto, Tailwind con tokens HSL, shadcn/ui (Radix), lucide-react, react-router v6 (HashRouter), Storybook 10, MCP servers
Lifestyle: planificación financiera completa en un solo módulo

Resultados

10 submódulos lifestyle

todos compartiendo design system, calendar y categorización unificada

6 metas + 8 budgets

goals con target/current/monthly contribution y caps con alerts y rollover

14 categorías de subs

normalizadas a coste mensual con cadence, status (active/paused/trial) y last used

El problema que ataca el módulo

La mayoría de apps fintech se quedan a medias en lifestyle. PortfolioMap une los diez módulos porque comparten datos:

  • Una sub de Spotify entra en su budget y aparece en spending insights del mes.
  • Un préstamo nuevo recalcula la blended rate de tu deuda total.
  • El LTV de tus hipotecas se actualiza con el valor de mercado.
  • Diez módulos como uno: el usuario no aprende diez interfaces, aprende una.

Proceso y validación

  • Hipótesis inicial: "los usuarios quieren control duro de gasto". Descartada tras ver patrones de Mint y YNAB — los caps duros frustran y se desactivan en 2-3 semanas.
  • Versión actual: caps blandos con alerta y rollover automático. El usuario se entera, no se siente regañado.
  • Goals como contratos vivos vinculados a cuentas reales que progresan solos — no campos de texto que se quedan obsoletos.
  • Validación: retención del módulo a 30 días + conversaciones con pareja con hipoteca, freelance con renta variable, expat con ISA + SIPP.

Decisiones de modelo

  • Categorías compartidas con Banking. KYC completado en onboarding, no se vuelve a pedir.
  • Goals: target / current / monthly / target date + binding opcional a cuenta o portfolio.
  • Budgets: caps blandos, alertas, rollover y trend 30d.
  • Subscriptions normalizadas a coste mensual con cadence y status.
  • Lending: APR por producto, blended rate consolidada, LTV en hipotecas.
  • Pension: 5 tipos de plan (employer, personal, SIPP, ISA-stock, state) + projection a edad objetivo.

Decisiones de UI

  • Formularios sobre primitivas propias (Field, NumberInput, Segmented, SummaryCard…) — no react-hook-form.
  • Una sola fuente de verdad para validación y visual, especialmente currency inputs y rates (APR, LTV, TIN).
  • Calendar timeline con 8 tipos de evento renderizando el mismo componente que el módulo Calendar.

Cómo encaja con el resto del producto

Cada módulo es lectura activa sobre los mismos datos, no una capa "encima":

  • Goals lee cuentas de Banking.
  • Budgets lee el ledger.
  • Tax lee lots de Investing para harvest-candidates.
  • Pension lee la cuenta + holdings ISA/SIPP.
  • Eventos críticos (sub > €50, goal a punto de fallar) llegan como notification a Operations.

Decisiones de diseño

Primitivas de formulario propias, no librerías

Field, NumberInput, DateInput, Segmented, SummaryCard… sobre Radix donde tiene sentido. Control total de validación, hover/focus/error y comportamiento en bottom-sheets. Cero react-hook-form.

Calendar como capa cross-módulo, no widget aparte

8 tipos de evento (income, bill, dividend, rebalance, goal, sub renewal…). Cada módulo emite eventos a esa capa. Calendar no es agenda separada — es la lectura cronológica del producto.

Subscriptions normalizadas a coste mensual

Una sub anual de €120 se muestra siempre como €10/mes. Permite comparar Netflix mensual vs. Adobe anual sin mental math. Si cambia la cadence, recalculamos sin perder histórico.

Goals como contratos vivos vinculados a cuentas

Una meta es target + current + monthly + target date + binding opcional a cuenta o portfolio real. Cuando el saldo sube, la meta progresa automáticamente. Si baja, dispara alerta.

Retrospectiva honesta

Qué funcionó

  • Compartir taxonomía de categorías entre Banking, Budgets, Tax y Spending Insights. Cero duplicación, cero divergencia, cero "esto está categorizado distinto en cada módulo".
  • Calendar como capa cross-módulo en vez de widget aparte. El módulo Calendar acabó siendo lo más simple del producto y al mismo tiempo el más útil para entender qué pasa cuándo.
  • Primitivas de formulario propias en lugar de react-hook-form. Bundle más ligero y sobre todo control total para implementar el patrón canónico de modales.

Qué cambiaría

  • Empecé con goals como un input plano y subí la complejidad a posteriori (binding a cuentas, alertas). Habría empezado por el modelo completo.
  • Subestimé subscriptions con cadence inusual (semanal, trimestral). Tuve que retocar el cálculo de coste mensual normalizado en sprint 6.

Qué queda abierto

  • Tax center con conexión a la AEAT (España) y HMRC (UK) para importar transacciones automáticamente.
  • Pension projection con escenarios (conservative, balanced, aggressive) usando rentabilidades históricas reales.

¿Te interesa que aporte este nivel de detalle a tu equipo?

Estoy disponible para incorporarme en plantilla, contrato indefinido, 100 % remoto desde cualquier lugar del mundo (vivo en Madrid).

Siguiente proyecto

PortfolioMap · Operations: AI, gobernanza y automatización