(001) — UI/UX Design
Same brand. Same sitemap. Three different design registers, all built on the Claridad system. Each makes a different bet on how the new site earns attention and moves a gym owner toward a booked demo. The second approach is the one we would build.
(001) — Design Philosophy
El Libro Abierto lays the page out the way a clean monthly statement is laid out. Figures get room, rules stay hairline-thin, and nothing competes. It is the most restrained of the three, and the safest read against price sensitivity, because statement-grade order never looks expensive.
01 Interaction principles
The page is calm. The single orchestrated moment is the figure that resolves on scroll, the way a ledger reconciles.
Clear edges between sections. The operator reads one idea, then the next, never a wall.
Price, then a short qualification step, then the demo. The commitment rises only as the operator chooses to take it.
(002) — Homepage
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.
Design rationaleThe hero leads with a single figure and the operator's real outcome, not feature confidence. The capability row claims only shipped work; Cobros y DIAN is marked as roadmap. Proof and a transparent price sit above the fold-line a deliberating buyer scrolls to.
(003) — Key Pages
Precios renders the three COP tiers as a clean rate table with Operación priced and the rails tiers marked as coming. Recursos answers the operator's highest-intent searches (facturación DIAN, cobrar sin efectivo) answer-first and routes to the demo. Each page keeps the figure-and-caption discipline of the home page.
(004) — Components
Buttons
Inputs
Card · hover
Facturación DIAN
Lo que un gimnasio debe saber para facturar.
(005) — Responsive
Software para gimnasios
$0
Cobra, organiza y cierra el mes en minutos. Construido por una caja en Bogotá.
Agenda tu demoNot reflowed: the hero figure scales down, the rate table becomes stacked cards, and the nav collapses to a hamburger sheet with the abbreviated ledger-cell mark and a pinned demo CTA.
(006) — Motion
Choreographed restraint. The signature: month-end figures count up on scroll-into-view, and rows settle in sequence, the brand reading of a ledger reconciling. No parallax on text.
Easing
Quart-out for the count-up, expo-out elsewhere. No default curves.
Duration
1.4s count-up; 0.7s reveals. Long enough to read as deliberate.
Stagger
80ms between rows. Sequence by reading order, top to bottom.
(007) — Rationale
01 7-Dimension UX matrix
02 Strategic rationale
Conversion logic
The beachhead deliberates rather than buys on impulse, and decides in 7 to 30 days as a single signer. A statement-grade layout signals a firm that handles money carefully, and the sequenced price-then-qualify-then-demo path lowers the activation energy that the current price-hidden, demo-gated motion raises. The count-up figures make the money-clarity promise legible without present-tensing the unshipped rails.
(001) — Design Philosophy
Sala de Operaciones opens on a full-bleed back-office environment, ink-navy, with a single green data-line that draws on load: the money becoming clear. It is the one place the brand looks like the product, and it reads this is a serious tool in the first second, while staying local rather than imported.
01 Interaction principles
The scroll moves from the environment into capability without hard breaks. The page reads like one motion.
A sticky rail reveals what the platform does framed as the owner's daily jobs, not a feature list.
Distributed CTAs keep the demo and the lighter self-education paths present at every scroll depth.
(002) — Homepage
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áDesign rationaleThe full-bleed environment and the drawing green line make the money-clarity promise the first impression, the lane no competitor holds. Capability is framed by the operator's job, not a feature wall. Cobros y DIAN carries the roadmap label; the CTA recurs at every depth.
(003) — Key Pages
Producto / Operación diaria frames the console mockup in a device-neutral surface with capability listed by job. Sobre Vigoo App leads with the Bogotá-box origin and the training-floor environment, the operator-credibility proof a peer-proof buyer is checking for.
(004) — Components
Buttons
Inputs
Card · hover
Cobrar sin efectivo
Cómo recibir las mensualidades sin caja.
(005) — Responsive
Software para gimnasios
Cobra sin efectivo, factura para la DIAN, cierra el mes en minutos.
Agenda tu demoNot reflowed: the full-bleed hero crops to a portrait environment with the headline below it, the sticky job rail becomes a horizontal chip scroller, and the nav collapses to a sheet with the abbreviated mark and a pinned demo CTA.
(006) — Motion
Cinematic but restrained. The signature: the hero green data-line draws on load, the clarity gesture. Content reveals on continuous scroll, and the capability rail sticks and advances. Motion behaves like a ledger settling, never a consumer app bouncing, and respects reduced-motion.
Easing
Expo-out for the line draw and reveals. No default curves.
Duration
~900ms line draw; 0.7s section reveals. Weighted, not snappy.
Stagger
80ms between siblings. The rail advances one job at a time.
(007) — Rationale
01 7-Dimension UX matrix
02 Strategic rationale
Conversion logic
The funnel leaks hardest before the demo, where a peer-proof buyer checks the company and finds near-zero reviews while the regional leader owns Spanish search. An immersive first impression that looks more like a financial-grade tool than a feature-list site is the cheapest way to clear that moment, and it occupies the one visual lane no competitor holds. Distributed CTAs and a published price keep the not-yet-ready operator in the funnel rather than forcing a single high-friction step. The direction leans on the rails as its thesis, so the money surfaces carry them as a visible roadmap until they ship.
(001) — Design Philosophy
Cuaderno del Operador reads like a trade publication about running a gym: split-screen spreads, pull quotes, a running margin note, a chapter for the month that closes itself, a chapter for the money made clear, a chapter for the box in Bogotá where the product was built. It is the warmest, most operator-peer of the three.
01 Interaction principles
Snap-scroll moves the reader between self-contained spreads, each a complete idea.
The operator-built credibility is the narrative, not a logo strip. The Bogotá box is the through-line.
The call to book a demo appears at the end of each chapter, where the reader is most convinced.
(002) — Homepage
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.
Design rationaleEach chapter is a split-screen spread that alternates side, the way a magazine turns a page. The operator-built credibility is the story rather than a logo strip, and the demo CTA closes each chapter where conviction is highest. Cobros y DIAN carries the roadmap label.
(003) — Key Pages
Casos / Alpha Fit Club is a narrative case spread with a pull quote and the training-floor environment. Cómo migras frames the spreadsheet-to-Vigoo switch as a guided, WhatsApp-supported story, the largest perceived risk turned into a chapter with a clear ending.
(004) — Components
Buttons
Inputs
Pull-quote card · hover
“Dejé de perseguir la plata.”
Operador · Bogotá
(005) — Responsive
Capítulo 01 · El mes
Cobras, organizas y cierras sin perseguir efectivo. Construido en una caja de Bogotá.
Agenda tu demoNot reflowed: split-screen spreads stack to single-column chapters with the image as a chapter opener, the overlay menu becomes a full-screen sheet with the abbreviated mark, and the contextual CTA closes each chapter.
(006) — Motion
Micro-only. The signature: a gentle counter-scroll between the image and text halves of each spread, decorative and on non-essential elements only, plus hover underlines on chapter links. No count-up, no full-bleed draw. The restraint is the personality, and reduced-motion removes the counter-scroll entirely.
Easing
Expo-out on hover and snap settle. No default curves.
Duration
Snap settle ~600ms; hover 0.2s. Quiet, never showy.
Stagger
None within a spread; the chapter is the unit, not the element.
(007) — Rationale
01 7-Dimension UX matrix
02 Strategic rationale
Conversion logic
A peer-proof buyer evaluates on credibility before he books anything, and the operator-built moat is the strongest asset the company has. Telling that as a narrative, with the Bogotá box as the through-line, earns the trust that the demo then confirms. The contextual CTA at each chapter end asks for the demo where the reader is most convinced, rather than pushing one button everywhere. The money-clarity chapter carries the rails as a roadmap, never as a shipped claim.
(004) — Compare
Same Claridad brand system, same recommended sitemap, three distinct registers. No two approaches share a single one of the seven UX dimensions.
| Dimension | 01El Libro AbiertoEditorial-ledger | 02 · RecommendedSala de OperacionesImmersive console | 03Cuaderno del OperadorEditorial-narrative |
|---|---|---|---|
| Layout | Editorial | Cinematic | Magazine |
| Hero | Typography-led | Full-bleed immersive | Split-screen |
| Density | Balanced | Bold | Dense |
| Scroll | Sectioned | Continuous flow | Snap scroll |
| Navigation | Minimal | Expanded | Overlay |
| Animation | Choreographed | Cinematic | Micro-only |
| Conversion | Progressive disclosure | Distributed | Contextual |
| Page load estimate | Light | Moderate | Moderate |
| Accessibility posture | Strong | Strong, reduced-motion fallback for the hero draw | Strong, snap-scroll keyboard fallback required |
| Build complexity | Low | Medium | Medium-high |
| Component reusability | High | High | Medium |
| Content scalability | High | High | Medium |
| Best persona fit | Deliberating beachhead | Beachhead and new-gym opener | Credibility-led buyer |
| Priority metric optimized | Operational clarity | Conversion rate and operational clarity | Brand trust and premium perception |
| Signature interaction | Count-up ledger figures | Hero green data-line draw | Chapter counter-scroll spreads |
| Shared-dimension count | 0 with either | 0 with either | 0 with either |
| Design quality score | 8 / 10 | 9 / 10 | 8 / 10 |
It occupies the open lane, and it occupies it on sight. Every competitor looks like generic blue software; none looks like a financial-grade tool, and none markets handling Colombian money correctly. This approach makes that the homepage's first impression rather than a line in a feature list, so the positioning compounds every time the site appears.
It closes the leak where it actually happens, before the demo. An immersive, credible first impression is the cheapest way to clear the moment a peer-proof buyer checks the company and finds little, and the published price plus recurring calls to action keep the not-yet-ready operator in the funnel rather than losing him to one high-friction step.
It fits the rest of the plan. The recommended Authority-and-Compliance Hub sitemap adds a Spanish resource layer that answers the operator's highest-intent searches, and this approach's expanded navigation is built to carry it. The one condition: because the approach leans on the money-clarity promise as its thesis, the site carries Bre-B and DIAN as a visible roadmap and a promise, never as a shipped claim, until the rails land.
Grounding: Phase 03 strategy canvas and white-space analysis (local money handled correctly, the open lane) · Phase 07 funnel and Phase 01 evaluation-stage leak (near-zero reviews before the demo while the regional leader owns Spanish search) · Phase 11 GTM and Phase 12 Option B (Colombia-first, rails-gated sequence) · Phase 06 and Phase 12 feature-claim discipline (rails framed as roadmap until shipped).
(005) — Next Step
Review the three approaches and choose your preferred direction, or tell us which elements from different approaches you would like to combine. Once you select, we move to Pass 2 and build the full design specification for the approach you pick.
Email Cintia Calegari at projects@epirco.com →