Mobile and Tablet Design
The Night of Alan Interactive Digital Conference Experience
Project description
Lilly needed an interactive mobile and tablet microsite to support their conference booth, where healthcare professionals explored a simulated patient room illustrating life with OSA (Obstructive Sleep Apnea). Attendees could scan QR codes on objects or tap microsite hotspots to access short videos highlighting the daily challenges faced by patients with OSA.
Project Steps
Team brief
Explore concepts
Wireframe with UX team
UI exploration
High fidelity designs
Iterations and team reviews
Development and QA
Launch
Process
This section highlights how I contributed at each stage of the project—from research and planning through design, development support, testing, and final optimization.
Research & Planning
Began with a team brief and a workshop with UX, copy, art, and strategy to review market research and explore existing concepts. I then collaborated with UX on wireframes and with copy on the manuscript. After team and client approval, I used the wireframes and manuscript to develop the initial look and feel of the product.
Design & Prototyping
Researched UI inspiration, gathered brand materials, and reviewed design system requirements (not required for this specific project). From there, I created design options and prototyped key interactions. After presenting and securing team and client approval, I designed the full experience and prepared development-ready files, including button states and functional prototypes.
Development & Implementation
Handed off all required files and met with the development team to walk through the designs, review prototypes, address implementation challenges, and answer any questions.
Testing & Optimization
Conducted thorough testing across mobile and tablet to ensure compatibility, performance, and design accuracy. I also provided additional design solutions as needed to resolve development issues.
Wireframes
Select screens from our final wireframes showing home screen, room map with hotspots, and video reel
UI design
The initial booth render and Lilly’s branding informed the look and feel. We aimed for a nighttime atmosphere that matched the booth environment and conveyed the challenges of living with OSA without feeling bright or playful. This led to a dark-mode direction—using black, white, and Lilly’s pink accents—supported by exploring other products that successfully use dark interfaces.
Mood Board
High fidelity design
After selecting a creative direction I worked to design the interface, working through different iterations based on receiving final imagery and feedback.
Version 1 Mobile and Tablet
Solution
The Night of Alan interactive microsite provides a clear, intuitive solution by guiding users through the physical room and delivering object-specific videos that enhance understanding of the patient’s experience.
Hotspot indication
Hotspot indicaters not only help users find objects in the room but help users keep track of where they are and what objects they have left to find.
AI Created Videos and immersive sounds
AI-generated videos present information in a clear, digestible way—using copy, sound, and motion to create a more immersive experience.
Options for both kinds of users
We designed the site to support both QR-code scanning in the physical room and hotspot interactions within the microsite. Offering two ways to access the videos ensured flexibility—whether the room was crowded, users preferred a virtual experience, or they couldn’t visit the booth at all.
Results and Challenges
The experience delivered strong engagement and positive user reactions, resonating with attendees and effectively communicating the challenges of OSA. Despite a fast timeline and several production constraints, the team successfully created a streamlined, immersive solution that balanced clarity, usability, and impact.
Positive User Feedback
"This is so real. I'm concerned and scared for Alan"
"This is a great way to learn about OSA. It affects everything!"
"OSA really affects the things you don't think of, it's eye-opening."
Digital Impression Numbers
6,702 overall impressions, with an average of 8 views per attendee (total attendess number was 885)
Challenges
This project had a fast turnaround, so we needed to keep development simple, which limited the complexity of our designs and features. We also received the final room image late in the process, making it challenging to place all hotspots near their corresponding objects while still ensuring adequate clickable space.