VÉRTICE es un prototipo interactivo para estudiantes universitarios. Una sola arquitectura de información, un solo sistema de componentes y tres identidades visuales propias: tecnológico, finanzas y educación.
Cambia de vertical y de pantalla. El prototipo responde de verdad.
Antes de dibujar una sola pantalla revisamos productos líderes en los tres sectores y anotamos qué convención respetar y qué evitar. El resultado no son tres apps distintas, sino tres lecturas de la misma app.
Referentes tipo plataformas de retos y rutas de código. El usuario vuelve por la racha y por el avance medible, no por el catálogo.
Referentes de banca digital para jóvenes. Aquí la confianza se gana con números claros, jerarquía estricta y cero ambigüedad en los montos.
Referentes de campus virtual y micro-aprendizaje. El estudiante llega con poco tiempo, así que la app tiene que responder "¿qué sigue?" en un segundo.
Las cinco pantallas clave del brief (inicio, buscar, detalle, perfil y ajustes) comparten el mismo esqueleto en las tres verticales. Lo que cambia es el dato, el color y el vocabulario, nunca la posición de los controles.
Responde "¿en qué voy?" con una tarjeta de estado, tres métricas y accesos directos.
Campo, filtros por tipo y sugerencias. El filtrado ocurre mientras se escribe.
Cabecera con datos duros, contenido por bloques y una acción principal fija.
Progreso, logros y documentos. Los ajustes mezclan lo propio del sector con lo común.
La misma pantalla de inicio en las tres verticales. Idéntica retícula, idéntico comportamiento, tres personalidades. Este es el punto central del encargo y se puede comprobar tocando el prototipo de arriba.
Cuatro decisiones de producto que ordenan todas las pantallas de la vertical de educación.
Micro-lecciones de 4 a 7 minutos con evaluación corta. El estudiante avanza entre clases, no solo en casa.
Créditos, promedio y racha visibles siempre. El avance se muestra como dato, no como felicitación vacía.
El asistente conoce la materia abierta: explica, resume la clase y arma el plan hacia el parcial.
Cada curso cierra con un certificado que se enlaza al perfil técnico y al portafolio del estudiante.
La vertical financiera existe para resolver el problema real del universitario: pagar el semestre sin ahogarse.
El pago del semestre se divide en cuotas quincenales sin intereses, con recordatorio y débito automático opcional.
Aportes pequeños y frecuentes con proyección de fecha. El objetivo se define en pesos y en calendario.
Congelar la tarjeta, fijar límite diario y activar biometría, todo a dos toques desde ajustes.
Descuentos en libros, transporte y comida dentro de la misma cuenta, con el cashback acumulado a la vista.
Una beca que entra en Finanzas reduce las cuotas y se refleja en el expediente de Educación. Un certificado de Educación suma al perfil de Tec. Un reto terminado en Tec libera un beneficio en Finanzas. Ninguna vertical es una app aparte: comparten cuenta, sesión, seguridad y datos.
El sistema se define una vez con variables. Cada vertical solo sobreescribe tres tokens de color, así que un cambio de componente se propaga a las tres sin retrabajo.
Plus Jakarta Sans en todo el sistema. Una sola familia, seis pesos, buena lectura de cifras y de siglas técnicas.
Trazo lleno, esquinas suaves, caja de 24 px. Los pictogramas de contenido usan un set plano de color para que el icono aporte reconocimiento sin competir con el acento.
Los tres acentos se probaron sobre blanco y sobre superficie oscura buscando contraste AA en texto y en estados. El modo oscuro no es un filtro: redefine los mismos tokens con valores propios, incluido el tinte de cada vertical. Se puede activar dentro del prototipo, en Ajustes.
La app no está construida como tres productos, sino como un motor de contenido más un tema. Sumar salud, empleabilidad o vivienda estudiantil significa declarar tres colores y un bloque de datos, no rediseñar la aplicación.
Color, radio, espaciado y tipografía viven en variables. Un componente nuevo hereda el tema activo sin tocarlo.
Cada vertical es un objeto de datos con secciones, resultados, detalle, perfil y ajustes. La vista es la misma.
Una universidad puede cargar su paleta y su logotipo sin bifurcar el código ni duplicar el sistema en Figma.
| Indicador | Cómo se mide | Meta a 6 meses |
|---|---|---|
| Uso cruzado de verticales | Usuarios activos en dos o más módulos | 45% |
| Retención semanal | Vuelta a la app en 7 días | 38% |
| Deserción por motivo económico | Matrículas pagadas a tiempo con plan de cuotas | -12 puntos |
| Tiempo hasta la acción | Segundos entre abrir la app y completar la tarea principal | menos de 20 s |
| Coste de una vertical nueva | Horas de diseño y desarrollo por sector adicional | menos de 60 h |
El estudiante no paga por la app. Pagan quienes ganan cuando el estudiante se queda: la universidad, el aliado financiero y el comercio del campus.
La dependencia de un aliado financiero regulado. Se mitiga diseñando el módulo de Finanzas contra una interfaz de proveedor, de modo que cambiar de banco no toque el producto.
Un piloto de un semestre en una sola facultad, con la vertical de Educación completa y Finanzas limitada al plan de cuotas. Con eso se valida la hipótesis central antes de invertir en el resto.
Este prototipo ya es código real ejecutándose en el navegador, así que la entrega no empieza de cero. Estas son las fases y lo que recibe el cliente en cada una.
Dos rondas de refinamiento sobre lo que ya está navegable: contenido, tono, jerarquía y color por vertical.
Librería de componentes con variables, estilos de texto, estados y las tres marcas de vertical, lista para entregar a desarrollo.
Flujos secundarios: transferencias, matrícula completa, evaluaciones, entrega de retos, notificaciones y estados vacíos o de error.
Especificaciones, medidas, comportamiento de cada componente y los tokens exportados en formato consumible por el equipo técnico.
Publicación del piloto en una facultad, seguimiento de los indicadores de la sección anterior y ajuste con datos reales.
Prototipo navegable, librería de componentes, mini guía de estilo, mapa de flujos y pantallas exportadas en alta resolución.
Entregas cortas y comentables, respuesta el mismo día y las dos rondas de ajustes ligeros que pide el encargo, incluidas.
Diseñado a 390 px con retícula flexible. Se adapta de pantallas pequeñas a tabletas y funciona en iOS y Android sin rediseñar.
El prototipo funciona en cualquier navegador, en computador y en móvil. Cambie de vertical, busque, abra un detalle, active el modo oscuro y dígame qué ajustamos en la primera ronda.