Product Craft Bible
SaaS Patterns
Inicio SaaS y Admin SaaS Patterns
SaaS y Admin

SaaS Patterns

8 reglas linear · notion · nngrouplinear · stripe · nngrouplinear · nngroup
112

SaaS Patterns

8 reglas
1012

Settings: estructura por función

Las settings organizadas alfabeticamente o por fecha de implementación crean confusión. Agrupar por función del usuario: Perfil, Notificaciones, Seguridad, Integraciones, Facturación, Equipo. Cada grupo debe tener un proposito claro y mutuamente excluyente. Si un setting encaja en dos grupos, esta mal nombrado o mal diseñado.

linear · notion · nngroup
Preferir
Perfil
Notificaciones
Seguridad
Integraciones
Facturación
Equipo
Nombre, avatar, idioma, timezone, preferencias de UI
6 grupos funcionales. El usuario sabe exactamente en que sección buscar cada setting sin escanear toda la lista
Evitar
API Keys
Avatar
Billing
Dark mode
Email notificaciones
Idioma
Password
Timezone
Lista plana y alfabetica. El usuario que busca "deshabilitar notificaciones de Slack" no sabe si buscar en E, N o I
1013

Billing UI: cards de plan simples

Las tablas de comparación de planes con 30 filas de features no funcionan, el usuario no lee el 80% de ellas. Mostrar máximo 5-6 diferencias clave entre planes, agrupadas por valor (no por feature técnica). El plan actual debe estar claramente marcado. El CTA de upgrade debe especificar exactamente lo que se obtiene: "Desbloquear reportes avanzados" no "Upgrade a Pro".

linear · stripe · nngroup
Preferir
TU PLAN ACTUAL
Pro · $49/mes
Reportes exportables a Excel y PDF
Hasta 20 usuarios
Integraciones con Slack y Zapier
Plan actual marcado, 3 diferencias expresadas en lenguaje de valor, el usuario decide en segundos
Evitar
Feature
Free
Pro
Usuarios
Proyectos
Storage
API calls
Webhooks
SSO
Logs
Exports
Custom domain
2FA
Audit trail
SLA
12 filas técnicas sin contexto de valor, el usuario no entiende que significa "Audit trail" ni si lo necesita
1014

Meters de uso: 80% es punto de conversión

Mostrar el consumo de recursos (almacenamiento, llamadas API, usuarios) como barras de progreso con color que cambia al llegar al 80%: verde <80%, amarillo 80-95%, rojo >95%. En el 80% mostrar una notificación no intrusiva de upgrade. En el 95% mostrar un banner persistente. Al 100% bloquear con un modal de upgrade, nunca silenciosamente dejar de funcionar.

linear · stripe · nngroup
Preferir
Almacenamiento4.2 / 10 GB
Usuarios del equipo8 / 10
Quedan 2 lugares. Agrega más miembros con plan Business.
API calls este mes9,820 / 10,000
Límite casi alcanzado. Actualiza ahora.
Verde/amarillo/rojo según umbral, mensaje contextual solo cuando es relevante. La urgencia escala con el riesgo real.
Evitar
Almacenamiento: 8.1 GB de 10 GB usados
La API deja de funcionar cuando el usuario llega a 10 GB sin previo aviso.
Solo texto plano, sin indicador visual ni señal de urgencia. El servicio se corta al límite sin advertencia.
1015

Feature gates: solo en momento de necesidad

Mostrar un feature gate (upgrade prompt) cuando el usuario intenta usar una funcionalidad bloqueada, no como banner permanente ni en el onboarding. El gate debe explicar exactamente que desbloquea el upgrade y en cuanto tiempo tendría acceso. Nunca bloquear features completamente visibles pero inaccesibles sin explicación: eso genera frustración, no conversión.

linear · nngroup
Preferir
Reportes Pro
Reportes avanzados disponibles en Plan Pro
Tabla de metricas
Exportar CSV
Gate en contexto: el usuario ve la UI del feature con blur sutil solo en la parte bloqueada, banner inline con CTA específico en el momento de necesidad.
Evitar

Actualiza a Pro para desbloquear esta función

Obtiene acceso completo a reportes avanzados, exportación y más.
Reportes
Tabla de metricas
Exportar CSV
Paywall genérico cubre toda la UI. El usuario no ve que hace la función ni por que le sirve.
1016

Empty states como onboarding

Un estado vacio (0 proyectos, 0 integraciones, 0 reportes) es la mejor oportunidad de onboarding contextual. Incluir: ilustración o icono relevante, título que describe el estado, descripción breve de que permite hacer esa sección, y un CTA primario que inicia la acción. El empty state no es un mensaje de error, es una invitación.

linear · notion · nngroup
Preferir
Crea tu primer proyecto
Organiza tu trabajo en proyectos y comparte el avance con tu equipo en tiempo real.
Ver ejemplo
Evitar
No tienes proyectos aún
1017

Notificaciones: defaults inteligentes

El default de notificaciones debe ser útil desde el primer día: activar las criticas (asignaciones directas, menciones, alertas del sistema) y desactivar las de bajo valor (resumenes semanales, actividad general del equipo). El usuario que quiere más notificaciones las activa; el que recibe demasiadas las desactiva, y ambas acciones son igualmente accesibles desde un mismo centro de notificaciones.

linear · nngroup
Preferir
Notificaciones
Criticas (activas por default)
Seguridad y accesosRecomendado
Cobros y facturaciónRecomendado
Menciones directas
Opcionales (inactivas por default)
Tips y novedades
Actividad del equipo
Resumen semanal
Solo las criticas activas por default: el usuario recibe señal, no ruido, desde el primer día
Evitar
Notificaciones
Seguridad y accesos
Cobros y facturación
Menciones directas
Comentarios en hilos
Actividad del equipo
Tips y novedades
Resumen semanal
Todas activas: el usuario recibe decenas de notificaciones irrelevantes al día y termina desactivando todo
1018

Roles y permisos: revelar progresivamente

Una matriz de permisos con 20 checkboxes por rol paraliza la configuración inicial. Ofrecer primero 3-4 roles predefinidos con nombres en lenguaje natural (Admin, Editor, Viewer, Guest). Si el usuario necesita algo más específico, ofrecer "Rol personalizado" como opción avanzada. Mostrar ejemplos de que puede hacer cada rol en términos de tareas reales, no de flags técnicos.

linear · nngroup
Preferir
Admin
Gestiona equipo, facturación y todos los proyectos
Crear, editar y borrar proyectos
Invitar y gestionar miembros
Ver y editar facturación
Editor
Crea y edita proyectos, no puede invitar ni ver facturación
Viewer
Solo lectura, puede comentar pero no modificar
Evitar
Permiso
Admin
User
Guest
read:projects
write:projects
delete:projects
read:billing
write:billing
manage:team
read:reports
export:data
1019

Activity feed: contexto sobre volumen

Un feed de actividad que muestra "Maria edito el documento", "Maria edito el documento", "Maria edito el documento" 12 veces consecutivas es ruido, no información. Agrupar eventos repetidos del mismo usuario: "Maria realizo 12 ediciones en el Documento Q4". Priorizar eventos que requieren acción del usuario sobre eventos puramente informativos. El feed vacio es mejor que el feed con ruido.

linear · notion · nngroup
Preferir
Proyecto Alpha
Deploy a producción completado
v2.4.1 por Carlos · hace 10 min
M
Maria hizo 3 cambios en Proyecto Alpha · hace 25 min
Equipo
L
Permisos actualizados
Luis cambio rol de Ana a Admin · hace 1 h
R
Roberto comento en "Brief Q4" · hace 2 h
Eventos agrupados por contexto, acciones repetidas colapsadas, deploys y permisos destacados
Evitar
A
User A created project · hace 2 min
B
User B updated file · hace 3 min
C
User C logged in · hace 4 min
A
User A updated file · hace 5 min
A
User A updated file · hace 6 min
A
User A updated file · hace 7 min
Alto volumen, baja señal. Sin agrupación, sin contexto. El usuario deja de leer el feed
Lista plana cronologica con cada evento individual. Ruido que el usuario aprende a ignorar