Jaunt Cloud Services: Video Production Pipeline

Empower VR Media Creation and Distribution

Brief


Timeline
Sep. 2016 - Dec. 2017
Team
PM, engineers and internal video editors
Role
Lead UX/UI Designer
Targeted Users
Indie movie producers and creators
Design Scope
Full design lifecycle (UXR, UX/UI) Experience map Living style guide
Outcome
Improved usability of video pipeline with released publishing and analytics modules and a validated JCS experience roadmap

VR video pipeline


With Jaunt Cloud Services (JCS), users can apply cloud rendering to stitch 24 footage together, and transcode them into different formats. The cloud services help prepare video media for distribution on all VR platforms instead of managing files one by one. Along with the rendering, JCS also provides the service modules of Publishing and Analytics to help creators distribute videos and track the audience engagement.

Targeted Users

JCS serves people who are working in VR movie production, including Editors, Producers and Jaunt internal people to trouble shoot. Utilizing VR as a new medium and territory to do storytelling and deliver cinematic VR experiences, JCS users try to focus on the creative side and make most of rendering platform and services.

Experience map of today’s production

I started the project by interviewing in-house production team. Together we mapped out the full journey of creating videos, so that we could have a holistic view to prioritize breakdown points.

Key problems of production pipeline

1. Media centric UI rather than project based. Users have a hard time managing media across projects and the naming of media is hard to track and often lead to errors.

2. Video editing within the browser: how to make the process smooth and efficient to produce video clips?

3. How to onboard new users who don’t have video editing or production experiences?

Design challenge


How to improve the video production pipeline to make it easy to onboard and manage media in a seamless and transparent way?

Design Process

I’m working with the team of four engineers and two product managers. We moved fast on shipping incremental features. Meanwhile PM and I were working on the next version of the JCS platform to help prioritize features and target at long term vision.

When there was a request or complaint from end users, we started by talking to our internal production team who are subject masters to understand the problem scope. If we had enough context about the problem, the team would sketch out various solutions and review them together.

I’d lead the next step to visualize top two solutions with wireframes and flow charts. Then our team would share these two prototypes with external users for feedback. Once we confirmed on the use case and solution, technical lead would start building the structure while I worked on the UI delivery to ensure usability and quality of the solution design.

Solution framework


Redesign service structure

Wireframe of project oriented content management flow

Improve video editing experience

I lead the design of improving timeline editor where the users could quickly trim the video start and end points to reduce rendering cost. Below is the interaction diagram of time scrub and player handle where I proposed a simplified editing and saving process.

When the feature was released to our users, they shared that editing and saving clips had been much faster and they liked the ability to easily modify the scrub and player handle.

User onboarding flow

Jaunt Cloud Services is targeted at indie video producers who may not be familiar with the workflow at all. I proposed to design the user onboarding flow to help introduce the workflow to the user in an intuitive way. It helps users follow through the production flow and could reduce support tickets we received.

Publishing and analytics


Jaunt VR Player


Living style guide


While I were producing more pages, the team felt we needed a redesign of the whole product UI. I decided to catalog current design tokens and components used, as well as page layout to get started. In addition, there were a growing requests for dark themed UI because most video production software are in dark mode already. Dark theme is easier on the eyes while presenting rich media data. I lead the style guide design outside project work, and documented the final style guide online. It helped our frontend engineers completed the dark themed UI within two weeks.

View Style Guide Online

Visualize the blackbox


Having a super talented technical artist in the team, I invited him to collaborate on a hackathon project to visualize how the video were brought into final production ready. The robot metaphor helps onboard not only internal team but also external new users to understand the whole video pipeline.

Takeaway


Design solution needs to balance between future long-term goal and current iterations, how to handle user feedback and understand the insights instead of only following features asked for? To come up with effective solutions, designers need to learn about and prepare for the big picture and understand the why better. For example, a large part of the system today is built upon user requests, but what actually happened is that the features we built were not used by the end user asked for it.

When users ask for certain features, should we simply follow the comments? Or we could rethink through the deeper reason and flow, why they are asking for the feature today. The challenge reminds me of Ford’s faster horse theory. Designers need to consolidate the insights from different sources, work collaboratively with the team to define the vision we’re heading towards.