Jio Tesseract
++
The Brief
India's first consumer MR glasses. Designed for everyone.
Jio Tesseract had the hardware. A lightweight, 76g mixed reality headset with a 201-inch virtual screen, spatial audio, and cross-device compatibility. What they needed was a landing page that could make someone who had never worn AR glasses in their life feel like they absolutely needed to.
The challenge wasn't technical. It was human. JioGlass wasn't targeting early adopters or tech enthusiasts — it was targeting India at scale. Students, retirees, gamers, professionals, binge watchers. Four completely different people with four completely different reasons to care. The design had to hold all of them without losing any of them.
I joined the Jio Tesseract UX team as a designer on this project. We started from scratch — moodboards, photography direction, 3D render references, persona research across three user segments, empathy mapping, information architecture, wireflows, wireframes, and final visual design. Every section of the page had to earn its place. Every headline had to do real work.
450M+
Jio Subscribers
The scale the design had to speak to
12 Weeks
Turnaround
From first session to V1 live
45+
Screens Designed
Landing page, built end to end, Spatial UI
The Problem
Mixed Reality is inevitable. But hardware alone doesn't sell.
Jio Tesseract had built hardware that could genuinely change how people consume content, work, and experience the world. But hardware alone doesn't sell, especially in a category most Indians had never interacted with before.
The landing page needed to introduce an entirely new product category, speak to four completely different types of users, and make the technology feel inevitable to someone who had never worn AR glasses in their life. There was no existing playbook for this. No Indian brand had launched consumer MR at this scale before.
Key Friction Points
No Category Playbook
No major Indian brand had launched consumer-grade mixed reality at this scale before, meaning zero local reference points for user behavior.
The Unfamiliarity Barrier
Mixed reality is hard to explain in text or static images. Users needed to feel what it is like before putting them on.
One Page, Four Personas
A single page experience had to speak to Binge Watchers, Gamers, Professionals, and Students simultaneously without clutter.
The Solution
Show people their version of JioGlass before selling them the product.
A persona-driven landing page experience built around one core idea: show people their version of JioGlass before selling them the product. Instead of a generic feature dump, the page was structured to meet each user segment exactly where they are. Binge watchers see their cinema, gamers see their battlefield, professionals see their portable office. Every section, every headline, and every visual decision was tied directly back to the research.
SEGMENT 01
Binge Watchers
Their Cinema
A virtual 201-inch screen with immersive spatial audio, turning any space into a private personal theatre.
SEGMENT 02
Gamers
Their Battlefield
Zero-latency mirroring, massive portable HUD view, and high-fidelity visuals right in front of their eyes.
SEGMENT 03
Professionals
Their Portable Office
A multi-screen virtual desktop workspace built for lightweight 76g comfort during extended work sessions.
Objectives
Three Pillars of Conviction
To turn general curiosity into absolute conviction, the landing page had to address critical user psychology barriers and deliver value across three main pillars.
Make the unfamiliar feel familiar
Design an experience that introduces a brand new product category to users who have never encountered MR hardware before, without overwhelming or alienating them.
Speak to everyone without losing anyone
Build a single cohesive page narrative that serves four distinct user segments, each with different motivations, concerns, and entry points.
Turn hesitation into conviction
Proactively address the doubts users didn't know they had, about comfort, usability, and relevance to their life, before they had a chance to bounce.
User Research
Six Segments, Twelve Personas
Before designing a single screen, we mapped who we were designing for — six completely different segments of mass India, each with their own motivations, frustrations, and entry points. Twelve personas. Every design decision had a real person behind it.
Aman Verma
About
Aman is a product manager at a fast-growing tech startup who travels frequently for work. Constantly switching between laptop, phone, and tablet disrupts his workflow. In public settings like airports and coworking spaces, the lack of screen privacy makes sensitive work feel exposed. He sees JioGlass as the one device that could replace all of it.
✦ Trigger Situation
Aman hates people peeking over his shoulder while analyzing stock charts or watching a movie. A private, immersive experience is exactly what he is looking for.
Goals
Stay on top of product development and team collaboration. Reduce device dependency. Climb the corporate ladder.
Frustrations
Lacks privacy on public transport. Struggles with mobile efficiency for work. Mentally drained by constant device switching.
Why Buy
Privacy during travel. Multitasking on the go. Enhanced entertainment during downtime.
Apprehensions
Comfort during extended wear on long flights. Battery life lasting a full travel day.
Platforms
Empathy Map
What users say, think, feel, and do
Personas tell us who the user is. Empathy maps tell us what is actually going on inside their head. For each segment we mapped what users say out loud, what they privately think, what they feel emotionally, and what they actually do day to day. This gap between what people say and what they feel is where the most important design decisions live.
Aman Verma
30 years old · Product Manager
Says
Switching between laptop, phone, and tablet feels mentally exhausting. Hates feeling watched while working on sensitive financial data. Wants something productive that does not add bulk to his bag.
Thinks
How do I keep my work private when I am on the move? Will the battery last a full flight? It would be amazing to have one tool that handles work and lets me unwind.
Feels
Frustrated by the lack of privacy and efficiency during travel. Confident about exploring cutting-edge tech that aligns with his ambitions. Tired of squinting at a tiny screen trying to decipher endless data.
Does
Uses high-end laptop and smartphone for work and entertainment. Invests time researching products before committing. Engages in forums focused on financial analysis tools. Always keeps himself busy with work or entertainment.
Key Insight
Across all segments one pattern kept surfacing. The hesitation was never really about price or complexity. It was about familiarity. Users across every segment were asking the same underlying question in different ways: is this actually for someone like me? That single insight became the strategic anchor for how the landing page was structured, what each section needed to say, and which objections had to be addressed before the user ever reached the buy button.
Process
How we went from a brief to a landing page for a product nobody had seen before.
The process was structured but never rigid. Designing for a completely new product category meant every phase had to inform the next one. We couldn't assume what users wanted because most of them had never interacted with MR hardware before. So we built from the ground up, letting research shape visual decisions and letting visual decisions pressure-test the research.
Phase Breakdown
Brief
The project started with a clear brief from Jio Tesseract — design a landing page experience for JioGlass that could speak to mass India. Not tech enthusiasts. Everyone. That single constraint shaped every decision that followed.
Research and Moodboard
Before touching wireframes, we ran parallel tracks. User research helped us map who we were designing for and what would make them trust an unfamiliar product. The moodboard defined what the product should feel like visually before a single screen existed. Both had to agree before we moved forward.
Benchmarking
We audited how global MR and consumer tech brands — Apple Vision Pro, Meta Quest, Samsung — handled landing page experiences for hardware that needed explanation. The goal wasn't to copy but to understand what creates credibility at first glance in this category.
IA and Wireframes
With research and visual direction locked, we mapped a 15-section page architecture where every section earned its place. Wireflows came first to map the user journey, followed by low-fidelity wireframes to test hierarchy and content priority, then final wireframes with components and spacing locked.
Visual Design
The visual layer was built on top of the Jio design system with deliberate choices around typography, colour, and imagery to position JioGlass as premium but accessible. Every section was designed to feel like a natural continuation of the one before it.
Handoff
Final designs were documented and handed off with component annotations, interaction notes, and Jio design system references to ensure a clean transition to development.
Wireflow
Mapping every path before designing any screen.
With research locked and personas mapped, the next step was understanding how a user actually moves through the JioGlass experience. Before designing any individual screen, we needed to map every possible path from the landing page to purchase and beyond. The wireflow made sure no journey was left unaccounted for and every section of the page had a clear purpose in the overall flow.
The Landing Page as the Hub
Everything starts at the JioGlass Landing Page. From here users can explore immersive features, real-life scenarios, interactive demos, specs, support, and purchase options. Five primary paths branch out from this single entry point — News, Search, Product Description, FAQs, and Experience in Store. Each path serves a different type of user with a different level of intent.
News
Product innovations, new features, and partnerships. For users who want to stay informed before committing.
Search
A universal search bar to explore all JioGlass content — blogs, news, FAQs, and technical details.
Product Description
Features, use cases, specs, and benefits. The core conversion page for users ready to evaluate seriously.
FAQs
Compatibility, repairs, Jio integration, and usage tips. For users with specific concerns before purchasing.
Experience in Store
In-store demo locations where users can try JioGlass firsthand. For users who need to hold the product before they buy.
The Purchase Path
From the Product Description Page the user moves into the buying flow. Two paths open up — Cart for users ready to purchase, and Accounts/Profile Page for users managing their relationship with the product over time.
The Cart leads to a seamless Checkout — reviewing items, selecting payment options, applying discounts, confirming shipping details, and completing the purchase. The Accounts/Profile Page branches into five destinations covering everything a user needs before and after purchase.
Order History
A log of all past purchases with details on items, dates, and statuses.
Wishlist
Save desired products or accessories for future purchase.
Saved Addresses
Manage delivery addresses for seamless order placement.
Track Order
Real-time tracking with estimated delivery timelines and updates.
Support
A helpdesk for all queries including FAQs, live chat, and troubleshooting guides.
Post-Purchase Layer
From Support, three final pages complete the ecosystem — Terms and Conditions, Privacy Policy, and Shipping and Return. These pages exist to build trust and handle the practical concerns that surface after a user has committed to a purchase.
Terms and Conditions
Legal framework governing product use, warranties, and liabilities.
Privacy Policy
How user data is collected, stored, and protected across the JioGlass ecosystem.
Shipping and Return
Delivery timelines, return windows, and refund procedures to reduce post-purchase friction.
What the Wireflow Revealed
Mapping the full flow made one thing immediately clear — the landing page was not just a marketing surface. It was the single most important screen in the entire ecosystem. Every other page depends on it doing its job. If a user leaves the landing page without being convinced, none of the downstream pages ever get seen. That insight reinforced every structural decision we made in the sections that followed.
Moodboard
Before the screens, we defined the feel.
Before any wireframe was touched, we needed to agree on what JioGlass should look like in the world. The product had to feel like it belonged next to the best consumer tech hardware globally, while still being built for India. That tension had to live in every render, every shadow, every material choice.
We built three visual directions to pressure-test the language before anything else moved forward.
Visual Directions
Photo Realistic Renders
The first direction established how JioGlass sits in physical space. Tabletop renders, shadow-enhanced stills, detailed close-ups. The reference point was Apple's product photography language — controlled light, minimal surface noise, hardware that looks engineered down to the millimetre. The goal was simple: make it look like something you would trust before reading a single spec.
Product Material Highlight
Material-in-focus renders under dramatic lighting pushed contrast and surface detail to the foreground. This direction was about communicating build quality at a glance. The kind of visual that makes someone feel the weight and finish of the product before they have ever held it.
Transparent Overlay & Exploded View Renders
Internal components in detail. Transparent overlays showing what is inside. This direction served the more technically minded segment. Showing the engineering signals confidence in the build, not just the marketing. When you can see what is inside, you trust what is outside.
Design System
Consistency at scale, built for Jio.
Typography
JioType
The project was built entirely on JioType, Jio Tesseract's brand typeface. Every size, weight, and spacing decision was made to ensure the landing page felt cohesive with the wider Jio ecosystem while maintaining its own premium character. JioType brings a sense of familiarity to users already within the Jio world, while feeling refined enough to carry a hardware product at this level.
JioType
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Onboard Large
Jio Tesseract
28px · Bold
Onboard Medium
Jio Tesseract
16px · Bold
Onboard Small
Jio Tesseract
13px · Regular
Body Large
Reliance Tesseract
16px · Regular
Body Medium
Reliance Tesseract
14px · Regular
Body Small
Reliance Tesseract
12px · Regular
Icons
Icons are graphic symbols used to represent concepts and features, serving as a powerful tool for visual communication across the JioGlass landing page. They provide additional functional value and help users quickly recognise actions, understand information, and navigate features without needing to read.
Icon Grid
To ensure visual uniformity, all icons are produced on a consistent 24x24px grid. Line strokes are 2px in thickness, with concentric guides to facilitate the placement of key shapes. This guarantees that every icon aligns with Jio brand standards and retains a cohesive appearance across all sections of the page.
Characteristics
Simple
Icons are kept as simple as possible to effectively convey their intended meaning without visual noise.
Round
Icons are rounded to complement the JioType design language, drawn on a consistent grid with a toolkit of rounded forms.
Understandable
Icons communicate their intended meaning through simple metaphors that are universally recognised across user segments.
Illustration System
Illustrations are an integral part of the JioGlass design system, providing visual aids that enhance understanding and bring the product experience to life. Every illustration was crafted to embody the Jio Tesseract brand character — ensuring consistency in style, tone, and quality across every section of the landing page.
Illustrations played a key role in making an unfamiliar product category feel approachable. For a product most users had never seen before, the right illustration could do what copy alone couldn't — show someone their version of JioGlass before they ever held it.
Role of Illustrations
Illustrations play a vital role in building the JioGlass visual identity and communicating its values to the target audience.
Communication
Illustrations can communicate an idea or emotion more effectively than a copy line or a photograph. On a landing page for a product most users had never seen, this made them an essential tool — not decoration.
Character
Illustrations express the Jio Tesseract brand personality and bring warmth to every interaction. They give the page a human quality that hardware specs alone never could.
Consistency
Illustrations bring consistency to how users experience the brand across every section of the page. That consistency builds trust — and trust is what turns a first-time visitor into a buyer.
The Jio Story
Every illustration on the JioGlass landing page tells a story. The goal was to bring delight while conveying trust and brand recognition — not just decorating the page but actively moving the user toward a decision. Before any illustration was created, three questions were answered: who is the customer, what is the message, and what emotion should they feel.
Charming
Illustrations aim to evoke warmth and genuine smiles through simple, relatable moments. The tone is light and human without being slapstick or gimmicky. Every concept was tested against one question: does this feel real to someone using JioGlass in their daily life?
Indian
Every illustration was grounded in the Indian context. Metaphors, settings, and characters were chosen to resonate with the actual audience — not borrowed from Western references that would feel distant or unfamiliar. The visual language had to feel like it was made for India, because it was.
Future Forward
Illustrations avoided references that felt dated or nostalgic. The visual direction leaned aspirational — showing users a version of their life that feels one step ahead, the kind of imagery that makes someone feel like JioGlass belongs in their future.
Components
Every interactive pattern on the JioGlass landing page was drawn from a shared component library — ensuring visual consistency across states, breakpoints, and user segments.
Component 1
Avatar
Used to display user profile pictures or initials in navigation and settings. Helps personalize the JioGlass experience and manage user accounts with clear visual indicators.
Component 2
Bottom Sheet
An overlay panel sliding from the bottom, offering context-specific actions or settings. Perfect for mobile navigation, minimizing screen clutter while keeping interactions within easy thumb reach.
Component 3
Checkbox
A fundamental control for multi-select choices, such as preferences or configurations. Designed with interactive state feedbacks and distinct checkmarks to guarantee clarity.
Component 4
FAB (Floating Action Button)
Represents the primary positive action on a screen, like adding a new device or launching a demo. Floats above content to stay accessible while scrolling.
Component 5
Heading
Establishes standard text hierarchies across sections. Ensures consistent typography size, line heights, and margins to build a clean layout throughout the interface.
Component 6
Selector
An interactive choice card or segment switch for toggling settings or models. Built with explicit active state borders and icons to make user selections intuitive.
Component 7
Slider
A fluid slider component for fine-tuning numeric values like volume, brightness, or scale. Offers instant visual feedback with custom handle controls.
Component 8
Stepper
Used to increment or decrement quantities, like product items in the shopping cart. Designed with responsive buttons to prevent accidental double-clicks.
Component 9
Toast
Temporary, non-disruptive feedback messages that slide in to notify users of status changes like item added, settings saved, or connectivity updates.
Component 10
Bottom Nav
The primary tab bar for switching main views on mobile. Adheres to accessibility standards, providing clear icons and labels for smooth navigation across JioGlass features.
The Design
A landing page built to make an unfamiliar product feel inevitable.
Every screen was designed with one question in mind — does this move the user one step closer to believing JioGlass was made for them? Here is how it came together, screen by screen.
