ABC

iView App

The iView experience needed a refresh, and I had the priviledge of leading the visual design on the project. Used by millions of Australians each day, the app and website need to offer an intuitive, engaging experience while allowing users to easily discover content. The project involved multiple user testing sessions to establish which models proved best suited to the user needs.

The iView experience needed a refresh, and I had the priviledge of leading the visual design on the project.

Used by millions of Australians each day, the app and website need to offer an intuitive, engaging experience while allowing users to easily discover content.

The project involved multiple user testing sessions to establish which models proved best suited to the user needs.

RESPONSIBILITIES

UI Design, UX, Interaction Design, User Testing

An established player

Humble beginnings

The iView app has over 3 million users across Australia. With a website refresh underway it was time to look at the existing iView experience and bring it in line with the wider ABC products.

The app was dated and users were experiencing difficulties finding content. In addition the player itself lacked the kind of functionality that modern video delivery products provide, such as the ability to continue playing an episode when returning to the app, or automatically playing the next episode in a series.

This meant that the app was struggling in a now very competetive market, with multiple alternative products providing a superior user experience.

Researching competitor products

When looking at redesigning a VOD service it is important to carry out a detailed analysis of current and emerging patterns and interactions across the space. I signed up for multiple competing VOD services, and began exploring how they solved similar problems to the ABC, and which of those solutions worked (or didn't).

I also took screenshots in order to better analyse elements like type and icon sizing, and spacing across platforms and devices. This allowed me to be fully aware of the product space before embarking on the design journey.

Prototyping and validating the solutions

I came up with three main solutions that I wanted to validate with users, so I created protoypes in InVision using screens from Sketch. These were stitched together and a series of tasks was settled on which would adequetly test the prototypes.

I carried out guerilla testing in the ABC lobby, which at the time acted as a throughfare for pedestrians travelling between The goods Line and Harris Street in Ultimo, Sydney. There was plenty of room, with sofas and low tables to help facilitate testing sessions. There was no shortage of people to validate my designs with, presumably because they feel somewhat invested in the ABC.

I used these guerilla testing sessions frequently, as they required little planning and I could get feedback almost continuously on the varous solutions.

As well as these informal testing sessions, I also set up in-office testing sessions, where I would have a much more controlled environment and be able to record video of the sessions. In total I tested 5 users in this environment, and the resulting insights were invaluable in ironing out any last issues, and also provided more convincing evidence for senior stakeholders.

Understanding the programme lifecycle

One of the major challenges in designing the iView platform was understanding the complex relationship between the ABC, content licensing and the way these impact the user experience.

Each programme and feature has a lifecycle - when it first gets promoted, when it becomes live, when each episode becomes available and when each episode is no longer available.

Additionally, some programmes move from being free to view to being purchasable on iTunes.

This creates user experience issues, for example when a programme ceases to be available before a user has finished watching the series.

Utilising the Design Language System

Utlising the Design Language

A major part of the ABC web refresh was the Design Language System (DLS). This was a work in progress, and I began looking at elements and patterns I could use across the iView app, and working on new patterns that could be fed back into the system.

An improved iView player

Establishing a baseline

An important component the new iView app was working on an improved media player, and this required a fresh look at the visual language. As part of this project I designed a contemporary icon set that would be used across mobile, web and TV.

After observing several user testing sessions it became clear that the users were struggling with many aspects of the existing experience. Copy lacked clarity, the interface was cluttered and inconsistent, and established UI patterns were not being followed. To document these issues I decided to carry out a UX audit of each component screen, highlighting issues and providing suggested improvements.

Users need control

Finessing the interface

I worked on several interaction models for the iView player, both for mobile and desktop. Key parts of the functionality were 'Up Next' and 'Suggested Videos', features that had been missing from the old player and that users had consistently requested in our early research sessions.

iView interaction exploration

Testing the prototypes

Establishing a baseline

Based on the research and required functionality I came up with several variations of iView series and episode screens. These designs covered scenarios such as landing on a programme page, landing on an episode page and returning to a programme page with an unfinished episode.

To help validate these concepts I carried out guerrilla testing sessions with members of the public in the ABC foyer. These sessions helped inform the design and I finally arrived at two interaction models I wanted to test more thoroughly.

Tasks that were tested included finding a particular programme, finding a particular episode, finding who the director is and watching an episode.

The simplest interaction model proved most successful. This solution presented a single page for a programme, with a latest episode thumbnail. This allowed the design to retain a consistent brand heading across various user scenarios and ensure the programme metadata was easily discoverable.

After observing several user testing sessions it became clear that the users were struggling with many aspects of the existing experience. Copy lacked clarity, the interface was cluttered and inconsistent, and established UI patterns were not being followed. To document these issues I decided to carry out a UX audit of each component screen, highlighting issues and providing suggested improvements.

View the prototypes

iView App Single Page

iView App Programme Link