SlingStudio Console
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
I designed a high-level flow in UX design including wireframes and user flows. Also, I was in charge SlingStudio's branding and led the visual design. Collaborated with other designers, product managers, and the engineering team. Obsessed over details to polish until the project was pixel-perfect.
UX DESIGN PROCESS & USER FLOW
Design Process
User Flow
HIGH-FIDELITY WIREFRAME
I designed a high-fidelity wireframe and conducted various tests to evaluate its dimensions and effectiveness as part of the design process.
UI DESIGN LAYOUT WITH GRID SYSTEM
We tested different dimensions to embed multiple videos with a 16:9 aspect ratio. However, due to limited space, we encountered difficulties in presenting multiple videos simultaneously. To address this issue, we explored various options and provided the engineering team with pixel-perfect specifications for testing. Ultimately, we designed a solution that was optimized to fit 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 Layout and Dimensions
FINAL UI 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.
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.
Quick Starter
Issues:
When there is no brief introduction to the main elements in the Producer App, users are confused about the preview and the on-air view.
Recommendation:
Explained with a built-in quick starter for Producer App.
Transition
Issues:
How to see the applied dissolve transition effect is not immediately clear, users expect to see some dissolve effect in the preview.
Recommendation:
- Make it possible for people to view the transition effect in a preview.
- Make it as a special output effect, besides the current “output.”
Output
Issues:
Clicking “output (ON AIR)” every time when a new change is made is not intuitive.
Recommendation:
U4 expects to put into preview and automatically reflect in the on-air screen.
Or could have some instant prompts to ask for confirmation for new changes to go on-air.
U6 expects the added text will be automatically reflected in the on-air view.
UI BUGS
We communicated between the engineering and design teams to address UI or interactive bugs through Jira tickets. However, we found that some issues were difficult to explain accurately, so we created the documents listed below. This initiative improved our communication and facilitated a faster UX process, resulting in an overall improvement of our product
