AisleCast: Virtual Supermarket Ecosystem
Executive summary
AisleCast is a "Cast-to-Cart" platform that bridges the gap between digital convenience and the social experience of physical shopping. By utilizing a TV as a shared virtual "aisle" and mobile devices as interactive controllers, AisleCast gamifies grocery shopping for the entire family.
Business value proposition
The problem
- Isolation: Online grocery shopping is a solo task on a small screen.
- Choice paralysis: Mobile apps often present too many choices in a cluttered list format.
- Family friction: One person buys, others complain about what was missed.
The solution
- Shared visibility: The TV screen acts as a "digital window" into the store.
- Collaborative input: Multiple family members can influence the cart in real-time.
- Retailer premium: Brands can "rent" virtual shelf space (End-caps) in a high-engagement 3D environment.
Product features & UX
The "Cartoonish aisle" (TV receiver)
- Visual style: Low-poly, vibrant, 3D-stylized environment (high performance for TV hardware).
- Top navigation: Persistent category tabs (e.g., Produce, Dairy, Bakery, Coffee) that act as "teleports."
- Dynamic highlighting: As the "Pilot" (primary phone) moves their cursor, the 3D models of brands glow or pulse.
The "Cherry pick" mechanic
- Action: When a brand is selected on the TV, a detailed modal (popup) appears over the aisle.
- Granularity: Instead of showing all 200 items in a category, the user picks the Brand first, then "Cherry Picks" the specific Variety (e.g., Light Roast vs. Dark Roast).
- Social voting: Family members can "Like" or "Request" items from their own connected devices.
Technical architecture
High-level stack
| Component | Technology | Role |
|---|---|---|
| Mobile App (Sender) | Flutter or React Native | Handles UI, Haptic feedback, and Cast signaling. |
| TV App (Receiver) | HTML5 / Three.js | Renders the 3D environment via the Google Cast Web Receiver SDK. |
| Communication | WebSockets / Firebase Realtime DB | Syncs cursor position and "Cherry Pick" selections between phone and TV. |
| Backend | Node.js / Python | Interfaces with Retailer APIs (Instacart, Kroger, Walmart). |
The "Dual-screen" sync logic
- Handshake: The mobile app initiates a Cast session. The TV loads the AisleCast Receiver URL.
- Controller mapping: The mobile screen becomes a touchpad/gyro-controller. Movement on the phone translates to a
normalize(x,y)coordinate sent to the TV. - The "Pop-up" trigger:
- Mobile: User taps "Select Brand."
- Message:
{action: 'SHOW_DETAIL', brandId: 'Brand_A'}sent via Cast Message Bus. - TV: Three.js camera pans to the brand; UI Overlay displays specific product variations.
Monetization & strategic partnerships
- Virtual end-caps: Sponsored brand placement at the "start" of every virtual aisle.
- Gamified rewards: "Scavenger Hunts" where finding a hidden "Golden Coupon" in the 3D aisle provides a discount.
- Retailer integration: White-labeled versions for major grocery chains to increase "Basket Size" through visual discovery.