Fullscreen:
Creator Platform

Details
2015
Photoshop

The Creator Platform is a web-based dashboard service that creators signed to the Fullscreen network have access to. Once signed in, creators can view their video monetization stats and analytics, collaborate with other creators, and use other tools to create better video content. 

Recently, we created a new feature that allows users to upload native video assets directly to the platform. From there the user can manage video files, publish the video to multiple video platforms instantly or on a scheduled date, and even share out the published videos on their different social media platforms.

My role was to assist the Lead Product Designer on this project, Sean Crebbs, with crafting useful features and tools throughout the Uploading process while keeping in mind a seemless user experience. Below is the process we went through.

 

Screen Shot 2015-07-10 at 1.08.28 PMScreen Shot 2015-07-10 at 1.08.28 PM

F8 Announcement Video

My first assignment for this project was to whip up a promotional video for our F8 announcement. It was to quickly walk the viewer through the process of getting their video from our Creator Platfomr to Facebook, and then being able to check out the stats for that same video. It had to be under a minute long.

Splash Page

Sean created a nice and inviting splash page for when the user firsts discovers the Uploader feature. Keeping it informative but not too overwhelming.

CP_splashpageCP_splashpage

Uploader Splash Page

Uploader Empty State

This was the first time experience for the viewer. Since they obviously haven't uploaded any videos before, they would need a simple CTA to begin their uploading journey.

CP_emptystateCP_emptystate

Uploader Empty State - When a user first lands on the Uploader page with no content.

Loading and Processing animations for thumbnails

Video Manager

Once the user begins uploading videos, they aggregate in a list view. Here they can see basic information like the date it was uploaded, the title, the thumbnail, whether it has been shared or published, and finally CTA's promoting the user to share or publish it.

CP_VideoManagerCP_VideoManager

List view of videos uploaded to Uploader

Value in Limits?

The product manager and I had an idea. We wanted to see if the creators were given a limit to the amount of uploads; would they upload and post less? Would they feel inclined to reserve their uploads to only quality content? 

So we tried an experiment and I came up with a few different limit options. These options would be randomly dispersed to different users. We will then gather the data and feedback to see if these theories are validated.

Screen Shot 2015-07-10 at 1.16.11 PMScreen Shot 2015-07-10 at 1.16.11 PM

Video Details Page

Once a video is uploaded to the platform, the user can dive into the specifics of that video and manage the publications and sharing of that video, along with being able to see the overall stats for views and engagements (not designed yet). 

We discovered that this page alone had a multitude of viewable states based on the users actions. A user has the opportunity to first publish the video to four different video platforms (YouTube, Facebook, Twitter, and Daily Motion). Once that video is published (outgoing or scheduled), those iterations would be able to viewed on a Publishing page where the user could edit, delete, and even share the specific publication. 

That brings the user to the Sharing tab. The sharing tab works the same way as the Publishing tab whereas the user can manage outgoing and scheduled posts to Facebook, Twitter, Instagram, or Vine. The stats for engagement could be seen as well on this tab. 

For both tabs we needed to have a CTA that promotes more sharing and/or publishing of that specific video to make sure that the user is taking advantage of as many exposure opportunities as possible. Overall we are urging the user to get the most out of their videos by publishing and sharing to multiple video and social platforms. This ultimately gets more views and engagement. Win win!

CP01.2CP01.2

Publishing tab of a specific video - shows details of where you've published your video, and failed publshing attemps.

CP02CP02

If a user clicks the EDIT button, a modal would appear allowing the user to change the publishing details that they inputed during the publishing flow

Screen Shot 2015-07-10 at 1.30.14 PMScreen Shot 2015-07-10 at 1.30.14 PM

Empty States

I did a lot of iterations and ideating on empty states and what kind of empty state would be the best for our users. Do I want to show many options? Give them the option to chose right then and there what they want to do? What do they look like? Cards? Banners? Ghost content?

I ultimately chose the style you see on the left. A quick CTA that would launch them into the publish flow without having to worry about confusing the user with too many options.

CP04.2CP04.2

The Sharing tabs would show the details of where this video has been shared out to, along with failed attempts to share and the option to fix the issue.

CP05CP05

This sharing modal would pop up when a user wants to edit the details of a schedule share (post)

CP06CP06

The empty state for the Sharing details of a specific video

Publish Flow

Sean worked tirelessly on making the Publish flow as simple for the user as possible. Which is tough when you give users so many options and so much power.  The first step is inputting the necessary details of the video they are publishing. They then have the ability to input different titles, descriptions, and schedules for each video platform. Since each video platform is used differently, it was important for the user to be able to create publishing experience catered to the standards of each individually.

UPDATE: After some feedback we decided to change up the Publish flow a bit. Once a user choses their video file to upload, they are immediately asked if they want to begin filling out publishing information while their video is still being processed. This helps get them started without having to wait for the upload/processing to finish. I used what Sean had already started and made the necessary changes and updated the elements to feel more consistent with the rest of the video details pages.

NewPub_02NewPub_02

Step 1. Choose the social platforms you want to publish out to.

NewPub_03NewPub_03

Step 2. Fill out the necessary informatin for each video platform (meta data, tags, etc.)

CP_Pub7CP_Pub7

Step 3. Confirm the information you've inputed and if correct, PUBLISH!

Share Modal

Once the user decides to share a particular video they first need to fill out some basic info regarding those social platforms. We wanted to create a seemless experience where the user could select all the platforms they want to share out to, fill out the basic info, and schedule a date and time in one sitting. After a few revisions, we finally nailed it.

Uploader_Video_Social-Share_proto-3Uploader_Video_Social-Share_proto-3

I whipped up a quick animation of the user flow in After Effects so I could better explain my ideation to the team. This animation was done with an older version of the design. The final designed version is shown below as images.

DISCLAIMER - This is a prototype of an earlier iteration of what is now the final share modal.

Share_step01Share_step01

Step 1. Select the published video you want to share, and select the social platforms you want to share to.

Share_step02Share_step02

Step 2. Fill out the necessary details for each social platform

Share_step03Share_step03
Share_step04Share_step04
Share_step05Share_step05
Share_step06Share_step06

Step 3. Confirm and SHARE!

Launch!

We finally launched in May (2015) and have already gotten great response from the community and internally. We also have some great feedback for what can be better. There is still a lot to be done and more features that we are rolling out.