Webcast UI design

Webcast UI design 2017-03-28T22:32:47+00:00

Project Description


All Accordent software products required web interfaces, also called skins, that were uploaded to web servers. These interfaces synchronised streaming video with images, documents, urls, surveys, etc., giving rise to interactive presentations available live, on demand, and for distribution on cd.

Capture Station - Opzioni dell

The software was used by managers, lecturers, doctors, and communications directors to select and configure the dynamic web interfaces, prior to their publication on web servers and depending on presentation needs, for end users such as employees, students, managers, doctors, nurses, journalists, scientists, stock brokers, etc. for purposes including marketing, internal training, e-learning, e-commerce, collaborative research and development, or business communications.


There were more than thirty configurable web interfaces between the three video capturing, publication and post-production products, and each interface offered additional features beyond the synchronisation of video and content (e.g. the possibility to choose different layouts, video formats, dimensions, subtitles, chapters, video/content enlargement, miniatures, question forms, surveys, quizzes, etc.).

Interfacce per webcasts

This limited the customers’ ability to choose (not all features were available for all interfaces) and required considerable efforts in development, management, testing, updates and support for each new version of the products.

The HTML and JavaScript coding of the interfaces had problems with performance and expandability. The layout was created with HTML tables that did not adapt to different resolutions, making maintenance difficult. The use of few CSS inline styles and massive amounts of images made for lengthy uploading of the interfaces to web servers and slow loading in the browsers of end users.

A new design for the web interfaces was needed that would make for easier selection, configuration and use, faster loading in browsers, and less complicated management processes and interface support.


After showing my proposal to the User Interface Development team, the CTO, and the rest of the development team, over the course of six months I guided and participated in the various phases of analysis of the existing interface, research of competitor solutions, research with customers/configurators and end users, definition of personas and user stories, wire framing, prototyping, iterative testing and development of a new set of two web interfaces per software product (five in the case of PresenterPLUS), for a total of nine interfaces.

Webcast UI - Browser Compatibility Chart
Browser Compatibility Chart (part.)
Webcast UI - Wireframe
Webcast UI - Prototype
Webcast UI - Layouts
Webcast UI - Media Players
Video Players:
Windows Media, Real, Flash, Silverlight
Webcast UI - Interactive Features
Interactive: Fact, Trivia, Survey, Q&A
Webcast UI - Branding Guidelines
Branding Guidelines
Webcast UI - Launch Page
User Interface Regions
  1. Launch Page
Webcast UI - Interface Regions
User Interface Regions
  1. Presentation Window
  2. Header Region
  3. Media Region
  4. Sync Region
  5. Tabbed Region
  6. Footer Region
Webcast UI - Launch Page Features
Launch Page Pre-Publishing
and Registration features

With the new design, almost all features were combined and made available in all interfaces. The client was given the possibility to activate/deactivate the necessary features and configure the options from the publication and streaming software.

During the design phase we implemented a separation between levels of presentation, behaviour and content. CSS style sheets were introduced together with an improvement of the semantic HTML and optimisation of JavaScript coding.

For the release of the new version of the web interfaces, a user manual was created with configuration instructions as well as various other specification documents for internal and external use (release notes, browser compatibility tables, dynamic tag tables, SharePoint pages with UI Knowledge Base, etc.).


Accordent SL3 User Interface
Accordent PM3 User Interface
Accordent PM3 iPhone User Interface

We obtained major improvements in interface performance (upload by software, download by browser and user interaction), interface quality and maintainability.

There was a 60% reduction in support calls related to the interface and a 30% reduction in call response time.

The new design improved accessibility of the interfaces which proved to be easier and nicer to use.
The documentation provided throughout the design process instituted a new reference language that simplified product related communications both internally and externally.