Lumos.tv
Lumos is an AI powered streaming service that cuts browsing fatigue with face scan mood detection and conversational voice or text search.
It’s built on an atomic design system with tokens and variables for fully responsive, device-switchable UIs.
Mobile, Tablet, Desktop and TV
Role:
Senior UI/UX product Designer.
End-to-end: Research, Design, Documantation
Timeline:
1 Months
Tools:
Figma: Variants, Token, Component Properties
Documentation Responsive Design and UI Animation
Click to enter the Figma file
The Problem
Today, streaming is everywhere—TVs, laptops, tablets, phones—and every service throws endless rows at you. What should feel relaxing turns into work. Too many choices, noisy layouts, and “trending” carousels create decision fatigue. Instead of unwinding, people scroll, second-guess, and give up. The experience shifts from enjoyable to a chore.
User Group
For everyday viewers across ages, races, and genders. It’s intentionally inclusive and accessible. The common thread isn’t demographics, it’s context. People who use streaming services
Bring the joy back to streaming. Make it easy for people to land on something that fits the moment and feels like them fast.
Help viewers feel seen and relaxed, not overwhelmed, and give them the confidence to discover new shows and genres without pressure. Across every device, the experience should feel calm, predictable, and personal so watching becomes enjoyable again.
The Goal
A streaming experience that feels human again. People spend less time stuck in indecision and more time actually watching. Sessions feel calmer and more personal, so nights end on a good note instead of a frustrated scroll. Viewers feel seen, discover shows they genuinely enjoy, and come back because it’s easy, consistent, and enjoyable across whatever device they’re on.
User Impact
Design Process
My design process begins with empathy and creativity, focusing on deeply understanding users and their challenges. I translate these insights into visually engaging solutions that balance functionality and emotion, creating seamless, experiences.
Face Scan Mood Detection Engine
Face Scan is Lumos’s mood detection engine that turns indecision into instant picks. With a quick, opt-in scan, Lumos reads facial cues to gauge your current vibe: calm, light, focused, or high energy and immediately assembles a small set of spot on recommendations y matching content to how you feel right now, Face Scan cuts browsing time by up to 80%, reduces endless scrolling, and gets you watching faster. It’s designed for trust and control users can skip or redo a scan anytime
Voice Command- Conversational AI
Lets you say what you want in plain language and jump straight to a great watch. Ask naturally “shows like Friends, feel-good, 25 minutes”, and Lumos understands the intent, turns it into clear filters, and serves a small set of spot on options.
You can refine with one more detail or try a different ask without starting over. By removing menus and long scrolls, Voice Command reduces effort and gets you to Play faster keeping control in your hands while the AI does the heavy lifting.
Responsive Design - Product Consistency
The video demonstrates the Lumos homepage adapting across TV, desktop, tablet, and mobile with consistent hierarchy and behavior. This is driven by an atomic design system using tokens and variables for type scale, spacing, sizing, color, and elevation change a token and all breakpoints update accordingly. Components are responsive: grids reflow, cards resize, focus states strengthen for 10 foot TV, and touch targets meet mobile guidelines. The approach improves accessibility, reduces one off fixes, and keeps design and engineering aligned across devices
Competitive Analysis
Consent Form
Interview Protocol
Interview Summaries
Affinity Diagram - Analyze Contextual Data
User Persona
Storyboard
The Creation journey
Low Fidelity
This stage represents the initial phase of the design and prototyping process. During this stage, the emphasis is placed on quickly sketching out ideas and concepts to explore the layout and flow of a design solution
Mid Fidelity
This next stage of prototyping serves as a critical transitional phase in the design process, bridging the gap between early, low-fidelity concepts and the final high-fidelity product. During this stage, you will find more refined ideas and transition from conceptualization to more concrete implementations
High Fidelity
High-fidelity prototyping represents the final and most polished stage in the design process, where the design concept evolves into a fully functional prototype that closely resembles the end product
Filtering Decisions
narrow down options or data based on specific criteria, making it easier and faster to find what they need while reducing frustration
User Requirements
Define essential user needs, expectations, requirements, specifying the environment, conditions, actions, behaviors a product must meet.
User Mental Model
Defines how users intuitively understand a system, often using real-life metaphors like icons to guide their interactions and expectations.
UI Affordances
Design cues to guide users on how to interact with elements without needing labels or instructions Sensory, Cognitive, Functional, and Visual Affordances
Annotations/For Development - Mobile
Sign up:
Account Set Up
Log In
Homepage
Voice Command- Conversational AI
Face Scan Mood Detection Engine
Content
Donation.com
Mobile App & Web Interface
A comprehensive mobile and desktop platform designed to support local, regional, and global charities or individuals in need. Through extensive user research, smart animations, auto text, and a robust design system, the platform creates personalized experiences that empower recipients to receive direct support via customized pages.
