Film classification web application
Client
BBFC
Case study 1
Case study 2
UI design system
Client
ITV
Case study 3
Mobile app UI and brand visual
Client
Wonder City
2018 - 2020
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.
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.
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...
-
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.
-
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 focusing on watching the films.
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
The tagging panel has to fit two viewing modes: with and without video screen
Compliance officers usually watch the films on a separate screen (like watching movies in a cinema).
But for some occasions, they need to work on their laptop and view the films on the compliance tool while adding tags.
Dropdown shouldn't cover the video screen
Challenge 2
The dropdown shouldn't go beyond tagging panel
When viewing the film their laptop, nothing is allowed to cover the video player. It's intolerant if any detail is blocked in a film.
Adding long note to tagging panel is not encouraged
Challenge 3
Encouraging staff to enter keywords only
Our 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 long note on the tagging panel.
And the lifesaver came...
Most of the time, I was the only designer in this project, and my main goal was to ship the tagging feature, so that users can start using and testing the system. When we worked on the iteration after one year, a UX designer joined and took over the challenge of investigating how we could place the dropdown within the 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.
-
Introducing quick shortcuts
To help users watch a film and typing simultaneously, we have introduced keyboard shortcuts. Users can now use numbers to select keywords, and arrow keys to navigate the list, instead of using their mouse to scroll.
-
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, helping them to learn the tagging system.
Tagging panel wireframe
After agreeing on the wireframe design, I moved on and explored 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 keywords stand out.
-
Adding scroll bar as indication of page length
Although the arrow is what users 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 group
The 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 moved it under the suggested words.
Figma prototype - User interface developed from the wireframe
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.
-
It helps users with different levels of familiarity with technology
We thought of pushing an even cleaner interface by introducing more shortcut keys. The users need to use shortcuts to surface 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 to a film.
"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.
Information on the section: (1) Category title (2) tag keywords (3) numbers the keyword appear
Question 1
Does the appearance frequency 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 frequent those scenes appear. There is no evidence of how users going to use this information about tags and their appearance frequency.
All information related to keywords and their number on a side pop up.
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.
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, 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.
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.
Prototype (using principle) - Enabling flexibility to reveal the information
We are assuming that...
-
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.
-
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, hence those information will be shown only when users tap on the text field.
Prototype (using principle) I used to share with the developers. This show how the long ratings info section sit within the final report design
After this iteration, we faced another challenge by looking at other type of video submission from film distributors, the Advice Viewing.
Advice Viewing is an informal viewing, that the rating result won't go public. The film distributors is submitting just would like to get a professional advice from BBFC.
After considering all scenarios, there are the problems we have on the latest report page:
-
Not flexible in checking which part of the report to send to client (AV sometimes don't require the whole report)
-
Not clear on who is sending to the client (AV requires more than two person viewing)
-
Not flexible in controlling when the asset archived and becomes "Read only"
To allow flexibility of what to send back to the film distributor, and who from the BBFC is responsible to sent, we might need more CTA button as users perform different actions for AV submission:
-
Save & Close
-
Task disappear from task list
-
-
Finish & send
-
Send to client
-
Task disappear from task list
-
-
Choose & send
-
Send part of the report to client
-
Task stay on task list
-
.jpg)
All possible scenarios for Advice Viewing submission.
End to end users journey after more CTA button introduced to the report page.
Due to the limited resources, BBFC has in the end decided to not introduce such changes but to do the communication with their clients manually (through emails). This proposal, hence, put into the backlog of the design debt.
However, I went through the scenarios and solutions in a workshop with my Product Manager, Creative Director, and stakeholders from BBFC. As a result, it helped alignment and to share knowledge about this problem. Also, to discuss potential technical and business challenges.
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?
Shadowing at BBFC office. Wished 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:
Correction suggestion if there is wrong tag or wrong spelling
Focus on viewing now, 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.
Prototype - Allowing users to speak to add tags
Using voice recognition for adding notes and tags
Guess everyone can 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!
* * * * * *
