+
Building a Cross-Platform Video Production Experience
PROJECT OVERVIEW
SlingStudio is an all-in-one, portable, wireless solution for high-quality, multi-camera video production, designed for prosumers. It supports monitoring, recording, switching, and live broadcasting to platforms like YouTube and Facebook. Released in 2017 as a major innovation from Sling Media, the product took over a year of development from concept to market launch. The UX team delivered three interface experiences: iPad, desktop, and mobile applications.
ROLE AND RESPONSIBILITY
-
Designed high-level UX flows and wireframes for the SlingStudio product experience.
-
Led visual design, branding, and product imagery for the platform.
-
Collaborated closely with designers, product managers, and engineering teams throughout the product development process.
-
Refined designs through iterative improvements to ensure high-quality, pixel-perfect implementation.
WHAT DOES THE SLINGSTUDIO APP OFFER
-
SlingStudio offers two apps—Console and Capture—for a portable, wireless multi-camera production system
-
The Console app turns an iPad or Mac into a full production studio to monitor, switch, record, and livestream content.
HOW IT WORKS
UX DESIGN PROCESS & USER FLOW
CLICK IMAGE
TO ENLARGE
HIGH-FIDELITY WIREFRAME
As part of the design process, I created a high-fidelity wireframe and ran multiple tests to assess its layout and overall usability.
CLICK IMAGE
TO ENLARGE
UI DESIGN LAYOUT WITH GRID SYSTEM
We tested various dimensions to embed multiple videos in a 16:9 aspect ratio. However, due to limited screen space, we faced challenges displaying multiple videos simultaneously. To overcome this, we explored several layout options and delivered pixel-perfect specifications to the engineering team for implementation and testing. Ultimately, we designed an optimized solution tailored for the iPad 9.
Phase 1
Video Aspect Ratio
288x162 px & 672x378 px
Spacing 8 &16px
Phase 2
Video Aspect Ratio
272x153 px & 640x360 px
Spacing 8px
Phase 3
Video Aspect Ratio
288x162 px & 672x378 px
Spacing 12 &12px
Final Grid System and Dimensions
FINAL UI DESIGN
Created high-quality visual content, including color palette, icons, typography, and logo. Led and managed visual designers to ensure consistency, and delivered visual assets along with a comprehensive style guide for implementation.
CLICK IMAGE
TO ENLARGE
WEB PORTAL WIREFRAMES
I created the wireframes for the SlingStudio web portal, ensuring consistency with the design of the Console and Capture apps. The portal not only aligned visually and functionally with the app experience but also introduced additional features such as content sharing, settings management, and a complete onboarding flow for new users. These wireframes served as the foundation for the visual design and helped communicate functionality and layout to stakeholders and developers during the early stages of the project.
CLICK IMAGE
TO ENLARGE
CLICK THE THUMBNAIL TO VIEW, OR
USE THE SIDE ARROWS TO NAVIGATE
RESPONSIVE GRID SYSTEM
Researched best practices and designed responsive layouts for multiple screen sizes (1366×1024, 1440×800, 1920×1080). Selected 1920×1080 as the primary resolution for prosumer users, and defined breakpoints with percentage-based specs for cross-device responsiveness.
Most Common Desktop Screen
Resolution Sizes Worldwide
-
1366×768 – 29.25%
-
1920×1080 – 17.34%
-
1440×900 – 7.32%
-
600×900 – 5.72%
-
1280×800 – 5.27%
-
1280×1024 – 4.51%
CLICK IMAGE
TO ENLARGE
FINAL WEB PORTAL DESIGN
Created consistent visuals aligned with SlingStudio Console, adjusting background for the portal. Collaborated with marketing to ensure brand alignment, delivering mockups, specs, and supporting materials.
CLICK IMAGE
TO ENLARGE
