With a history of more than 100 years of classifying films, and the emerging VOD websites, Catch-up, and online music streams, The British Board of Film Classification (BBFC) recently adopt a cloud-based classification platform and client portal for all submissions, such as a content tagging platform where film classification is carried out.
Instead of using pen and paper to take notes whilst watching films, Project Horizon aims to enable a BBFC compliance team to review content, classify films, and submit the report online.
Horizon’s project goal is to enable BBFC’s compliance team to deliver recommended classifications fast and easily and create a consistent, scalable, and sustainable classification process.
As David Austin, Chief Executive, BBFC, said, “The greatest single transformation of the BBFC’s systems in our history”.
Product Designer
In the team of Creative Director, Product Manager, Visual Designer, and Developers, I worked as a E2E Product Designer with a focus on research and design in the project. During the weekly design review with BBFC, I planned and led usability testing, workshops, card sorting exercises, produced concepts, and presented user journeys via interactive prototypes to ensure the interactions and experience resonated with research findings, stakeholders' expectations, and business objectives. I also worked on design documentation to conduct research insights and delivered solutions based on design system to engineers.
Limited research resource
When I joined the team in early October 2019, I was aware that the research role had been absent for more than 6 months, and stakeholders were not convinced that design research was mandatory to the project success - How could we make design rationale without having access to the Compliance Team?
Fear of missing out on capturing important data in terms of newly introduced tagging experience
Horizon encouraged Compliance Team to select tags, instead of sticking to the classical way of composing sentences whilst watching films. However, it seemed that the team struggled with capturing sustained/continuous scenes and becoming familiar with tags. How might we refine the tagging experience so note dropping process could become accurate as well as joyful?
Huge production deadline is approaching in 2 months
Compliance Team is going to get Frozen II onboard on Horizon shortly, which was the time pressure and expectation from both management level in BBFC and Walt Disney Animation Studios to expect tasks could be completed faster and more efficient, compared with the historical platform, CIS, the Compliance Team has been using for decades.
I started the project with a few shadowing sessions at BBFC to understand how Compliance tagged with the current tool, CIS, which they had used for decades. and how did they get on with Horizon so far. I also spent some time on the design QA to understand how Horizon shall work and think about how it can be better.
• Compliance Officer needs to make a few clicks before adding notes or tags.
• They also need to hit the dropdown list and select rating icon, which slows down the tagging speed, especially when working on busy scenes.
• Displaying all the actions in one view on the marker list also increases the chance of wrong clicks and delays the tagging speed.
I'm a Compliance Officer trying to add tags and drop notes when watching films. But I always need to hit the dropdown list and select them whenever I need to add notes, rating, or tags. Because I can't access them immediately in one go, it makes me feel I'm going to miss important information in busy scenes.
Discovery
Start with a UX audit, shadowing session, and stakeholder interviews to understand how Horizon has been built and used since early 2019.
Define
Define design brief, including problem statements, stakeholders and technical requirements, and align the content with the team as the groundwork for conception.
Design
Create user journey, information needed in each step, sketch wireframes, seek inspirations, co-design with visual designers, and digitalise wireframes in Figma or Adobe XD, and make them as the prototype.
Validate
Conduct research findings and run usability testing sessions with the compliance team.
Deliver
Refine the design based on captured feedback and deliver design for engineers to build.
Ensured Product Manager, Creative Director, Visual Designer, Developers, and stakeholders are on the same page. Take tagging experience refinement as an example.
Mapped out Compliance Officer/Manager’s report submission journey to have a holistic picture of the experience on Horizon.
Terminology workshop to align the information and terms that Compliance Team use for rating. I listed out information on each screen and practiced card sorting exercise with Compliance Manager during the weekly design review session.
Digitalise the viewing and report submission journey to ensure the information I captured is correct.
It also helps the team to understand any missing bits in the current user journey.
Concept A Hover to reveal
✅ Focus on tagging
✅ Reduce spending extra brain power on actions whilst tagging
✅ Clean UI
🚨 Extra step to take actions if needs
Concept B Display key actions
✅ Focus on tagging
✅ Easy to navigate key actions if needs
🚨 CO may potentially have more key actions to add
🚨 Less clean on the UI
Concept C Edit later
✅ CO won’t be stopped by spelling mistakes
🚨 CO will need to spend time on correcting wrong tags after viewing, which is time consuming
🚨 Extra efforts on tag recommendation
After the internal design feedback session with the creative director, visual designer, and product manager, I decided to go for the hover to reveal all features for the following reasons:
• It only displays tags, note, and an extra action button in one view so CO can identify what to click easily.
• With the help of toggling amongst arrows up/down/left/right, CO can easily navigate to the correct Category Defining Moment they want to add.
• Along with the keyboard shortcut feature, CO can toggle or hit the shortcut key to make specific action, which historically would require a few clicks to achieve.
Compiled the prototype, and tested it with Compliance Team
After 2 days of usability testing sessions with 6 Compliance Officers, 2 Compliance Managers, and Deputy CEO of BBFC, Dave Barrett, I found
Horizon
They want their eyes to be on the film as much as possible: they don’t want to look at the laptop. They used 1-3 shortcut keys whilst watching the film. E.g. shortcut "F" key stands for fuck which speeds up their tagging speed. They can hit the key without thinking of what to select and hit on the laptop.
Most COs/CMs haven’t used menu actions because it requires extra brain power to think, select and click.
Shifting between adding new stuff and editing a marker is too difficult.
Horizon (v2 prototype)
The available options on the marker seem intriguing, but there is a risk of clicking the wrong thing and focusing less on the content.
They enjoyed keypad toggling between tags and notes.
Each Compliance Officer has a different preference for input methodology: touchscreen, keyboard-only, the mix of keyboard and mouse.
I spent more time on developing a comprehensive keyboard shortcut list and getting some inspiration of predictive keyboard. I also modified the interactions to ensure a variety of inputs are going to be available on the revised version of design.
After 3 months, I had another usability testing session with the Compliance Team, and received positive feedback on the revised version of design.
“ I really like using the touch screen to select the suggested tag at the bottom. It is cool. I won’t use my mouse a lot ”
“ it’s good to use with the touch screen, it saves so much time ”
“For horizon, I like it, it is intuitive, I understand it very well, the functionality is very good, it knows what CO do and what info CO needs”
Apart from refining the crucial tagging experience, I also worked on the related work section design on Asset Information Page, report page, and report submission flow etc.
The refined tagging experience enables the Compliance Team to concentrate on the film and drop notes via toggling on the keypad.
Without joggling between clicks, they only need to hit the number to select the tags and hover to note filed to add notes. It also supports multiple input methods, including touchscreen, mouse, and keyboard, which is more inclusive for Compliance Team.
It increases their confidence in capturing accurate data and speeds up the report crafting process.
Flagging for Cuts and adding Category Defining Moment play a critical role in increasing the work efficiency on viewing some paid advice viewing. It made a significant positive impact on BBFC's annual revenue.
The new asset information page gives the Compliance Team complete access to related works so they can reduce the time on searching for previously viewed assets in the archiving system and no need to worry about missing any important assets.
Horizon generates Long Rating Information and encloses cut information and on the Report Page, which becomes a reliable reference supporting the Compliance Team to make a rating decision and submit the report faster than before.
“Project Horizon is revolutionising the BBFC’s end-to-end supply chain: from order management to resource scheduling, compliance tagging, and customer communications,” says Dave Barrett, deputy CEO of the BBFC.
“We’ve used 100 Shapes, who are fantastic UI UX designers, to design the front-end over a video player,” Clifford continues. “The user experience is bespoke.” Remodus director Emma Clifford.
The development of online stream service and digital platforms has changed the way we watch. According to nationwide BBFC research, 91% of people say it’s important to have the same kind of age rating online that they’d expect to see at the cinema. Horizon has been in charge of tackling the increasing age rating demands in the UK.
The introduction of the tagging experience entirely changes the compliance officer’s note-taking process. It helps the team to capture correct information in time and analyses them effectively whilst writing the report. It successfully weaves the efficiency and accuracy of the automation and compliance team’s profession together to tackle any challenges in the future. It also made Horizon an inclusive product for Compliance Officers from all levels to access it without worrying about their technical knowledge level.
Based on The HEART framework - Happiness, Engagement, Adoption, Retention, and Task success - Horizon received positive feedback from the Compliance Team, which makes it an ongoing project from the beginning of 2019 until now, despite the covid in 2020 and 2021. The compliance team is delighted to embrace coming new features, which is an indication of good engagement. In terms of task success, Horizon reduces Compliance Officer's report writing time from 1+ hour to 30 minutes and enables Compliance Manager's to finish up report submission within few minutes. The matrix explains the success of Horizon to BBFC.
For more details, please kindly refer to Horizon: The BBFC’s journey toward cloud-based Compliance
Introducing new ideas based on Compliance Team's habits
Before the 1st usability testing session, the Compliance Manager at BBFC had concern if the newly toggling experience would terrify the Compliance Team because the technical understanding of internal tools for the Compliance Team varies.
When planning the testing sessions, I suggested inviting COs with a range of technical knowledge. I also observed how they tag on their own devices. Instead of using the terminology of Horizon version two, which sounds like a bold move and crazy change to the team, I framed the new idea as an interaction refinement. It included integrating toggling interaction and expanding the keyboard shortcut list, which they felt comfortable with. It successfully got the Compliance Team and stakeholders' confidence over the new design.
Align the product design with business goals
In the beginning, I was thinking of asking for running regular usability testings at BBFC. But very shortly, I was aware of the risk of adding extra work to CO's busy world and received an immediate rejection from BBFC. I rephrased the proposal and made testing plans align with business goals at a different stage of the project so I could demonstrate the values that each testing brings in the product development process. For example, I bound the testing plan with a production deadline and listed out the values and outcomes that the previous testing brought in to enhance the confidence and trust from BBFC.
Involves Product Manager and Developers at early product design stage
At the design brief stage, having the product manager and developers' thoughts on technical constraints, and development time save developer resources and makes design implementation faster. It also reduced misalignment between teams and avoided the risks of wasting dev resources.