(001) — Diseño UI/UX
Una marca. Un mapa de sitio. Tres registros de diseño distintos, todos construidos sobre el sistema Claridad. Cada uno apuesta distinto a cómo el nuevo sitio gana la atención y lleva al dueño de un gimnasio hacia una demo agendada. La segunda dirección es la que construiríamos.
(001) — Filosofía de Diseño
El Libro Abierto dispone la página como se dispone un estado de cuenta mensual limpio. Las cifras tienen espacio, las líneas se mantienen finísimas y nada compite. Es la más sobria de las tres, y la lectura más segura frente a la sensibilidad al precio, porque el orden de un estado financiero nunca se ve caro.
01 Principios de interacción
La página es calmada. El único momento orquestado es la cifra que se resuelve al desplazar, como un libro contable que se concilia.
Bordes claros entre secciones. El operador lee una idea, luego la siguiente, nunca un muro.
Precio, luego un paso corto de calificación, luego la demo. El compromiso sube solo a medida que el operador elige tomarlo.
(002) — Página de inicio
Software para gimnasios · Colombia
$0
Cobra las mensualidades, organiza la operación y cierra el mes en minutos. Construido y operado por una caja en Bogotá.
Lo que hace hoy
01
Asistencia, planes, miembros y staff en un solo lugar.
02
Cobra sin efectivo y emite la factura electrónica, pensado para cómo paga Colombia.
En la hoja de ruta03
Los números del mes, visibles en minutos.
Cerca de cero cancelaciones desde 2020. La base entera se construyó de boca en boca, operador a operador.
Alpha Fit Club · Bogotá, la caja donde nace el productoPrecios
COP $ /mes
La operación diaria completa.
Disponible próximamente
Suma cobros y facturación DIAN.
Disponible próximamente
Para 2 o más sedes.
Justificación de diseñoEl héroe abre con una sola cifra y el resultado real del operador, no con confianza en funciones. La fila de capacidades solo declara trabajo ya entregado; Cobros y DIAN se marca como hoja de ruta. La prueba y un precio transparente quedan por encima de la línea hasta donde llega un comprador que delibera.
(003) — Páginas clave
Precios presenta los tres niveles en COP como una tabla de tarifas limpia, con Operación con precio y los niveles de carriles marcados como próximos. Recursos responde las búsquedas de mayor intención del operador (facturación DIAN, cobrar sin efectivo) con la respuesta primero y enruta a la demo. Cada página mantiene la disciplina de cifra y leyenda de la página de inicio.
(004) — Componentes
Buttons
Inputs
Card · hover
Facturación DIAN
Lo que un gimnasio debe saber para facturar.
(005) — Responsivo
Software para gimnasios
$0
Cobra, organiza y cierra el mes en minutos. Construido por una caja en Bogotá.
Agenda tu demoNo es un simple reacomodo: la cifra del héroe se reduce, la tabla de tarifas se vuelve tarjetas apiladas y la navegación colapsa a un menú tipo hamburguesa con la marca abreviada de celda contable y un CTA de demo fijo.
(006) — Movimiento
Sobriedad coreografiada. El sello: las cifras de cierre de mes suben al entrar en pantalla y las filas se asientan en secuencia, la lectura de marca de un libro contable que se concilia. Sin parallax sobre el texto.
Suavizado
Quart-out para el conteo, expo-out en el resto. Sin curvas por defecto.
Duración
Conteo de 1,4s; apariciones de 0,7s. Lo suficiente para leerse deliberado.
Escalonado
80ms entre filas. Secuencia por orden de lectura, de arriba a abajo.
(007) — Justificación
01 Matriz UX de 7 dimensiones
02 Justificación estratégica
Lógica de conversión
La cabeza de playa delibera en vez de comprar por impulso, y decide en 7 a 30 días como único firmante. Una disposición de grado estado financiero indica una empresa que maneja la plata con cuidado, y la ruta secuenciada de precio, luego calificación, luego demo baja la energía de activación que sube el movimiento actual de precio escondido y demo con barrera. Las cifras que suben hacen legible la promesa de claridad financiera sin poner en presente los carriles aún no entregados.
(001) — Filosofía de Diseño
Sala de Operaciones abre con un entorno de trastienda a sangre completa, tinta navy, con una sola línea de datos verde que se traza al cargar: la plata volviéndose clara. Es el único lugar donde la marca se ve como el producto, y se lee esta es una herramienta seria en el primer segundo, sin dejar de ser local en vez de importada.
01 Principios de interacción
El desplazamiento pasa del entorno a la capacidad sin cortes bruscos. La página se lee como un solo movimiento.
Un riel fijo revela lo que hace la plataforma enmarcado en los trabajos diarios del dueño, no como una lista de funciones.
Los CTA distribuidos mantienen presentes la demo y las rutas más livianas de autoeducación a cualquier profundidad de desplazamiento.
(002) — Página de inicio
Software para gimnasios · Colombia
La plataforma construida y operada por una caja en Bogotá. Tu plata, clara.
Por el trabajo del operador
→
Asistencia, planes, miembros, staff.
→
Cobra sin efectivo, emite la factura, pensado para cómo paga Colombia.
En la hoja de ruta→
Los números del mes en minutos.
No por un vendedor de software. Cada función se prueba en Alpha Fit Club antes de llegar a tu gimnasio.
Cerca de cero cancelaciones desde 2020, una base entera construida de boca en boca.
Alpha Fit Club · BogotáJustificación de diseñoEl entorno a sangre completa y la línea verde que se traza hacen de la promesa de claridad financiera la primera impresión, el carril que ningún competidor ocupa. La capacidad se enmarca por el trabajo del operador, no por un muro de funciones. Cobros y DIAN lleva la etiqueta de hoja de ruta; el CTA se repite a cada profundidad.
(003) — Páginas clave
Producto / Operación diaria enmarca el mockup de la consola en una superficie neutra de dispositivo, con la capacidad listada por trabajo. Sobre Vigoo App abre con el origen en el box de Bogotá y el entorno del área de entrenamiento, la prueba de credibilidad de operador que busca un comprador que se guía por sus pares.
(004) — Componentes
Buttons
Inputs
Card · hover
Cobrar sin efectivo
Cómo recibir las mensualidades sin caja.
(005) — Responsivo
Software para gimnasios
Cobra sin efectivo, factura para la DIAN, cierra el mes en minutos.
Agenda tu demoNo es un simple reacomodo: el héroe a sangre completa se recorta a un entorno vertical con el titular debajo, el riel fijo de trabajos se vuelve un carrusel horizontal de fichas y la navegación colapsa a un menú con la marca abreviada y un CTA de demo fijo.
(006) — Movimiento
Cinematográfica pero contenida. El sello: la línea de datos verde del héroe se traza al cargar, el gesto de claridad. El contenido aparece en desplazamiento continuo y el riel de capacidad se fija y avanza. El movimiento se comporta como un libro contable que se asienta, nunca como una app de consumo que rebota, y respeta el movimiento reducido.
Suavizado
Expo-out para el trazo de la línea y las apariciones. Sin curvas por defecto.
Duración
Trazo de ~900ms; apariciones de sección de 0,7s. Con peso, no brusco.
Escalonado
80ms entre elementos. El riel avanza un trabajo a la vez.
(007) — Justificación
01 Matriz UX de 7 dimensiones
02 Justificación estratégica
Lógica de conversión
El embudo fuga con más fuerza antes de la demo, donde un comprador que se guía por sus pares revisa la empresa y encuentra reseñas cercanas a cero mientras el líder regional domina la búsqueda en español. Una primera impresión inmersiva que se ve más como una herramienta de grado financiero que como un sitio de lista de funciones es la forma más barata de resolver ese momento, y ocupa el único carril visual que ningún competidor tiene. Los CTA distribuidos y un precio publicado mantienen al operador que aún no está listo dentro del embudo en vez de forzar un solo paso de alta fricción. La dirección se apoya en los carriles como su tesis, así que las superficies de plata los cargan como una hoja de ruta visible hasta que se entreguen.
(001) — Filosofía de Diseño
Cuaderno del Operador se lee como una publicación del gremio sobre operar un gimnasio: dobles páginas a pantalla partida, citas destacadas, una nota al margen continua, un capítulo para el mes que se cierra solo, un capítulo para la plata vuelta clara, un capítulo para el box de Bogotá donde se construyó el producto. Es la más cálida y la más de par a par de las tres.
01 Principios de interacción
El desplazamiento por anclaje lleva al lector entre dobles páginas autónomas, cada una una idea completa.
La credibilidad de haber sido hecho por operadores es la narrativa, no una tira de logos. El box de Bogotá es el hilo conductor.
La invitación a agendar una demo aparece al final de cada capítulo, donde el lector está más convencido.
(002) — Página de inicio
Capítulo 01 · El mes
Cobras, organizas y cierras sin perseguir efectivo ni armar el Excel a mano. Lo construimos en una caja de Bogotá, no en una sala de juntas.
Capítulo 02 · La plata
Cobra sin efectivo y emite la factura para la DIAN, pensado para cómo paga Colombia.
En la hoja de rutaCapítulo 03 · El origen
Cerca de cero cancelaciones desde 2020. Cada función se prueba en Alpha Fit Club antes de llegar a tu gimnasio.
Justificación de diseñoCada capítulo es una doble página a pantalla partida que alterna de lado, como una revista pasa la hoja. La credibilidad de haber sido hecho por operadores es la historia, no una tira de logos, y el CTA de demo cierra cada capítulo donde la convicción es más alta. Cobros y DIAN lleva la etiqueta de hoja de ruta.
(003) — Páginas clave
Casos / Alpha Fit Club es una doble página de caso narrativo con una cita destacada y el entorno del área de entrenamiento. Cómo migras enmarca el cambio del Excel a Vigoo como una historia guiada y acompañada por WhatsApp, el mayor riesgo percibido convertido en un capítulo con un final claro.
(004) — Componentes
Buttons
Inputs
Pull-quote card · hover
“Dejé de perseguir la plata.”
Operador · Bogotá
(005) — Responsivo
Capítulo 01 · El mes
Cobras, organizas y cierras sin perseguir efectivo. Construido en una caja de Bogotá.
Agenda tu demoNo es un simple reacomodo: las dobles páginas a pantalla partida se apilan en capítulos de una columna con la imagen como apertura de capítulo, el menú superpuesto se vuelve un panel a pantalla completa con la marca abreviada y el CTA contextual cierra cada capítulo.
(006) — Movimiento
Solo microinteracción. El sello: un contradesplazamiento suave entre las mitades de imagen y texto de cada doble página, decorativo y solo en elementos no esenciales, más subrayados al pasar el cursor sobre los enlaces de capítulo. Sin cifras que suben, sin trazo a sangre completa. La sobriedad es la personalidad, y el movimiento reducido elimina el contradesplazamiento por completo.
Suavizado
Expo-out al pasar el cursor y al asentar el anclaje. Sin curvas por defecto.
Duración
Asentado de anclaje ~600ms; cursor 0,2s. Silencioso, nunca llamativo.
Escalonado
Ninguno dentro de una doble página; la unidad es el capítulo, no el elemento.
(007) — Justificación
01 Matriz UX de 7 dimensiones
02 Justificación estratégica
Lógica de conversión
Un comprador que se guía por sus pares evalúa por credibilidad antes de agendar cualquier cosa, y el foso de haber sido hecho por operadores es el activo más fuerte que tiene la empresa. Contarlo como una narrativa, con el box de Bogotá como hilo conductor, gana la confianza que la demo luego confirma. El CTA contextual al final de cada capítulo pide la demo donde el lector está más convencido, en vez de empujar un solo botón en todas partes. El capítulo de claridad financiera carga los carriles como una hoja de ruta, nunca como una afirmación de algo ya entregado.
(004) — Comparar
El mismo sistema de marca Claridad, el mismo mapa de sitio recomendado, tres registros distintos. Ningún par de direcciones comparte una sola de las siete dimensiones UX.
| Dimensión | 01El Libro AbiertoEditorial contable | 02 · RecomendadaSala de OperacionesConsola inmersiva | 03Cuaderno del OperadorEditorial narrativa |
|---|---|---|---|
| Disposición | Editorial | Cinematográfica | Tipo revista |
| Héroe | Guiado por tipografía | A sangre completa, inmersivo | Pantalla partida |
| Densidad | Equilibrada | Marcada | Densa |
| Desplazamiento | Por secciones | Flujo continuo | Por anclaje |
| Navegación | Mínima | Ampliada | Superpuesta |
| Animación | Coreografiada | Cinematográfica | Solo microinteracción |
| Conversión | Revelación progresiva | Distribuida | Contextual |
| Estimado de carga | Liviana | Moderada | Moderada |
| Postura de accesibilidad | Fuerte | Fuerte, con alternativa de movimiento reducido para el trazo del héroe | Fuerte, requiere alternativa por teclado para el anclaje |
| Complejidad de construcción | Baja | Media | Media-alta |
| Reutilización de componentes | Alta | Alta | Media |
| Escalabilidad de contenido | Alta | Alta | Media |
| Mejor ajuste de perfil | Cabeza de playa que delibera | Cabeza de playa y quien abre gimnasio nuevo | Comprador guiado por credibilidad |
| Métrica prioritaria optimizada | Claridad operativa | Tasa de conversión y claridad operativa | Confianza de marca y percepción premium |
| Interacción distintiva | Cifras contables que suben | Trazo de la línea de datos verde del héroe | Dobles páginas de capítulo con contradesplazamiento |
| Dimensiones compartidas | 0 con cualquiera | 0 con cualquiera | 0 con cualquiera |
| Puntaje de calidad de diseño | 8 / 10 | 9 / 10 | 8 / 10 |
Ocupa el carril abierto, y lo ocupa a primera vista. Cada competidor se ve como software azul genérico; ninguno se ve como una herramienta de grado financiero, y ninguno comunica que maneja la plata colombiana como se debe. Esta dirección lo convierte en la primera impresión de la página de inicio en vez de una línea en una lista de funciones, así el posicionamiento se acumula cada vez que aparece el sitio.
Cierra la fuga donde de verdad ocurre, antes de la demo. Una primera impresión inmersiva y creíble es la forma más barata de resolver el momento en que un comprador que se guía por sus pares revisa la empresa y encuentra poco, y el precio publicado más las llamadas a la acción recurrentes mantienen al operador que aún no está listo dentro del embudo en vez de perderlo en un solo paso de alta fricción.
Encaja con el resto del plan. El mapa de sitio recomendado, el hub de autoridad y cumplimiento, suma una capa de recursos en español que responde las búsquedas de mayor intención del operador, y la navegación ampliada de esta dirección está hecha para cargarla. La única condición: como la dirección se apoya en la promesa de claridad financiera como su tesis, el sitio carga Bre-B y DIAN como una hoja de ruta visible y una promesa, nunca como una afirmación de algo ya entregado, hasta que los carriles estén listos.
Fundamento: lienzo de estrategia y análisis de espacio en blanco de la Fase 03 (la plata local manejada como se debe, el carril abierto) · embudo de la Fase 07 y fuga en etapa de evaluación de la Fase 01 (reseñas cercanas a cero antes de la demo mientras el líder regional domina la búsqueda en español) · GTM de la Fase 11 y Opción B de la Fase 12 (secuencia que pone a Colombia primero y construye los carriles primero) · disciplina de declaración de funciones de las Fases 06 y 12 (los carriles enmarcados como hoja de ruta hasta entregarse).
(005) — Siguiente paso
Revisa las tres direcciones y elige la que prefieres, o dinos qué elementos de distintas direcciones te gustaría combinar. Una vez elijas, pasamos a la Fase 2 y construimos la especificación de diseño completa de la dirección que escojas.
Escribe a Cintia Calegari a projects@epirco.com →