Skip to content

Here is the OVES architectural directive — applicable to developers, leadership, or external partners.

đź”· UXI Vision: A Unified, Composable, System-Level Experience Framework for OVES

UXI defines how OVES builds digital experiences across web, mobile, and desktop. It provides a central design system, a content-to-presentation architecture, and a unified runtime model that scales across all products and platforms.

UXI’s foundation aligns with modern, proven patterns used by leaders such as Meta, Shopify, Stripe, and Vercel: Composable UI blocks, MDX-driven content expression, Tailwind-based styling, and platform-agnostic delivery through WebView/WebView2.

1. Purpose

To establish a streamlined, real-time web and application building strategy where content and presentation are expressed as one system, supported by a unified style architecture and AI-assisted workflows.

UXI ensures that every OVES digital surface—public websites, portals, eCommerce, operational tools, and mobile apps—shares a coherent, predictable, and efficient experience.

2. Scope of UXI

UXI governs all OVES experience layers, including:

A. Corporate Web Properties

  • Region-specific and business-focused sites
  • Product and brand microsites (Lumn, Camp, Oasis, ovEgo, QiX)
  • Partner portals and marketing surfaces

Built using React/Next.js + TailwindPlus + MDX.

B. Commerce & Transactional Systems

  • Shopify storefronts
  • Odoo-based commerce portals
  • Partner retail and service portals

Presentation delivered via UXI blocks; data fed from Shopify/Odoo APIs.

C. Asset & IoT Management

  • ARM (assets.omnivoltaic.com) powered by ABS
  • IoT Thing Services (telemetry, swaps, fleet operations)

UXI ensures operational tools share the same interaction model as public-facing apps.

D. Enterprise Tools

  • enterprise.omnivoltaic.com (Odoo backend with headless UI)
  • Partner onboarding and internal process flows

UXI enforces clarity, minimalism, and consistency in workflows.

E. Mobile Application Suite

  • Rider app
  • Swap attendant app
  • Technician field tools
  • Partner & distributor interfaces
  • Customer & Asset Relationship Management (CARM) system

Cross-platform delivery

Mobile and desktop applications run UXI interfaces through:

  • WebView (iOS/Android)
  • WebView2 (Windows 11 Desktop)

This strategy ensures one unified React-based frontend is delivered across OS environments.

F. Documentation System

  • docs.omnivoltaic.com (MkDocs & Markdown)
  • Future-ready for hybrid MDX where appropriate
  • Same typography and styling principles apply

3. UXI Experience Architecture

UXI Technical Stack

UXI defines how content becomes experience:

Layer 1 — Backend Content

  • Odoo
  • Shopify
  • ABS / Thing IoT
  • Local JSON/YAML
  • Documentation repositories

Layer 2 — Presentation Blocks

Reusable React components (TailwindPlus + Mosaic style system) representing:

  • Hero
  • Feature grid
  • Product specs
  • Pricing
  • Steps / campaigns
  • Operational dashboards
  • IoT data sections
  • Forms and workflows

Each block expresses a complete unit of meaning.

Layer 3 — MDX or JSX Composition

Pages are authored by composing blocks into sections, and sections into pages. This model powers modern frameworks like Next.js, Astro, Meta FB5, Shopify Hydrogen.

Layer 4 — Application Shells

  • Public sites: TailwindPlus templates
  • Operational systems: Mosaic shells
  • Mobile/desktop: WebView / WebView2 runtimes

Each shell shares the same token system and UX conventions.

Layer 5 — Deployment

GitHub → CI/CD pipelines → Vercel / Cloudflare (Same lifecycle used by Meta, Stripe, GitHub Docs, etc.)

4. Unified Style System (“OVES Presentation System”)

UXI specifies a central style and interaction system, not merely a theme.

Shared elements

  • Typography hierarchy
  • Color tokens
  • Motion and transitions
  • Layout scale and rhythm
  • Component spacing system
  • Iconography
  • Responsive grid rules

UXI aims for:

  • Minimalism
  • High signal, low noise
  • No UI clutter or decorative distraction
  • Predictable component behavior across platforms

Every OVES application—web, mobile, desktop—must derive from this single style vocabulary.

5. Platform-Aware UX (Beyond “Responsive Design”)

UXI modernizes “responsive design” into context-aware UX:

Applications must respond not only to screen size, but to device capabilities and user context.

Examples:

  • Camera access should feel identical whether in a mobile WebView or Win11 WebView2.
  • BLE scanning should follow the same UI pattern across Android, iOS, and desktop.
  • File upload/document scanning should use the same interaction vocabulary everywhere.
  • IoT device pairing is presented with the same conceptual flow across platforms.

This is how Meta, Zoom, and Slack now unify cross-platform behavior: one UI, multiple runtime environments.

UXI makes OVES applications platform-consistent and predictable.

6. Identity, Authentication, and Multiservice Orchestration

UXI relies on:

  • Keycloak for identity and SSO
  • Odoo/Shopify/ABS as structured content sources
  • Next.js as a unified presentation environment
  • WebView/WebView2 for native mobile/desktop distribution
  • CI/CD to ensure consistency across all deployments

This architecture reduces duplication and aligns OVES with modern “super app” model architectures.

7. Governance & Versioning

UXI is:

  • Versioned
  • Pipeline-driven
  • AI-friendly
  • Developer-extensible but architect-controlled

Governance rules:

  1. All applications must use the UXI block library.
  2. All styling must derive from the central Tailwind token system.
  3. New components must follow UXI naming, structure, and simplicity.
  4. AI-generated UI must conform to UXI grammar.
  5. No custom styling outside the sanctioned token layer.
  6. Web and mobile apps must reference the same block vocabulary.

This prevents architectural drift and ensures long-term maintainability.

8. Vision Summary (Executive Style)

UXI provides OVES with:

  • A single experience system across all digital properties
  • A block-based composition model for scalable content expression
  • A unified design and interaction language
  • A react/next.js architecture deployable to web and app environments
  • A content-to-presentation pipeline that feels natural to both humans and AI
  • A future-proof system aligned with industry leaders (Meta, Shopify, Stripe)
  • A guarantee of consistency, clarity, and maintainability

UXI is the backbone of OVES’s digital presence, tying together corporate sites, commerce, field operations, IoT management, enterprise systems, and customer engagement into one coherent experience.