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

iPad Landscape Copy 5.png

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

opt-01-02_2x.png

Video Aspect Ratio

288x162 px & 672x378 px 

Spacing 8 &16px

Phase 2

opt-02-02_2x.png

Video Aspect Ratio

272x153 px & 640x360 px

Spacing 8px

Phase 3

opt-03-02_2x.png

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.

01-Global-Buttons_2x.png
Studio-Main-Slices.png

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.

2020 JIN YEONG KIM    V.3