Visbit Streaming: The Publisher Portal

A VR Player Provider Wrapped in an All-In-One Solution.

My Role

I, along with another designer created this Publisher Portal. My job was to lead the product design of Visbit’s ecosystem, which included the Publisher Portal. I took broad concepts and developed them into interfaces and specs for development. Besides playing the role of the designer, I also played the role of a project manager to make sure we were building the right features with an achievable roadmap.

My Team

I worked very closely with the co-founders, engineers, and a visual designer. The co-founders would come to me with ideas and I would process what their goals were and make experiences. I communicated with different engineers periodically to ensure that the product was made correctly in an achievable timeframe. As the lead, I tasked the other designer to assist with visual elements.

A Little Background

Visbit is an early stage startup that aims to build powerful backend technologies that can be applied towards different mediums like a photo app or Virtual Reality (VR). Visbit saw problems in the distribution funnel of mobile platforms that had 360º videos. These platforms could not stream their 360º videos because the bitrate was too high to stream over traditional streaming, which forced their end user to download a large video file. Viewing 360º videos at anything lower than 4K quality is like seeing the world with fuzzy details, so 4K is the baseline standard to watch 360º videos. This is a problem when you’re trying to get as much viewership onto your platform. After validating these two problems, Visbit Streaming aimed to be a B2B VR streaming service for 360º VR video publishers and content creators.

Project managed video production and assited with visual design and animation. Video also won a Marcom Award.

Goals of Product

Take the MVP uploader website and design a platform (Publisher Portal) for a client to upload, manage, and track the performance of their 360º videos. The rapid growth from the video uploading prototype to the Publisher Portal required the design to be more of a scalable design system for the product to be launch ready.

Service Flow

The Target Users

Our target market were companies or studios that did not want to post their content on social platforms like Facebook or Youtube, but rather drive viewership into their own apps or websites. This would allow them to have more control over distribution while also monitoring their performance. These hypothetical personas below were created based on online research and from talking to meetups/conferences. Personas were not only helpful in designing the Publisher Portal, but also the flow to navigate through our website and demo apps. There are three personas that were created based upon certain jobs: project manager, developer, and filmographer.

Personas

Project Manager
image
Developer
image

The Starting Point (MVP)

To test a complete product pipeline, we needed a quick and easy website that could upload videos to be submitted to our cloud system for transcoding. This transcoded video is then later streamed down to the VR Player SDK. Once we validated that the core feature was a functional pipeline we expanded the set of features that became the Publisher Portal. The initial design was focused more on the uploading experience and tracking the usage of our service versus monitoring the performance of their videos. At the time of testing, we did offer basic analytics where a user was able to monitor the views and streaming usage. If a user did find what was under the dropdown menu, they were going to “BI analytics” to see the app performance as well as the heatmap in individual videos.

Wireframes

Dashboard
image
Video Summary
image
Upload
image
Transcoding Period
image

Wireframes layed out the content and functionality for the purpose for uploading videos onto our SDK.

MVP UI

Dashboard
image
Video Summary
image
Upload
image
Upload Confirmation
image

We didn't focus on the visual style for the MVP but more of the core functionality.

Interaction Map

The interaction map of the MVP, which focused on the uploading experience.

Evolution From MVP to the Publisher Portal

Before launching the official product, we needed to solidify the Publisher Portal to a more cohesive and understandable structure. While I was proud of how quickly the MVP uploader website was built, the Publisher Portal's features outgrew the structure that satisfied the purpose of testing with beta and MVP designs. We decided it was integral to the experience that the Publisher Portal was functional as it was the main hub to our services. The Publisher Portal was the dashboard where a user could publish, manage, and now get analytics to their 360 videos. In it’s current state, it wasn’t scalable and harder to go through as there was no navigation and the design couldn’t accommodate upcoming features in the pipeline. Ultimately, it felt clunky and an upgrade was necessary before we pushed heavily for sign ups.

Workshop

We conducted a design workshop between myself and another designer as a brainstorm for UI concepts that had the most potential to provide the best experience. After getting all the ideas out, I talked with engineers to understand what was possible with the libraries and framework they already built the system on. After back and forth discussion we settled on a concept between all parties that suited our short term goals, other parts of the concept were pushed to stretched goals for another sprint in the future.

Sketches

image

Site Map

image

Video Analytics Journey

image

The Game Plan

The most important change was the addition of the left sidebar navigation and grouping information into tabs for a more logical flow. The navigation bar on the left versus on top allowed more space for features to live. There was a conscious decision that everything relating to the product or the user’s 360º videos would be live on the left navigation, while information pertaining to their Visbit account stayed in the dropdown at the top. Showing the specified tabs helped discoverability and optimized their task flow.

    Tabs:

  • Dashboard: The home section where a user could find unpublished videos, App IDs, and recently published videos.

  • Video Manager: Table of all their videos, video analytics, video summary, and managing the publish settings.

  • App Analytics: Analytics pertaining to their app IDs

  • Developer Resources: Documentation and downloading SDKs for a developer

  • Publisher Portal Guide: A PDF that details each section of how the Publisher Portal operates

More features were also added, like the preview feature to help sell the product. We leveraged our Visbit Demo App so a user could preview how their video would look like via token before publishing onto their own platform.

Publisher Portal 1.0 UI

Dashboard
image
Video Manager
image
Video Analytics
image
App Analytics
image
Monoscopic Upload
image
Stereoscopic Upload
image
Admin Settings
image
Billing Information
image
Developer Resources
image
Video Summary
image
Create Mobile App ID
image
Preview Instructions
image

Publisher Portal 1.0 UI was revised to reflect what is currently public.

Preview Demo App Flow

image

Demo App 1.0 UI

Video Feed
image
Video Details
image
Preview Token
image
3D Menu
image
3D Quality Menu
image
2D Menu
image
2D Gyro Confirmation
image

The demo app was used for a client to preview content and our sales team to showcase our technology.

Components and Style Guide

I came across this article while working on the UI and after discussion with engineers, decided to create UI components. On the design side we created a component library, where the styles could be applied to different areas of the Publisher Portal as the system grew. Ultimately we created a Visbit style guide to not only aid our process on the design side, but also also keep consistency between design and engineering. At the end, the style guide helped unify the UI design across the demo apps, website, and Publisher Portal.

Some Styles and UI Components

image image image

Takeaways

Through the process of creating the Publisher Portal from a simple uploading mvp to this more complex system, we learned a lot about how users use the product and how our product fits into the market. While I can’t disclose specific details, we did see more clicks on certain pages because the discoverability was better. Surveys were ran, with good ratings about the portal itself. Users were able to navigate through the portal without a problem. Looking back, I would have defined the metrics early on as to get exact numbers for specific flows. I did not realize that this information couldn’t be looked up afterward as there were limitations to Google Analytics. Overall, I learned a lot about how B2B designs and user experience (sales experience) works by designing this product.

Publisher Portal Android App GearVR App

Other Projects

Pixbrite - Mobile

Music Pix - Mobile

Read More

50 Logos - Design Exercise