BBFC
British National films & broadcasting classification tool
Improve efficiency in films rating to help compliance team work more effectively
Summary
From 0 to 1, designed a new desktop web application for the compliance team at BBFC to improve efficiency and effectiveness for films rating.
Background
BBFC (British Board of Film Classification) is an organisation responsible for the national classification and censorship of films in the UK since 1912.
Role
Product Designer
Responsible for web app
Established the design system
Team
Myself
4 Dev
1 PM
1 UX designer
Contribution
Created product that empower the users
Enhanced user confidence and enthusiasm for new features, receiving praise for intuitive designs that users are eager to explore without guidance.
Building trust with stakeholders and users
Being the sole designer on the project, I needed to be responsive and address feedback, and engaging closely with users.
Challenges
Without research support
I could only learn about the users problem by participating in shadowing sessions and gathered feedback directly from stakeholders to test designs with prototype.
Designing without clear measure of success
The design brief relied only on business assumptions. This approach required managing diverse opinions and occasionally formulating design solutions without a clear or defined success metrics.
Design Request & Business assumption
BBFC needs a digital transformation to handle the higher workload, because the authority requested BBFC to rate more content, for the increasing amount of video-on-demand platforms in the market.
Design objective is to improve the work efficiency for the flows:
1 - Watching and rating a film
2 - Finishing the rating report
Research
Shadowing session to understand how users interact with our product
01 / 03
Working with PM to understand potential user flows of submitting a report, encompassing up to seven different scenarios based on requests from compliance managers or film distributors.
02 / 03
Presenting extended scenarios and solutions to stakeholders for future consideration, focusing on refining based on MVP requirements without extensive stress testing across all scenarios.
03 / 03
Current design - 1
Watching & rating a film
Marker List
It displays a list of timestamps and tags.
BBFC have regulations with list of keywords that determine a film’s rating. Compliance officers need to add tags with relevant keywords during critical moments while viewing a film.Tagging Panel
Activated by keyboard command, allowing users to add tags or notes during crucial rating moments.
User problem
Difficult to interact with small dropdown
Users must select keywords from a small dropdown menu on the tagging panel to create markers to generate relevant category on the report.
It's not intuitive and not optimising the space on the interface.
Design challenges
Limited space for a long list of keywords
Space constraints limit the interface's ability to display a comprehensive dropdown list of keywords in the tagging panel.
Two viewing modes for adding markers are depicted below:
Full screen mode (left img) & Viewing mode with a video player (right img)
Full screen mode
Viewing mode with much smaller tagging panel
Design outcome
Drop the dropdown and optimise space within the panel
Optimising the space on the interface by using the area of notes and CTA button to replace dropdown and to allow more space for displaying keywords.
Introducing keyboard command to facilitate simultaneous film viewing and tagging to enhance efficiency over mouse scrolling.
Improve information hierarchy with colour by highlighting the suggested words, as well as distinct and emphasis the number key as an aid to help focus.
Current design - 2
Finishing rating report
Auto-generated category info
Category auto-generated by keywords that compliance officers entered during viewing.Number of keyword entered during viewing
Indicates why a specific category was generated.Free text field for rating rationale
Critical part in the report, for officers to articulate decisions, ensuring clarity for managers and film distributors.
User problem
Inconvenience of long scrolling in the "Long Ratings Info" section of the report
Users emphasised that if a movie gets busy with lots of rating defined keywords, the long rating info section could get really long and it's difficult to navigate.
Purpose of this section is allow users to revisit the keyword they submitted during viewing, and fill in the text field below to provide rationale on the ratings decisions.
On a side note, users also concerns the accuracy of auto-generated information. They doubt in the system's ability to generate relevant and correct category.
Design challenge
Content priority is not clear
Without dedicated user researcher, we could not be sure about the content priority on the report page, but to rely solely on verbal descriptions from users.
In response, I could only explored several options by rapid prototyping and see how users "feel" like.
Testing 1: Showing information on third column
Testing 2: Collapsable section which need more clicks
Design outcome
Showing information only when users interact with the area
To avoid information overloaded, the report will display relevant information (Keywords and their frequency) only when users interact with the related working area.
Provide flexibility to customise the category list. This approach safeguards against potential errors and ensures relevant categories are generated.
Result
Intuitive design that boost users' confidence
Staff at BBFC showed more confidence in using the new compliance tool, regardless of their level of experience, because the officers' familiarity with regulations might vary based on their experience.
Below is a video showcasing the report page prototype, illustrating user interaction with the "long ratings info" section.
With the intuitive design, the compliance team eagerly anticipates each iteration and navigates and using the application confidently.
“I can’t wait to try any new features. I don't think I need any guidance when working with any new design, and would love to explore by myself.”
Prototype of Report Page (by Figma and Principle)
If I am to revisit the project today, I might want to introduce solution that improve the accessibility, given the users age range is wide and they have various level of ability to adjust to new technology.
Ideation mock up: Verbally adding tags so users can focus on watching the screen without needing typing.
Ideation mock up: Improving accessibility by providing clearer indication between the default and focus state, more spacious clickable area of buttons, and introducing dark mode if users need to work at a theatre room.
Let's connect
or just say hi :)
Let's connect
or just say hi :)
BBFC
British National films & broadcasting classification tool
Improve efficiency in films rating to help compliance team work more effectively
Summary
From 0 to 1, designed a new desktop web application for the compliance team at BBFC to improve efficiency and effectiveness for films rating.
Background
BBFC (British Board of Film Classification) is an organisation responsible for the national classification and censorship of films in the UK since 1912.
Role
Product Designer
Responsible for web app
Established the design system
Team
Myself
4 Dev
1 PM
1 UX designer
Contribution
Created product that empower the users
Enhanced user confidence and enthusiasm for new features, receiving praise for intuitive designs that users are eager to explore without guidance.
Building trust with stakeholders and users
Being the sole designer on the project, I needed to be responsive and address feedback, and engaging closely with users.
Challenges
Without research support
I could only learn about the users problem by participating in shadowing sessions and gathered feedback directly from stakeholders to test designs with prototype.
Designing without clear measure of success
The design brief relied only on business assumptions. This approach required managing diverse opinions and occasionally formulating design solutions without a clear or defined success metrics.
Design Request & Business assumption
BBFC needs a digital transformation to handle the higher workload, because the authority requested BBFC to rate more content, for the increasing amount of video-on-demand platforms in the market.
Design objective is to improve the work efficiency for the flows:
1 - Watching and rating a film
2 - Finishing the rating report
Research
Shadowing session to understand how users interact with our product
01 / 03
Working with PM to understand potential user flows of submitting a report, encompassing up to seven different scenarios based on requests from compliance managers or film distributors.
02 / 03
Presenting extended scenarios and solutions to stakeholders for future consideration, focusing on refining based on MVP requirements without extensive stress testing across all scenarios.
03 / 03
Shadowing session to understand how users interact with our product
01 / 03
Working with PM to understand potential user flows of submitting a report, encompassing up to seven different scenarios based on requests from compliance managers or film distributors.
02 / 03
Presenting extended scenarios and solutions to stakeholders for future consideration, focusing on refining based on MVP requirements without extensive stress testing across all scenarios.
03 / 03
Current design - 1
Watching & rating a film
Marker List
It displays a list of timestamps and tags.
BBFC have regulations with list of keywords that determine a film’s rating. Compliance officers need to add tags with relevant keywords during critical moments while viewing a film.Tagging Panel
Activated by keyboard command, allowing users to add tags or notes during crucial rating moments.
User problem
Difficult to interact with small dropdown
Users must select keywords from a small dropdown menu on the tagging panel to create markers to generate relevant category on the report.
It's not intuitive and not optimising the space on the interface.
Design challenges
Limited space for a long list of keywords
Space constraints limit the interface's ability to display a comprehensive dropdown list of keywords in the tagging panel.
Two viewing modes for adding markers are depicted below:
Full screen mode (left img) & Viewing mode with a video player (right img)
Space constraints limit the interface's ability to display a comprehensive dropdown list of keywords in the tagging panel.
Two viewing modes for adding markers are depicted below:
Full screen mode (left img) & Viewing mode with a video player (right img)
Full screen mode
Viewing mode with much smaller tagging panel
Design outcome
Drop the dropdown and optimise space within the panel
Optimising the space on the interface by using the area of notes and CTA button to replace dropdown and to allow more space for displaying keywords.
Introducing keyboard command to facilitate simultaneous film viewing and tagging to enhance efficiency over mouse scrolling.
Improve information hierarchy with colour by highlighting the suggested words, as well as distinct and emphasis the number key as an aid to help focus.
Current design - 2
Finishing rating report
Auto-generated category info
Category auto-generated by keywords that compliance officers entered during viewing.Number of keyword entered during viewing
Indicates why a specific category was generated.Free text field for rating rationale
Critical part in the report, for officers to articulate decisions, ensuring clarity for managers and film distributors.
User problem
Inconvenience of long scrolling in the "Long Ratings Info" section of the report
Users emphasised that if a movie gets busy with lots of rating defined keywords, the long rating info section could get really long and it's difficult to navigate.
Purpose of this section is allow users to revisit the keyword they submitted during viewing, and fill in the text field below to provide rationale on the ratings decisions.
On a side note, users also concerns the accuracy of auto-generated information. They doubt in the system's ability to generate relevant and correct category.
Design challenge
Content priority is not clear
Without dedicated user researcher, we could not be sure about the content priority on the report page, but to rely solely on verbal descriptions from users.
In response, I could only explored several options by rapid prototyping and see how users "feel" like.
Testing 1: Showing information on third column
Testing 2: Collapsable section which need more clicks
Design outcome
Showing information only when users interact with the area
To avoid information overloaded, the report will display relevant information (Keywords and their frequency) only when users interact with the related working area.
Provide flexibility to customise the category list. This approach safeguards against potential errors and ensures relevant categories are generated.