rivusTV Media Player

Video playback widget written in Flash ActionScript 3.

Background

The rivusTV business model is built around facilitating and controlling video distribution. The company therefore required a widget that could be embedded in a webpage to play back video stored on the company network, while at the same time enforcing the company's DRM (digital rights management) logic - making sure that only consumers who had paid for access could view a pay-per-view video, and so on. Notable features include:

  • Full pay-per-view functionality - the embedded Media Player includes all UI required to allow an end user to pay for access to pay-per-view video. Access control rules (restricting access to the video to users who've paid) are also fully and flexibly implemented.
  • Video playback (live and on-demand) - the Media Player can play back both live and on-demand video resources. When first developed, the Open Source Media Framework was used to play back assets hosted on Akamai; later releases load Ooyala's Flash widget and use this in chromeless mode for playback. The Media Player also automatically updates to reflect changes made to the video on the server, such as access control, title, description, start and end time changes (for live content) and so on.
  • Access control - the Media Player supports a number of different access control models (free, pay-per-view, third-party access control override) and implements all of the associated DRM rules.
  • Javascript integration - the Media Player (a Flash widget written in ActionScript 3) exposes an extensive API to JavaScript running in the containing page to allow cross-scripting of the Media Player without breaking proprietary access-control restrictions.
  • Robustness - the Media Player, being at the leading edge of customer interactions with the company, includes numerous failsafes and error recovery mechanisms. It recovers automatically from intermittent network failures, video transmission errors and end-user tampering, and includes an anonymised error-logging feature that autonomously reports failure information to allow proactive bug identification and resolution.
  • Maintainability - as a very complex piece of software with a central role in the business model, the Media Player codebase needed to be as maintainable as possible; the class breakdown is appropriately modular and the code is very heavily commented.

Considerations

The Media Player performs a central function in the overall rivusTV business model, and therefore was the focus of considerable development effort. The user interactions were very carefully planned out, and a lot of care was taken to maintain the quality of the user experience in the face of common errors, such as network dropouts, video transmission errors and so on.

View online

You can view the Media Player online on the rivusTV homepage (click the video thumbnail at the bottom right of the page). Here, the Media Player is used to play back a free on-demand video.




rivusTV Quiz Player

A widget to play back video-based quizzes.

Background

rivusTV customers can create interactive quizzes from videos by adding questions that the viewer is prompted to answer when the appropriate point in the video is reached. The Quiz Player is an embeddable HTML iframe-based widget created to display these quizzes in a webpage. The widget displays the quiz video using the Flash-based rivusTV Media Player, and uses JQuery-based AJAX and cross-scripted integration with the Flash-based rivusTV Media Player to ask the quiz questions at the appropriate points during playback. Notable features include:

  • Fault-tolerance - the quiz player can recover from the overwhelming majority of common errors, including internet connectivity loss, client-side browser and PC crashes, closure of the browser window and so on. Wherever the browser permits it, unsent data is saved to the local disk and sent to the server as soon as the connection is re-established. Uncompleted attempts are automatically detected, and the user is able to resume the quiz attempt seamlessly from the point where the crash occurred, just by restarting their browser.
  • User-friendliness - all aspects of the user experience, including design, copy, and control flow were carefully considered to make the widget as intuitive as possible, given the potential wide variation in end user backgrounds.

Considerations

Ensuring the sancity of the testing process was a primary consideration. The quiz player is carefully engineered to recover from errors that arise during test administration if at all possible, so as not to disadvantage users experiencing internet dropouts, browser crashes and so on. Also, considerable care was taken to frustrate any attempts to cheat.

View online

You view and test the Quiz Player online at the rivusTV quiz demonstration page (when prompted for your participant number, enter "5").


rivusTV quiz editing interface

Interactive single-page AJAX application for editing quizzes.

Background

A pleasant, easy-to-use editor for the rivusTV video-based quiz was coded as a single-page JQuery-based AJAX application (a quiz is a video with associated questions that are asked at specified points during video playback). Features include:

  • Completely asynchronous communication with the server: all edits are submitted to the database in the background. The data structure on the server is kept up to date, and the user does not have to keep pressing a submit button to commit their changes and see the results.
  • Traffic optimisation: edits are not immediately sent, but are batched up, optimised and sent at sub-minute intervals to reduce server load. For example, multiple edits to a given record are collapsed into a single edit command before being sent to the server; if an edit operation is followed by a deletion operation, then the edit is discarded and only the delete operation is sent, and so on.

Considerations

The overall quiz object is composed of quite a large number of smaller objects (questions, answers, grading schemes and so on). Making all of these accessible, comprehensible, and intuitively editable required considerable UI design effort, as did insulating the user from the complexities of the background data exchanges with the server. The AJAX-based interface allowed a much higher degree of user-friendliness to be achieved than would have been possible with more conventional browser-based forms.


Ping

Submarine combat simulation game written in Flash ActionScript 3.

Background

Ping is a moderately-sophisticated 2D submarine combat simulation game. Features include:

  • Active and passive detection simulation – entities in the game can detect each other both by actively searching and passively listening for each other.
  • Detection uncertainty – when entities detect each other, the uncertainty in their relative positions and speeds is also simulated, and depends on the detection method and the vessels involved.
  • State-based AI for all autonomous vessels (friend and enemy), plus team-level AI to coordinate the actions of enemy vessels collectively.
  • Coded for extensibility; the addition of new vessel types and AI routines is particularly straightforward.

Considerations

This project was undertaken as a training exercise to increase my familiarity with OO programming, with the Flash Player 10 API, and with Flash game programming issues in particular, specifically timing, motion simulation and AI programming.

View online

You can view the game in a new window.
Playing tips: When playing for the first time, go to Settings and select Training mode; this makes all enemies visible. To see the control layout, click Help on the main menu. If you just want to dive in and have a go, use the arrow keys to control your movement, and press '1' to fire torpedoes; you can use the '+' key to increase your maximum speed. Everything green is good; everything red is bad.


Interactive Greeting Card Designer

An interactive greeting card designer completed as an Actionscript 3 training exercise.

Background

Card Designer is an interactive Flash applet that allows users to edit images and text in place in a standard greeting card template, using the images and fonts available on their own local computer. Features include:

  • Save JPEG-format snapshots of card pages to the local hard drive. Saved JPEG files are double the on-screen working resolution, rather than being simple screen captures.
  • Save the overall card design to the local hard drive as an XML file.
  • Load a previously-saved card design from an XML file*.
  • Comprehensive error checking, including warnings about locally-unavailable fonts.
  • Coded for extensibility; the addition of new card templates and UI controls in particular is straightforward.

Considerations

This project was deliberately chosen as one that was likely to include realistic programming challenges. For example, resolving conflicts between the main editable text field and the editable text field that forms part of the font size dropdown box in the Text Control object was quite difficult, but was typical of the sorts of issues that arise in real-world development projects. The project also exposed me to a number of popular areas of Flash development, including image manipulation, font handling, file I/O, XML, components, events and error handling.

* This applet demonstrates Actionscript coding, and so the usual server-side code is not present. For this reason, this demonstration version shows a generic placeholder image with the retrieval id from the XML file written onto it when restoring cards from saved XML data. Similarly, when creating cards images are not uploaded to the server as they would otherwise be.

View online

You can view the complete Flash resource in a new window.


Java Baboon

A Flash-based (ActionScript 1) game reminiscent of mid-80's LCD electronic games.

Background

Java Baboon was a personal project undertaken as an exercise in Flash development, character design and animation.

Considerations

In order to ensure the application would be easy to write and maintain, it was necessary to plan carefully how the application would be broken down into individual movie clips, and where the actionscript would be placed.

View online

You can view the complete game in a new window.




rivusTV Consumer Portal

User interface design work for the rivusTV consumer portal, the consumer account management section of the rivusTV website.

Background

rivusTV provides services that allow content owners to upload videos and sell access to them on a ticket basis. The consumer portal is the area where customers who've bought tickets for rivusTV-hosted videos can go to manage their purchases and account details. User interface design, workflow design, graphic design, copywriting, JavaScript, HTML and CSS work was all undertaken. Particular features include:

  • Full awareness of live video schedule information: the interface advises consumers how soon live videos they are purchasing will start, warns them if something in their shopping cart has already started, and doesn't allow customers to buy videos that have already finished. If the customer owns videos that are currently being broadcast, a prominent banner alerts them and provides a quick link to the video.
  • Copywriting: The copy was an integral part of the interface; considerable care was taken to fit the copy to the workflow (and vice versa, where necessary).

Considerations

The consumer portal was seen as an opportunity to proactively prevent bad consumer experiences that might occur at any point from purchase of a video through to viewing and afterwards. With this in mind, common (and uncommon) consumer problems were discussed with support staff and great care was taken to prevent these from occurring in the design of every process in the interface.

View online

You can interact with the Consumer Portal online at the rivusTV website (it's free to create an account).




rivusTV Media Player

The user interface for the rivusTV Media Player, an embeddable Flash/HTML video playback widget.

Background

The rivusTV Media Player widget is designed to be embedded in a webpage and play back a specified video. Some of these videos are pay-per-view, live, or otherwise not immediately viewable, so the Media Player includes considerable UI to mediate access to these.

In particular, the widget allows the potential consumer to pay for access to the embedded video, setting up a rivusTV account in the process if necessary, without leaving the embedding page. The whole purchase process is designed to be as quick and simple as possible.

Considerations

The widget needs to work on both desktop (where Flash's strong video content protection features are desirable) and mobile systems (where Flash is typically unavailable), so the interface is built in equivalent Flash and HTML versions.

View online

You can view the Media Player online on the rivusTV homepage (click the video thumbnail at the bottom right of the page). Here, the Media Player is used to play back a free on-demand video.


rivusTV Quiz Editor

The single-page AJAX application used to edit rivusTV interactive quizzes.

Background

rivusTV offers users the ability to create a quiz by uploading a video and assigning questions to various points on the timeline. A friendly, easy-to-use editor was required to make the rather complex process of creating a quiz as painless and accessible as possible. Features to note:

  • In-place editing - Everything on the page is editable: clicking on a static item converts it to a pre-populated formfield. When the edit is complete, the item reverts to plain text. Form fields are generally less legible than plain text; this click-to-edit approach allowed the interface to be laid out as a highly legible representation of the quiz (as opposed to a more conventional form-based interface), aiding at-a-glance comprehension of the state of the quiz being edited.
  • AJAX-based interaction - the use of AJAX-based incremental editing makes the editing process much more fluid and removes distractions; validation problems can be dealt with as they occur, and communication with the server is dealt with in the background.

Considerations

The underlying server communication is quite complex, involving multiple interdependant calls to different data objects through the API exposed by the server. Accommodating this without inconveniencing the user with any of the details was challenging but necessary.


Nitro PDF Express

The user interface for Nitro PDF Express, an entry-level PDF creation and manipulation application.

Background

Nitro PDF Express is a simple PDF creation and manipulation application with a wizard-based interface that allows users to perform five common PDF tasks. Together with the lead software engineer, I prototyped, mocked up and did artwork production for the product interface.

Considerations

The interface of the application needed to break the tasks the application performs down into a series of straightforward steps that were as short as possible without being confusing. Careful decisions needed to be made regarding what input to request at what point, and what additional information inexperienced users were likely to need at each task stage.





Aliqua Email Publisher interface

The user interface for Aliqua Email Publisher, a web-based enterprise-level mass email sending and customer relations management software package.

Background

I designed, prototyped and did html and javascript coding for the web-based interface of Aliqua Email Publisher, a web-based product intended for use by large organisations to send mass email messages to subscribers, and to manage those subscribers' subscriptions. Notable features included consent management, email campaign response analysis and subscriber signup management.

Considerations

A lot of information was potentially available to users of the application, but only some of that information was likely to be particularly relevant or important to most users. Thus, there were two principal challenges in designing the application interface. The first was to find room for all the available information without cluttering the interface; this was often achieved with icons and tooltips. The second lay in establishing just what information in any given screen was really relevant, and making sure that that relevant information was communicated at a glance; this goal was achieved by keeping the interface almost monochromatic and using vibrant color to highlight the few readouts in each screen that required attention.


rivusTV

A corporate identity update for rivusTV, an internet video distribution company.

Background

rivusTV provides services that allow customers to distribute and promote video content over the internet while closely controlling distribution in various ways, including pay-per-view.

Considerations

The company was basically happy with the current identity at the time, but wanted to update it to make it look more prestigious and polished.


Nitro PDF Software

A corporate identity for a PDF software development company.

Background

Nitro PDF Software produces a number of PDF-related applications that are generally intended to compete with Adobe Acrobat. These are sold both online and in retail outlets.

Considerations

The corporate identity needed to sit comfortably amongst well-known first tier software brands such as Adobe and Microsoft so as to maintain product credibility when the company's merchandise appears side-by-side with competitors' products in a retail setting and online.


BizNewsletters

A corporate identity for a company offering subscription-based email marketing services.

Background

BizNewsletters was to operate a subscription-based service offering online access to proprietary email marketing software. The target market was small and medium-sized businesses that could not afford to maintain dedicated email marketing staff and software.

Considerations

As a service pitched at small and medium-sized businesses, the BizNewsletters organisation needed to come across as professional but approachable, as small business customers tend to be wary of the disinterest often shown them by larger organisations. The identity therefore needed to be friendly but polished.


Aikinomichi

A corporate identity for a small aikido school.

Background

A small Melbourne-based aikido school needed an appropriate logo.


Nitro PDF Professional box illustration

An illustration for the front of the retail packaging of a PDF software product. The basic elements were created in Corel DRAW and then imported via Illustrator to Photoshop CS3 where coloring, compositing and special effects were applied.

Background

Nitro PDF Professional is a PDF creation and editing product pitched as a competitor to Adobe Acrobat Standard at a considerably lower price. An illustration was needed for the Australian and US retail packaging.

Considerations

The illustration needed to relate to the product branding while giving some indication of functionality. It needed to look clean, energetic, expensive and eye-catching.


Aliqua Email Publisher icons

Software product interface icons.

Background

The software product is an enterprise-class email marketing and customer relations management package.

Considerations

The icon images needed to establish consistent ways of representing abstract concepts (lists of subscribers, email campaigns) and communicate relationships between them. The illustration needed to be pleasant and friendly but relatively sober.


Nitro PDF Express interface illustrations

Illustrations for the interface of an entry-level PDF creation and manipulation application.

Background

Nitro PDF Express uses a simple wizard-based interface. Illustrations were needed to communicate at a glance what the product generally was for and what its specific functions could do.

Considerations

As users of the application were expected to be relatively inexperienced, the illustrations needed to communicate as plainly as possible what each function does. Also, given that the illustrations appear on the first screen of the trial version of the product, it was also important that the illustrations make the application as inviting and straightforward as possible.


Java Baboon interface illustrations

Character and screen illustrations for a Flash-based game.

Background

Java Baboon is a personal project created in Flash. It was created as an homage to the handheld LCD games of the mid-80s.

Considerations

The character images needed to suggest motion regardless of whether the character was moving forwards or backwards. Another constraint was that none of the character images could overlap each other.


Personal vector illustrations

Vector illustration work created for friends or for pleasure.

Background

These are vector illustrations executed from photographs I've taken over the last few years.

Considerations

I prefer to minimise the number of different colors I use and to avoid complicated blending effects, as this tends to counter the natural temptation to simply reproduce the original image as closely as possible.





Nitro PDF Software corporate website

A corporate website for Nitro PDF Software, a company that develops PDF software.

Background

While working as in-house designer at Nitro PDF Software, I designed the corporate website, including general product and corporate information pages, ad campaign landing pages, an online store and a secure online support area. I also translated the design into HTML and oversaw the HTML production and server-side development work involved in sending the website live.

Considerations

The site design needed to embody the image that company wanted to project - professional, well organised and resourced, fresh, clean and friendly, but sober enough to retain credibility with business and enterprise customers. A lot of thought was given to balancing the prominence of the various links on the pages in order to encourage specific outcomes of site visits - specifically, trial software downloads and product purchases.

View online

The Nitro PDF website has since been updated, but you can view the previous design online (and largely intact) at the Internet Archive Wayback Machine.




Davey Pumps corporate website

A corporate website for Davey Pumps, a large Australian company that designs and sells pumps domestically and internationally.

Background

Davey Pumps required a website to list their products on the web, provide customers with a directory of licensed dealers, and provide those dealers with a secure way to access sales materials. The quality of the website also needed to high enough to reflect appropriately on the scale and professionalism of the company itself.

Considerations

A content management system needed to be built into the website, principally to manage the product catalogue and dealer point-of-sale material library. This involved considerable usability testing and requirements analysis to ensure that the resulting design would be flexible enough to meet all of Davey Pumps' future requirements. This research also fed into the design of the public product listing pages on the website particularly, as these needed to attractively present any product data that could potentially be entered into the system.

View online

The Davey Pumps website has since been updated, but you can view the previous design online at the Internet Archive Wayback Machine.





Pieno/PCorp corporate website

Corporate websites for parallel fashion labels Pieno and PCorp, operated by the Pieno Corp fashion retail chain.

Background

Pieno and PCorp were brands operated by Pieno Corp, a fashion retailer (now defunct). The Pieno brand was more dressy, while the PCorp brand had a streetwear emphasis. A website was needed that would market the new seasonal ranges for each brand, plus serve as a point of contact for the company.

Considerations

It was important to make sure the two brands' individual characters came through in their respective sections of the website, but not to the extent that site visitors got the impression that the two brands belonged to two separate companies.


Nitro PDF Professional package design

The Australian and US retail package design for Nitro PDF Professional.

Background

Nitro PDF Professional is a PDF creation and editing application intended to compete with Adobe Acrobat Standard, retailing at around AUD$200. As such the product is considerably cheaper than Acrobat, but is expensive enough to not be considered a budget product.

Considerations

The package needed to communicate the purpose of the product, to be conspicuous on the retail shelf, and to be of a design and production standard appropriate to the price point. Specifically, any concerns that consumers might have regarding the product's quality as a result of it's relatively low price needed to be countered.


Nitro PDF Express package design

The Australian and US retail package design for Nitro PDF Express.

Background

Nitro PDF Express is a simple PDF creation and manipulation application that allows users to perform five common PDF tasks, released a short time after Nitro PDF Professional, and retailing at about AUD$100.

Considerations

The product packaging needed to complement the packaging of Nitro PDF Professional. It was important to make the product look attractive and appealing while still ensuring that if the Nitro PDF Professional and Nitro PDF Express packages were seen side by side, Nitro PDF Professional would still appear the more attractive product.

Note that the assembled box is the US package design; the unassembled box is the Australian design featuring additional distributor branding.


PCorp print material

Print material for a subsidiary fashion retail label.

Background

The PCorp brand was the more streetwear-oriented of the paired Pieno/PCorp brands. A full range of corporate stationery and supporting printed material was produced, including shopping bags, loyalty program material, in-store documentation and so on.

Considerations

In order to keep production costs down a wide variety of printers were used; therefore prepress files needed to be produced to a variety of standards for a variety of reproduction methods including spot and process color, cut vinyl lettering and others.


BizNewsletters corporate stationery

Corporate stationery for a company offering subscription-based email marketing services to small and medium-sized businesses.

Background

Following design of the corporate identity for BizNewsletters, corporate stationery featuring the brand was then produced. As with the identity, the characteristics of the company that the stationery needed to embody were energy, professionalism and approachability.