Graphical User Interface Re-design: ViewStart

Our clients, with whom we worked on ViewStart and ViewSence projects, asked us to redesign the admin panel of current ViewStart page. As we already mentioned before, ViewStart the first platform that allows users to sell their products within a video stream. In ViewStart admin panel user can upload, edit info, add products and edit them on the timeline and set up the final video with the advertised online store.

Researching Old GUI

The main challenge was to make new design of ViewStart that is modern looking and compatible with other Magento integrated innovations.

In order to complete the task we’ve researched old interface and highlighted the flaws that should have been changed in order to improve it’s UI and UX.

Intuitive interface helps users reach simple goals such as displaying new video for repeated visitors every time they come again, to more complex rules that will trigger relevant video content based on previously logged interests, actions and order history.

Let’s take a look at ViewStart’s admin panel peace by piece so you can see what’s hot and what’s not.

When you get to the main page you have such options as “Create new Basic video” (uploading new video option), “ My WebTV”(to see the final result of the edited video) and “How to publish in ViewStart” (Uploading to ViewStart video tutorial). You can also examine the statistics on your videos.

Also, from here you can either start a new project, edit the current ones or check all the uploaded files.

When it comes to uploading and editing video, user have to through 4 steps

edit video information
add chapters and actions (products), edit them on the video timeline
categorize the video and choose sharing options
preview the final work and get embedded code.

Working out UI/UX design

Here you can see how the old GUI of ViewStart works in action:

To summarize our research, we came to conclusion that the main problem with current ViewStart admin panel has is that the UI elements are not connected to the projects well. Also visual part of the page also have to be updated.

So, bearing these facts in mind we’ve challenged ourselves to work out proper UI/UX for new ViewStart.

Introducing the New GUI

First of all, we’ve worked about basic functions that well be available from the main page:

viewing all the project previews
copying embedded code
viewing statistics on each video project

All functions regarding video editing are:

editing video chapters
editing products on the video timeline

To make it more detailed, we’ve made a list of all necessary UI elements, that should be present on ViewStart admin panel.

Based on these spreadsheets we started working out previews of the pages with black and white drafts, how to connect them all and make the uploading and editing process simple ass possible. Here are the examples:

editing chapters on video timeline

editing products on video timeline

finalizing video project

Final work

In result, we changed long user journey to get some gratification in form of working video to do things by small bits, step-by-step. Resulting mock-ups were tested on 5 volunteers, who provided clear scenarios on how they would add video, add products, chapters and get embed code to integrate it into e.g. a blog.

Have a challenge? Consider it accepted! We look for more work that we can turn into enjoyable interfaces! Drop us a line at [email protected] and we will respond to you within 24 hours.