Allowing users to upload their videos directly into the Vemba system was a feature gap that needed to be addressed. Through several iterations of Interaction Flows, Wireframing and Protoyping we ended up with a consistent flow. The new design filled the gap and allowed for smooth transitioning between uploading and management of the clients video library. Additional features included branding, thumbnails and video player selection.
Wireframing, Prototyping, UX/UI Design
Uploading video content should be a seamless, stress-free experience requiring little to no thought. There is nothing more frustrating than closing a window while content is uploading only to lose it all and start again. It is a waste of time and resources not to mention a major pain point. Lastly, an uploader should have various options such as drag-and-drop as well as the classic file select process.
In addition to the uploading functionality, integration into the building of the Branded Video Library flow was necessary. The Branded Video Library allowed the creation of a channel using the videos being uploaded. It also allowed for a branded logo and hero image. The Branded Video Library was broken out into four sections: Library Details, Upload Videos, Player Selection and a Preview screen. As you proceeded from one stage of the wizard to the next, the data entered on the previous screen would be displayed in the sidebar. This was to avoid clicking backward and forward to see what was entered.
Based on best practices and ideal usability, we felt there were a four major things the uploader needed to accomplish:
- The ability to upload as many videos as desired while not hi-jacking all the bandwidth
- Prevention of accidental closing of uploader window
- Proper feedback to show how many videos have been uploaded and how many remain
- Live updating and displaying of data entered in each section of the Branded Video Library
Most uploaders are small windows that force the user to work within them. We wanted the experience to be fully immersive and to utilize the entire screen. The uploader needed to be standalone as well as a part of the video library creation process. This way, no matter what flow the user was in, the process felt familiar.
Uploader Interaction Flow
Low-Fi Uploader Wireframing
With the interaction flow completed, we began wireframing low-fi screens to test our process and make sure all concerns were met.
Hi-Fi Uploader Prototype
After the interaction designing, feedback loop testing and the low-fi wireframe build, we began the UI design. Utilizing the flat design style laid out in the live style guide, the screens started coming to life.
Vemba Style Guide
To make sure the app was a consistent experience and that we had all elements properly designed and coded, I created a living style guide. A place developers and designers could go to and find any element they may need going forward. This served extremely useful as peoples time and concentration no longer had to be broken to ask simple questions as well as ensuring a consistent user interface that felt familiar to the end-user.Launch Style Guide