TN HomePage Overview

1. Summary

The Tata Neu homepage is not a static Flutter screen.

It is a dynamically composed, server-driven experience assembled using:

• CMS-managed content
• Customer context
• Loyalty data
• Credit Card data
• UPI state
• Feature Flags
• Segmentation rules

before being rendered on the client.

The architecture is designed to allow new experiences, experiments, layouts and personalization to be launched without requiring app releases.

High-Level Architecture

---

2. Homepage Ecosystem

The homepage is powered by four major architectural layers.

Content Layer

Content authors manage homepage layouts, cards, banners, sections and experiences in Sanity CMS.

Content changes are automatically synced into MongoDB and become available to NeuAPI.

Composition Layer

NeuAPI acts as the central content composition engine.

Responsibilities include:

• Route resolution
• Content retrieval
• Personalization
• Segmentation
• Workflow execution
• Feature flag evaluation
• Response assembly

Business Systems

Multiple domains contribute customer context.

Examples:

• NeuPass Tier
• NeuCoins Balance
• Credit Card Status
• UPI Registration State

Client Runtime

Mystiq provides the runtime responsible for:

• App startup
• Feature lifecycle management
• Content rendering
• Navigation
• Store management

---

3. Why Mystiq Exists

Mystiq standardizes common application capabilities across Tata Neu.

These include:

• Content Rendering
• Authentication
• Storage
• Secure Storage
• Feature Flags
• Analytics
• Network Abstractions
• Feature Packaging

This allows multiple business teams to contribute independently while sharing a common runtime and rendering model.

---

4. App Launch & Homepage Load Journey

When a customer launches Tata Neu, a sequence of platform initialization activities occur before the homepage is rendered.

Primary Startup Contributors

Authentication

• Reads existing token
• Validates login state
• Refreshes token if required
• Fetches customer profile information

Location

• Restores cached location when available
• Falls back to device location and reverse geocoding when necessary
• Determines active customer location context

Settings

• Loads application configuration
• Loads URL routing configuration
• Loads runtime settings

Note: Several startup optimization initiatives are currently in progress and are documented separately in dedicated RFCs. RFC LINK

---

5. How NeuAPI Builds the Homepage

NeuAPI is the central composition engine responsible for transforming raw CMS content into a personalized homepage experience.

Homepage Composition Flow

NeuAPI performs:

• Route resolution
• Content retrieval
• Dynamic data enrichment
• Workflow orchestration
• Feature flag evaluation
• Segmentation
• Variant selection

before returning content to the application.

---

6. Dynamic Content Enrichment

A key capability of the platform is the ability to inject live business data directly into CMS-authored content.

For example:

{
  "title": "$data.neupass.tier",
  "subtitle": "$data.neupass.neucoins"
}

The content author defines placeholders.

NeuAPI resolves them dynamically at request time.

This allows business teams to launch personalized experiences without application releases.

---

7. Personalization & Segmentation

Homepage experiences are dynamically tailored using customer context.

Personalization Inputs

Loyalty Context

Provides:

• NeuPass Tier
• NeuCoins Balance

Credit Card Context

Provides:

• Carded / Non-Carded State
• Plus Variant
• Infinity Variant
• Application Status

UPI Context

Provides:

• Active VPA
• Migration Status

Possible states:

• UPI 1.0 User
• UPI 2.0 User
• Not Registered

Runtime Context

Provides:

• Logged-In State
• Anonymous State
• Platform
• App Version
• Feature Flags

---

Segmentation via Extensions

Only the content variants relevant to the current customer are returned to the client.

---

8. Homepage Composition

The homepage consists of multiple independently configurable sections.

---

App Bar

Contains:

• Search
• Hamburger Menu

Provides access to:

• User Settings
• Transaction History
• Order History

Supports:

• Seasonal Themes
• Loyalty Tier Themes

---

Dynamic Nudge Zone

Open-ended personalization area.

Can be driven by any available segmentation signal.

Current example:

• UPI Migration Nudge

---

Financial Services Ribbon

CMS configurable.

Current experiences include:

• UPI
• Bill Pay
• BigBasket

---

Category Grid

CMS configurable.

Uses:

• Loyalty Context
• Credit Card Context

Supports:

• Dynamic layouts
• Dynamic card ordering
• Dynamic card positioning

---

Offers Carousel

CMS configurable.

Each offer card can independently define its own segmentation rules.

{width=435px}

---

UPI VPA Callout

Powered by the UPI workflow.

Displays active VPA information and related contextual experiences.

---

9. Homepage Runtime Stores

After the homepage content is received, page-level stores initialize and drive runtime interactions.

Loyalty Store

Handles:

• NeuCoins refresh events
• Loyalty state updates

Search Store

Handles:

• Search bar business logic

UPI Store

Handles:

• Collect request events
• Homepage payment prompts

---

10. Evolution of the Architecture

The homepage architecture has progressively moved from client-side decision making toward centralized server-side composition.

Benefits include:

• Faster experimentation
• Reduced dependency on app releases
• Smaller payloads
• Consistent behavior across platforms
• Greater personalization capability

---

11. Key Takeaways

1. The Tata Neu homepage is dynamically assembled, not hardcoded.

2. NeuAPI acts as the central content composition and personalization engine.

3. Business teams can launch experiences through CMS configuration without requiring app releases.

4. Multiple customer context signals drive personalization in real time.

5. The platform is evolving toward increasing server-side decision making, allowing faster experimentation and richer customer experiences.