--- title: UI/UX Design Recommendations · Vigoo App · Prepared by Epirco description: Explore three innovative design approaches for the Vigoo App, each tailored to enhance user experience and drive gym owners towards booking demos effectively. --- Prepared for *Vigoo App* 01 El Libro Abierto 02 Sala de Operaciones Recommended 03 Cuaderno del Operador 04 Compare (001) — UI/UX Design # Three approaches. *One Vigoo App.* 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. Client Vigoo App Market Colombia · es-CO Mode New build Brand system Claridad (ink & paper) (001) — Design Philosophy ## A statement you *trust.* 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 #### Stillness, then one move The page is calm. The single orchestrated moment is the figure that resolves on scroll, the way a ledger reconciles. #### Each section a complete thought Clear edges between sections. The operator reads one idea, then the next, never a wall. #### Low-pressure path Price, then a short qualification step, then the demo. The commitment rises only as the operator chooses to take it. (002) — Homepage ## The home page, *set like a statement.* vigooapp.com El Libro Abierto · 1440px Vigoo ProductoPreciosCasosRecursosCómo migrasAgenda tu demo Software para gimnasios · Colombia $0 # Lo que se te escapa a fin de mes, *en claro.* Cobra las mensualidades, organiza la operación y cierra el mes en minutos. Construido y operado por una caja en Bogotá. Agenda tu demoVer precios Lo que hace hoy ### Tres trabajos, *resueltos.* 01 ##### Operación diaria Asistencia, planes, miembros y staff en un solo lugar. 02 ##### Cobros y DIAN Cobra sin efectivo y emite la factura electrónica, pensado para cómo paga Colombia. En la hoja de ruta 03 ##### Reportería Los números del mes, visibles en minutos. 0% 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 producto Precios ### Un precio que *lees local.* ##### Operación COP $ /mes La operación diaria completa. ##### Operación + Cobros Disponible próximamente Suma cobros y facturación DIAN. ##### Multisede Disponible próximamente Para 2 o más sedes. ProductoPreciosRecursosSobre Vigoo AppContacto **Design rationale**The 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 ## How the system *extends.* Back-office UI Precios · rate table, transparent COP tiers Console UI Recursos · DIAN para gimnasios, answer-first Reception / desk UI Casos · Alpha Fit Club proof page 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 ## The parts, *in Claridad.* Buttons Agenda tu demoVer preciosCalculadora de fuga →Disponible próximamente Inputs Miembros activosCiudad Card · hover Facturación DIAN Lo que un gimnasio debe saber para facturar. (005) — Responsive ## Re-composed for *the thumb.* Software para gimnasios $0 ### Tu mes, en claro. Cobra, organiza y cierra el mes en minutos. Construido por una caja en Bogotá. Agenda tu demo Not 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 ## The ledger *settles.* 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 ## Why this *approach.* 01 7-Dimension UX matrix Layout EditorialFigure-and-caption pairings, hairline rules, numbers given room. Hero Typography-ledA single large month-end figure above the dues-and-DIAN outcome line. Density BalancedContent breathes without going sparse. 120px section rhythm. Scroll SectionedClear breaks. Each section is a complete thought. Navigation MinimalCompact top bar, five items plus the demo CTA. Hamburger on mobile. Animation ChoreographedCount-up figures, staggered row reveals, quart easing. Conversion Progressive disclosurePrice, then self-qualify, then demo. Commitment rises as chosen. 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 ## Standing in front of *the running business.* 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 #### Continuous, weighted flow The scroll moves from the environment into capability without hard breaks. The page reads like one motion. #### Capability by the operator's job A sticky rail reveals what the platform does framed as the owner's daily jobs, not a feature list. #### The demo is always within reach Distributed CTAs keep the demo and the lighter self-education paths present at every scroll depth. (002) — Homepage ## The home page, *as a console.* vigooapp.com Sala de Operaciones · 1440px Vigoo Producto ▾PreciosCasosRecursos ▾Cómo migrasAgenda tu demo Back-office UI Software para gimnasios · Colombia # Cobra sin efectivo, factura para la DIAN, *cierra el mes en minutos.* La plataforma construida y operada por una caja en Bogotá. Tu plata, clara. Agenda tu demoCalcula tu fuga de ingresos Por el trabajo del operador ### Lo que haces cada día, *en un lugar.* → ##### Operación diaria Asistencia, planes, miembros, staff. → ##### Cobros y DIAN Cobra sin efectivo, emite la factura, pensado para cómo paga Colombia. En la hoja de ruta → ##### Reportería Los números del mes en minutos. Agenda tu demo Reception / desk UI #### Hecho por gente que abre la caja No por un vendedor de software. Cada función se prueba en Alpha Fit Club antes de llegar a tu gimnasio. 0% Cerca de cero cancelaciones desde 2020, una base entera construida de boca en boca. Alpha Fit Club · Bogotá Agenda tu demo ProductoPreciosRecursosSobre Vigoo AppContacto **Design rationale**The 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 ## How the system *extends.* Console UI Producto · Operación diaria, console framed Studio environment Sobre Vigoo App · the Bogotá box origin Back-office UI Casos · Alpha Fit Club, operator proof 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 ## The parts, *with presence.* Buttons Agenda tu demoVer preciosChecklist DIAN →Disponible próximamente Inputs WhatsAppMiembros activos Card · hover Cobrar sin efectivo Cómo recibir las mensualidades sin caja. (005) — Responsive ## Re-composed for *the thumb.* Back-office UI Software para gimnasios ### Tu plata, clara. Cobra sin efectivo, factura para la DIAN, cierra el mes en minutos. Agenda tu demo Not 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 ## Clarity, *drawn.* 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 ## Why this *approach.* 01 7-Dimension UX matrix Layout CinematicFull-bleed environment flowing into capability. Scale as confidence. Hero Full-bleed immersiveBack-office environment, ghosted UI, a single green data-line drawing on load. Density BoldLarger type, deeper sections. 96px rhythm with full-bleed bands. Scroll Continuous flowSections blend; the page reads as one motion from environment to proof. Navigation ExpandedSticky header surfacing Producto and Recursos dropdowns, built for the content hub. Animation CinematicHero line draw, scroll reveals, sticky rail. Restrained, expo easing. Conversion DistributedDemo CTA plus transitional self-education CTAs recur at every depth. 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 ## Told in *chapters.* 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 #### Chapter by chapter Snap-scroll moves the reader between self-contained spreads, each a complete idea. #### Story carries the proof The operator-built credibility is the narrative, not a logo strip. The Bogotá box is the through-line. #### Ask where conviction peaks The call to book a demo appears at the end of each chapter, where the reader is most convinced. (002) — Homepage ## The home page, *as a spread.* vigooapp.com Cuaderno del Operador · 1440px Vigoo Menú ☰Agenda tu demo Studio environment Capítulo 01 · El mes # El mes que *se cierra solo.* 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. Agenda tu demo Console UI Capítulo 02 · La plata ## La plata, *clara.* Cobra sin efectivo y emite la factura para la DIAN, pensado para cómo paga Colombia. En la hoja de ruta Cómo funciona Reception / desk UI Capítulo 03 · El origen ## Construido en un *box de Bogotá.* Cerca de cero cancelaciones desde 2020. Cada función se prueba en Alpha Fit Club antes de llegar a tu gimnasio. Agenda tu demo ProductoPreciosRecursosSobre Vigoo AppContacto **Design rationale**Each 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 ## How the system *extends.* Studio environment Casos · Alpha Fit Club, narrative spread Back-office UI Cómo migras · the switch as a story Reception / desk UI Recursos · operator guides, editorial 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 ## The parts, *set editorial.* Buttons Agenda tu demoLeer el casoSiguiente capítulo →Disponible próximamente Inputs Nombre del gimnasioWhatsApp Pull-quote card · hover “Dejé de perseguir la plata.” Operador · Bogotá (005) — Responsive ## Re-composed for *the thumb.* Studio environment Capítulo 01 · El mes ### El mes que se cierra solo. Cobras, organizas y cierras sin perseguir efectivo. Construido en una caja de Bogotá. Agenda tu demo Not 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 ## A page *turning.* 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 ## Why this *approach.* 01 7-Dimension UX matrix Layout MagazineAsymmetric narrative spreads, pull quotes, a running margin note. Hero Split-screenOperator environment on one side, a Fraunces statement on the other. Density DenseRich chapters with quotes and margin notes. 130px rhythm between spreads. Scroll Snap scrollChapter to chapter, each a self-contained spread. Keyboard fallback provided. Navigation OverlayA full-screen publication menu opened from a single trigger. Animation Micro-onlyCounter-scroll spreads and hover underlines. Nothing flies. Conversion ContextualThe CTA appears at each chapter end, where conviction peaks. 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 ## Three approaches, *side by side.* 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 | Epirco recommends ### Sala de *Operaciones.* 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 ## Select your *approach.* 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 →](mailto:projects@epirco.com?subject=Vigoo%20App%20UI%2FUX%20%E2%80%94%20approach%20selection) Driving your business forward projects@epirco.com