Nocto
Connect After Dark
A cross-platform product ecosystem exploring how live-streaming mechanics and location-based discovery can seamlessly connect people with the real-world nightlife happening around them.
Role: Lead Product Designer · Brand & Visual Designer
Core Focus: Product Strategy · Cross-Platform UX/UI · Interaction Design · Design Systems
Tools: Figma · Adobe Creative Suite
Timeline: 2023 (Concept Prototype)
The Context & Strategic Opportunity
Nightlife and event discovery are heavily fragmented across scattered social media stories, static event listings, and unreliable word-of-mouth. Traditional location apps show you where a venue is, but they fail to show you the vibe, the crowd density, or the music in real time.
The Paradigm Shift: Instead of asking users traditional streaming questions like "What do you want to watch?", Nocto shifts the cognitive axis to ask: "What is happening around you right now tonight?"
The Mission: How might we synthesize real-time streaming content with geographic proximity to create a frictionless, high-trust nightlife discovery experience?
The Ultimate Goal: Connect place, time, live content, and social interaction into a single unified workspace, allowing users to effortlessly evaluate their evening plans before leaving the house.
Core Experience Architecture
I mapped out the entire interaction architecture across a repeatable behavioral loop, ensuring that moving from discovery to live engagement feels completely natural for the user:
Discover: Explore a live, location-aware map grid showcasing real-time nightlife streams happening in your immediate vicinity.
Go Live: Share an immersive, high-definition stream directly from your current venue to give the community an authentic look at the atmosphere.
Night Collabs: Co-stream simultaneously with friends or other creators across different venues to maximize community cross-pollination.
Live Chat: Interact instantly with streaming hosts and nearby viewers through integrated, low-latency communication containers.
Cross-Platform UX Strategy
To validate the viability of the concept, I designed a comprehensive, multi-device ecosystem ensuring a seamless transition between desktop web marketing and mobile product utility:
The Marketing Landing Page: Engineered a high-impact desktop website layout designed to clearly communicate Nocto’s value proposition, drive user acquisition, and build brand authority.
The Mobile Interface Concept: Crafted high-frequency interface flows optimized for real-time mobile interaction patterns, focusing on single-hand reachability during streaming and navigating.
High-Fidelity UI & Nightlife Visual System
The visual direction meticulously blends the vibrant, electric energy of nightlife culture with a hyper-functional, clear interface designed for low-light environments.
Dark-Mode Optimization: Built a sleek, high-contrast dark visual palette that ensures excellent screen readability inside dim lounges, concert venues, and night environments.
Contextual Discovery Cards: Designed responsive information cards that blend live video overlays with metadata tags like distance, music genre, and real-time active viewer counts.
Scalable Component Library: Engineered a cohesive design system encompassing responsive navigation structures, fluid streaming player windows, chat bubbles, buttons, and custom iconography to maintain absolute consistency across web and mobile.
Project Reflection & Strategic Takeaways
Nocto explores how location data and real-time video interaction can create a deeply contextual, meaningful approach to digital exploration. The project successfully synthesized product strategy, branding, interaction design, and visual mechanics to turn an abstract cultural problem into a tangible system.
The Creative Retrospective: This project reinforced a powerful design principle: designing for a hyper-focused, specific context creates a significantly more meaningful experience than trying to design a generic tool for everyone. It demonstrates how creative visual storytelling and strategic product architecture can work together to turn digital interactions back into real-world human connections.
