top of page
SlingStudio App and Web Portal
PRODUCT OVERVIEW
SlingStudio is an all-in-one, portable, wireless solution for high-quality, multi-camera video production for “prosumer,” and It allows monitoring, recording, switching, live broadcasting to YouTube and Facebook. This product is a new feature of Sling Media’s product in 2017. We invested more than one year from start to release on the market. UX team provided three interfaces, including iPad, desktop, and mobile applications.
Website
App Store
ROLE AND RESPONSIBILITY
Designed a high-level flow in UX design including wireframes and user flows. Also, I was in charge of SlingStudio's branding images and led visual design. Collaborated with other designers, product managers, and the engineering team. Obsessed over details and polished until the project was pixel-perfect.
HOW IT WORKS
Design Process
User Flow
WIREFRAMES
I collaborated with the UX team to create high-fidelity wireframes and then moved on to testing different dimensions as part of the design process. By testing the design with various dimensions, we refined the UI to ensure optimal functionality and visual appeal.
RESPONSIVE GRID SYSTEM
I conducted research to identify the best practice responsive grid system for our product. Based on my findings, I created designs in different sizes, including 1366x11024px, 1440x800px, and 1920x1080px. After careful consideration, we decided to go with 1920x1080px since our target audience consisted of prosumers who preferred the highest resolutions possible for editing. We also tested the designs on mobile platforms, and I provided percentage specifications and three breakpoints for optimal 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%
Testing with Mobile - 640x1136px
USER TESTING
Worked with a user researcher and applied the test result to UX and UI to improve the project. Here is a part of the issue we found from user testing.
APPLICATION FINAL DESIGN
Created quality visual content including color, icons, typography, and logo. Led and managed visual designers to ensure alignment and delivered visual assets and a style guide for implementation.
FINAL WEB PORTAL
Created consistent visual elements and kept the same visual language and tone as Sling Studio Console except for the background color because those screens are under the SlingStudion portal website. I had to engage with the marketing team’s design concept. Provided most of the visual mockups, including specs and other marketing materials.
bottom of page