Multi Device UI Design

Case Study:

Multi-Device UI Design for Large-Scale Digital OOH Display

Project Overview

This project involved the development of a multi-device user interface for Disney Pixar’s Inside Out movie launch campaign, featuring an interactive Digital Out Of Home (DOOH) advertisement in Times Square, NYC. The primary goal was to create a seamless, multi-input user experience across different devices—tablets, smartphones, and a large-scale jumbotron billboard. The challenge was to integrate inputs from different sources (live photo capture, social media) and synchronize them in real time to engage passersby with interactive content. The project aimed to merge cutting-edge UI/UX design with real-time interactivity on one of the world’s largest digital displays.

‍

The Problem

The complexity of the project required addressing several challenges tied to multi-device integration and large-scale UX display:

• Multi-Device Input Synchronization: Managing simultaneous inputs from two distinct controllers—a tablet for live interactions and a social media feed—for smooth and timely display.
• Cross-Platform Consistency: Ensuring that the user experience remained cohesive across multiple devices (tablets, smartphones, and billboard screens) with differing UI needs and input methods.
• Real-Time Content Processing: The system needed to handle and process live user data (selfies, facial emotion detection, and Twitter posts) without lag, ensuring instant feedback and display.
• Scalability for High Traffic: Designing a UI that could scale effectively, maintaining performance and responsiveness even during peak interaction periods.
• Public Space Interaction Design: Crafting a UX that would be intuitive and engaging for users who are quickly passing by in a high-traffic location like Times Square.

The Solution

The solution involved a sophisticated design strategy centered on multi-device interaction and seamless content flow:

• Device-Specific UI Customization: The tablet app was designed for ease of use in capturing selfies and detecting emotions, while the large display had a simplified interface to show the processed results in an impactful way. Meanwhile, the social media integration allowed for remote participation via Twitter.
• Real-Time Synchronization Across Inputs: The system dynamically synchronized data from live captures and social media inputs, using a central content management system (CMS) to queue and prioritize content for display.
• Modular Design Architecture: A modular approach was used for both UI and back-end systems, allowing flexibility in managing different input types while ensuring they worked together smoothly on the jumbotron.
• Optimized for Public Display UX: The billboard’s UX design was tailored for large-scale visibility, with bold visuals, clear messaging, and engaging character animations to capture attention from a distance.

Information Architecture

The information architecture was built to support seamless interaction across multiple devices:

• Multi-Device Input Management: The architecture allowed for real-time inputs from the tablet (Controller 1) and social media (Controller 2), feeding content directly to the central display.
  • Controller 1: Tablet App: Responsible for capturing live photos, analyzing emotions, and pushing content directly to the billboard.
  • Controller 2: Twitter Integration: Monitored tagged posts, filtered relevant content, and forwarded approved images to the display.
• Content Prioritization Logic: A CMS handled content flow, prioritizing live interactions over social media submissions during peak engagement times.
• Central Content Management System (CMS): Coordinated the display, ensuring that live captures and social media posts alternated smoothly on the jumbotron.
• Billboard Display Logic: Prioritized live user-generated content while maintaining a balance between database elements.

‍

Value of the Project

The multi-device integration brought several unique benefits:

• Immersive Multi-Device Experience: Users could interact directly with the billboard via the tablet interface or remotely through social media, creating multiple touchpoints for engagement.
• Increased Brand Visibility: The high visibility of Times Square combined with dynamic content flow created a memorable experience that amplified brand reach.
• Streamlined User Journey Across Devices: The UI was optimized for quick, easy interactions on each device, whether it was capturing a live selfie or posting via Twitter.
• Scalable Interaction: The system’s architecture allowed for hundreds of simultaneous inputs without compromising performance, ensuring a smooth user experience even during high-traffic periods.
• Cross-Platform Integration: By bridging physical interaction with social media, the campaign extended its reach far beyond Times Square.
• Real-Time Analytics and Feedback: The system provided real-time insights into user engagement, allowing for on-the-fly optimization of content delivery.

UI Design

The design focused on balancing the unique requirements of each device while maintaining a cohesive experience:

• Tablet UI: A minimalist interface allowed users to quickly capture selfies, see real-time emotion assignments, and confirm their participation, all in a few taps.
• Billboard Display: Designed with high contrast, vibrant colors, and large text, the display optimized content visibility from afar while maintaining alignment with the film’s branding.
• Social Media Integration: The Twitter integration featured auto-formatting for character assignments, ensuring that user-generated content seamlessly fit the billboard’s design parameters.

Results

This multi-device UI design project successfully leveraged a range of input methods to create an engaging, large-scale digital experience. The seamless integration of real-time content from various sources and the optimization of UX across different devices made this campaign a standout example of how multi-device interaction can drive engagement and amplify brand messaging in a crowded public space. Future implementations could explore deeper personalization, such as AI-driven interactions and adaptive content based on user profiles.

‍

‍

‍