BFI Player

Role     UX Designer

Client     BFI

Agency     Ostmodern

bfi - header imagebfi - header image

.
THE NEW BFI PLAYER

BFI Player was redesigned from the ground up by Ostmodern. My role within the new design was to create the architecture and logic for the user account and payment processes when purchasing a film.

bfi - library full renderbfi - library full render
bfi - purchase journey steps mobile renderbfi - purchase journey steps mobile render

.
BROWSE & WATCH

The library is the hub for all rented content. Users can find all their rentals (available & past) to watch or purchase again all in one place. It is from here the user can access all account, device management and payment details.

As the library is a core feature of the BFI player it was important that users were able to access their library across all devices.

Responsive-grid-animationResponsive-grid-animation

// Wireframe illustrating the responsive grid. //

Browse content in the library

A core design element to the BFI Player was a content driven UI that pushed content to the forefront of the users browsing and navigation throughout the product. It was important that this element followed through into their library.

bfi - library wireframebfi - library wireframe

// Wireframe design of user’s library showing current content available and previously rented content. //

Focused account management

Managing the account was designed for quick and short interactions, as a users time should be focused on browsing and renting & watching content.

To ensure this, the account management was kept utilitarian and clean. Users can quickly identify the information they want to supply or edit then make any changes quickly.

bfi - library sections renderbfi - library sections render

// Final designs of each section within a user’s account. //

.
LOGIC PROCESS FLOWS

All logic flows & key interaction journeys for account management and payment process were designed to ensure the best service possible was provided.

Key edge cases were addressed, ensuring the user never has barriers to key content, interactions and rentals.

Device management flow

Users are able to use multiple devices with their BFI Player account, however they may only have a maximum number of devices registered. This required a logic structure to define the rules and appropriate journeys that would occur if a user reaches their device limit.

bfi - device management flowbfi - device management flow

// Process flow of how users will manage devices on their account. //

Purchase content flow

Purchasing content is a core journey for BFI's business model. Removing all barriers to a payment journey was the main objective. If a returning user with an active account decides to rent a film for example, it should be completed and ready to watch within 2 steps: review, then purchase.

bfi - purchase flowbfi - purchase flow

// Process flow of how users rent content. The flow takes into account edge cases such as payment failure and how to help the user quickly fix the issue and complete their purchase. //

.
THE
OUTCOME

A content driven library with focus on consuming rented content was created, whilst providing quick access to all account management needs.

The account section is now accessed by thousands of BFI Player customers with thousands of purchases being carried out on a daily basis.

[unex_ce_button id="content_0egrhiah3,column_content_9sfex8g5q" button_text_color="#4a4a4a" button_font="semibold" button_font_size="44px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="75px 68px 75px 68px" button_border_width="0px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#161616" button_border_hover_color="#161616" button_link="http://matthewmcgriskin.co.uk/work/sky-vision/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]previous[/ce_button]
[unex_ce_button id="content_0egrhiah3,column_content_pvov5v75h" button_text_color="#4a4a4a" button_font="semibold" button_font_size="44px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="75px 68px 75px 68px" button_border_width="0px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#161616" button_border_hover_color="#161616" button_link="http://matthewmcgriskin.co.uk/work/coffee-cntrl/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]next[/ce_button]