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(Console), desktop, and mobile(Capture) 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 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-LEVEL WIREFRAMES
Designed high-level wireframes and after that, tested different dimensions as shown in the design process.
DESIGN PROCESS WITH GRID SYSTEM
Tested different dimensions to implant multiple videos with 16:9 aspect ratio. There was an insufficient space to present several videos. We explored and provided pixel-perfect specs for testing to the engineering team. Designed to fit the
iPad 9.7’.
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 VISUAL 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 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.
Issues:
The “output” button is expected to be placed at somewhere easier for people to tap, right now it’s too cornered, not that easy.
Recommendation:
Move to the right bottom corner of the preview view.
UI BUGS
We communicated between the engineering teams and designers when we had UI or interactive bugs through Jira Tickets. We noticed some of the issues were hard to precisely explain so we created documents below. It improved our communication, made faster UX process, and our product better.
