Mobile and Tablet Microsite
The Night of Alan — Interactive Conference Experience
Company
Lilly
ROLE
Product Designer (UI, interaction, prototyping)
Team Members
UX Architect, Art Supervisor, Copywriter
Designed a mobile and tablet microsite for a conference booth experience, allowing healthcare professionals to explore a simulated patient room and learn about life with obstructive sleep apnea through interactive hotspots and short-form videos.
The Problem
Healthcare professionals attending the conference needed an engaging, intuitive way to understand the everyday impact of obstructive sleep apnea within a busy, physical booth environment. The experience had to work quickly, be easy to navigate, and remain accessible whether users were interacting in-person or remotely.
Fast production timeline
My Role & Ownership
I collaborated with a UX Architect during early concept and structure, then led UI design, interaction design, prototyping, and development-ready handoff. I worked closely with art, copy, and development to ensure the experience aligned with Lilly’s brand, booth environment, and technical constraints.
Key Insights
Conference attendees engage in short bursts and need immediate visual cues
Users interact with the experience in multiple ways (QR scanning or direct navigation)
Clear indicators are necessary to prevent users from missing content or losing context
UX Structure & Flow (Context)
Early flow and content structure were developed in partnership with a UX Architect to map the physical room to a digital experience. My focus was translating that structure into a clear, immersive interface that supported both in-room interaction and standalone exploration.
Design Strategy
Design principles guiding the experience:
Match the visual tone of the physical booth environment
Use darkness and contrast to convey nighttime challenges without feeling playful
Make interactive hotspots obvious and trackable
Support multiple interaction paths without adding complexity
UI & Interaction Design
Visual direction:
Informed by booth renders and Lilly branding
Dark-mode palette using black, white, and pink accents
Inspired by other successful dark-interface products
Interaction patterns:
Hotspots to guide exploration and show progress
Video reels for short, digestible content
Subtle motion and sound to enhance immersion without distraction
Version 1 Prototype
Solution Highlights
Hotspot indication
Hotspots help users discover objects, understand progress, and maintain orientation within the room.
AI-generated videos
& sound
Short videos and immersive audio reinforce the emotional and educational impact of each scenario.
Flexible access
The experience supports both QR-code scanning within the physical room and direct interaction within the microsite, ensuring accessibility regardless of crowding or location.
Outcome & Impact
The experience drove strong engagement at the conference and received positive feedback from healthcare professionals, helping communicate the real-world impact of OSA in a memorable, empathetic way.
Metrics:
6,702 total impressions
Average of 8 views per attendee (885 attendees)
“This is so real. I’m concerned and scared for Alan.”
“This is a great way to learn about OSA.”
“It affects the things you don’t think of — it’s eye-opening.”
Challenges & Tradeoffs
A fast timeline and late delivery of final room imagery required design simplification and careful hotspot placement to balance clarity, accuracy, and tap targets.
Next Up
