2018 - 2020

BBFC - header.png

Improve efficiency & effectiveness for films rating

Films classification tool for BBFC

Working as an authority to classify films could be stressful, as they take social responsibilities to provide fair guidance on how films are rated.


BBFC (British Broadcast & Film Classification) is an organisation responsible for the national classification and censorship of films in the UK since 1912.

In this project, we need to redesign a compliance tool that BBFC used for over ten years. 

As a product designer, I needed to make sure the UI is simple enough, so their staff can deal with growing workloads more efficiently. I also need to take into consideration flattering their learning curve when using a new tool. 

BBFC - HP - intro.png

The tagging screen the compliance officers will interact with while watching a film at their office

How this work

BBFC has regulations with a list of keywords that determine a film’s rating

e.g. enters keywords 'guns', 'blood' will be classified under the category 'violence' and might get the film with a rating of 15.

Compliance officers need to add tags to enter keywords while viewing, then create a marker and save it to the marker list.

BBFC - HP - problem.png

The dropdown of suggested keywords

When adding a tag, a dropdown will appear with a list of keywords suggestions.

And it's frustrating to the users...

  1. The screen doesn’t provide primary focus for users.
    The dropdown should be the main focus of the users while entering keywords, yet it sits within such a small area on the entire screen.


  2. The design didn’t optimise how users interact with the component.
    Not just the focus area is too small, but the users need to move their hands away from the keyboard and use their mouse to scroll within the dropdown. Annoyingly, the users are doing all these while their eyes need to focus on the film.

We explored a few options but they weren't leading us anywhere better.

Dropdown need to fit both single screen and dual screen viewing mode

Challenge 1

It has to fit in two viewing modes: with and without video screen

Compliance officers usually watch the films playing on a separate screen (like watching movies in a cinema).

But for some occasions, they need to work only with their laptop and view the film on the compliance tool while adding tags.

BBFC - HP - challenge 2.png

Dropdown shouldn't cover the video screen

Challenge 2

The dropdown shouldn't go beyond tagging panel

When viewing the film on one screen, nothing is allowed to cover the video player. It's intolerant of anything that could block the view of any details in a film.

BBFC - HP - challenge 3.png

Adding long note to tagging panel is not encouraged

Challenge 3

Encouraging staff to enter keywords only

The client believes entering keywords would help compliance officers work more efficiently. Therefore, they would like to dis-encourage officers with their habits to type a note.

And the lifesaver came...

Most of the time, I was the only designer in this project, and we need to ship the tagging feature out asap, to let users start using and testing the system. When we worked on the next iteration after one year, a UX designer joined and took over the challenge of investigating how we could place the dropdown within a limited space.

  • Optimising the notes area
    When users add tags, the notes and the CTA button area are not in use, so it's used to place the list of suggested keywords.

  • Offers quick shortcuts
    To help users watch a film and typing to add tags simultaneously, we have introduced keyboard shortcuts. So on the panel, there are now numbers to select keywords, and arrow keys to navigate the list.

  • Having tips to provide guidance
    The belonging category to each keyword is shown under the tag input field while typing. So it provides more information to the users.

tagging UX wireframe.png

Tagging panel wireframe

Figma prototype - User interface developed from the wireframe

User Interface enhancement

After agreeing on the wireframe design, I move on and explore how the interface behaves and looks.

  • Using colour to clarify hierarchy
    On the result list, the focused suggestion keyword is highlighted in a darker background. Text the users entered are in lighter shades, to make the number key and the suggestion following stand out.

  • Adding scroll bar as indication
    Although the arrow is the key to tap when navigating the list, I chose to replace the arrow icon with a scroll bar. Because this can be a visual indicator to tell how long the list is, and tell where the users are on the list.

  • Clarify information hierarchy in a structured groupThe information on the result list is grouped so users have a better focus of where to look at. Instead of having the category tips under the text input field, I have moved it under the suggested words.

Tagging area with notes.png

Keeping the note area but use that space for suggestions words when adding tag

We settled on this design because it answers users’ needs that vary.


  • It helps users with different levels of familiarity with the BBFC regulations

    Some officers have more working experience so they are more familiar with the keywords regulation set by BBFC. It is understandable when the client requested the design has to avoid encouraging users to abuse the use of adding notes.

    However, we also need to consider the officers who just joined the organisation, who are not able to remember all relevant tags. Therefore, leaving the notes on the panel is necessary, so as the wordy tips under each keyword suggestion.

  • It helps users with different levels of familiarity with technology

    We thought of pushing for a cleaner interface by introducing more shortcut keys. The users need to use shortcuts to surface only the information that is relevant to their needs (adding notes, or keywords, or sharing to slack...etc.).

    Some officers might be delighted to hear about this change. For example, some people have a video editing background. They are familiar with shortcuts and technology. However, some officers are not that familiar with the technology, or some might have been using the old tool for too long and will find it difficult to adjust.

So, what now, after officers finish watching the film and tags are all added to the marker list?

They need to finish a classification report and submit it to the film distributors.


There is a section on the report called "long ratings info". The ratings info category will be automatically generated based on the tags officers enter while viewing. It gives them context to explain why they are giving such ratings for the films.

BBFC - HP - report 1.png

"Long ratings info" section on the Report page

We were trapped in a loop of conversations when deciding which design suits best the users' needs.

Without a dedicated user researcher, our understanding of how information used on the report page was solely based on users' verbal descriptions.

We failed to understand the priority of the content. There are a lot of questions around what information hierarchy makes sense to the users.

BBFC - HP - report 2.png

Information on the section: (1) Category title (2) tag keywords (3) numbers the keyword appear

Question 1

Does the number of appearances matter?

The information under this section is auto-generated by the tags added during viewing. The image on the left is an example of the category "Violence" generated by entering the tags keywords underneath. The number of those words tagged is to remind users how frequently those scenes appear. There is no evidence of how users going to use this information about tags and their appearance.

BBFC - HP - report - challenge 2.png

Hiding all information related to keywords and their number on a side

Question 2

Do the tags keywords matter?

Users worried that the report page will be too long, so they suggested that the tags and the numbers may not be important. We have tried hiding them on a side panel just for the sake of this reason. But it is not recommended as it requires a higher interactive cost to reveal information which we were not sure how important.

BBFC - HP - report - challenge 3.png

Text fields are collapsable and are hidden by default

Question 3

What is the reading sequence?

Another option I have tried was to collapse all text fields but show only the category by default. This was tried also because of the concern of having the report page being too long. The users suggested that they might like to see an overview of what happened in the film before filling in the details to the text fields.

It's been a challenge to figure out how we could answer all the needs because we weren't able to get a clear understanding of how users use the information.

To the users, they insisted that long scrolling is not desirable.
As in reality, they go back and forth to finish the report.

The "Long ratings info" is only part of the report. What if a lot of irrelevant categories are generated by adding wrong tags? What if it is a busy film (like Quentin Tarantino's movies), then it will be auto-generated with a lot of categories. In that situation, long scrolling will make them hard to locate relevant information. 

BBFC - HP - report - challenge 4.png

How the "long ratings info" section sits within the report page

Solution for now


Showing relevant info only when users need it, to help navigate and locate relevant information on a long report page.

Like peeling an onion. By default, everything is hidden except the category title. Users can edit the list if the system doesn't generate the title as accurately as we expected. 

When users are ready, they expand all titles with its text field to start entering their rating decision rationale. 

The tag word and its number are being hidden by default, and only when users interact with the text field will show the relevant info.

Enabling flexibility to reveal the information

We are assuming that...

  1. Users need flexibility to customise the category list
    We assume that the system is still learning and is not smart enough to suggest accurate category based on the tags officers enter. Or users might make mistake and some tags are missing to generate relevant category.

  2. Both keywords and number of appearance are only important when users entering their rationale
    We assume that users don't need to see the keywords nor the number until they work on individual category. 

Prototype (using principle) that's shared for development in the end. This show how the long ratings info section sit within the final report design

In the world where unicorn exists...

This project lasted for two years. As a new product, most design decisions were made heavily based on assumptions, as there are limited research resources.

I helped BBFC to envision the delighted (and not scary) future, through a lot of high-fidelity prototypes and quick iterations. And we learned by interviewing and observing how users interact with the prototypes. 

If I am to revisit this project now, I wish:

  • To understand better how users interact with this new report

  • To know the ability of the system to auto-generated accurate ratings info after a year of learning

  • To recognise and compare the common use cases - is the long report unavoidable?

BBFC shadowing.png

Shadowing at BBFC office. Wishing we could have more research session before executing the design!

I also wish to optimise the way to add tags, so it's easier for the users to get used to adding tags, as well as to help the system learn better and provide more accurate suggestions.

Here are some explorations that we didn't get a chance to build:

Tag correction.png

Correction suggestion if there is wrong tag or wrong spelling

Focus on viewing now, mind the tags and correct them later

We know that there is a learning curve for officers to get familiar with the regulations at BBFC about the keywords. What if we can teach the system the ability to recognise mistakes and users can come back to make corrections after watching the film?

Credit to our UX designer. It was one of the ideas that we came up with within a brainstorming session, it was inspired by Grammarly (cloud-based writing assistant that reviews grammatical mistakes) while we were trying to figure out how might we reduce the stress of remembering all the tags under the regulation of BBFC. I took over the idea and worked on the UI refinement. Unfortunately, it was put into the backlog, and haven't got a chance to build it.

tag voice recognition.gif

Prototype - Allowing users to speak to add tags

Using voice recognition for adding notes and tags

Guess everyone could associate a time talking with your friends while enjoying a movie. I had doubts about the way to add tags by typing when I first worked on this design brief: Why can't we let the officers speak to add tags? Will it be easier to focus on watching the films?

With the technology and time constraints, we couldn't test to validate this idea. But thanks to my product manager, he spent his spare time working on a low fidelity prototype on a voice recognition tagging tool, and it did stimulate us and our client about how much potential this feature could grow!

VRed - header.png

Creating scalable modules for brand communication

Virgin loyalty programme homepage
ITV - header.png

Construct a solid base for progressive business

ITV internal tools design system