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.
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.
Uploader Splash Page
Uploader Empty State - When a user first lands on the Uploader page with no content.
Loading and Processing animations for thumbnails
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.
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.
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!
Publishing tab of a specific video - shows details of where you've published your video, and failed publshing attemps.
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
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.
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.
This sharing modal would pop up when a user wants to edit the details of a schedule share (post)
The empty state for the Sharing details of a specific video
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.
Step 1. Choose the social platforms you want to publish out to.
Step 2. Fill out the necessary informatin for each video platform (meta data, tags, etc.)
Step 3. Confirm the information you've inputed and if correct, PUBLISH!
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.
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.
Step 1. Select the published video you want to share, and select the social platforms you want to share to.
Step 2. Fill out the necessary details for each social platform
Step 3. Confirm and SHARE!