Close Design Thinking Wavefront CSL Vemba Tyra

Vemba logo

vemba uploader

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.

DATE

September 2017

TECH

Sketch, InVision

ROLES

Wireframing, Prototyping, UX/UI Design

Understanding

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.


Goals

Based on best practices and ideal usability, we felt there were a four major things the uploader needed to accomplish:

  1. The ability to upload as many videos as desired while not hi-jacking all the bandwidth
  2. Prevention of accidental closing of uploader window
  3. Proper feedback to show how many videos have been uploaded and how many remain
  4. Live updating and displaying of data entered in each section of the Branded Video Library

Design

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 inspiration

Uploader Interaction Flow

vemba uploader artboard

Outcome

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.

vemba uploader wireframe
vemba uploader wireframe
vemba uploader wireframe
vemba uploader wireframe

Solution

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 uploader final ui
vemba uploader final ui
vemba uploader final ui
vemba uploader final ui
vemba uploader final ui
vemba uploader final ui
vemba uploader final ui
vemba uploader final ui
Launch Prototype

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.

vemba style guide Launch Style Guide