Jamie Chow Tsz Man
From 0 to 1, redesign a new desktop web application for the compliance team at BBFC to improve efficiency and effectiveness for films rating.
Category:
Productivity tool / Compliance
My Role:
Product Designer
Year:
2019 – 2021
Team:
1 UX Designer, 1 Design Director, 1 PM, 1 Product Owner, 4 Dev
Impact
Enhanced user confidence
Designed intuitive features that boosted users' enthusiasm and willingness to explore new functionalities without additional guidance.
Successful digital transformation
The application supported BBFC's need for digital transformation, effectively handling increased workloads from the growing number of video-on-demand platforms.
The new design streamlined the film rating process, enabling compliance officers to work more effectively.
“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.”
- Compliance Officer -
Challenges
Absence of research support
Without dedicated research resources, understanding user problems relied heavily on direct engagement and shadowing sessions.
Unclear success metrics
The design brief was based on business assumptions, lacking defined measures of success, which led to managing diverse opinions and formulating solutions without clear benchmarks.
Direct user engagement
Participated in shadowing sessions and gathered feedback directly from stakeholders to inform design decisions.
Proactive feedback integration
Maintained responsiveness to stakeholder input, building trust and ensuring the design aligned with user needs.
User shadowing to understand how users use our product in real life.
Working with PM to understand potential user flows of submitting a report.
Presenting extended scenarios and solutions to stakeholders for future consideration, focusing on refining based on MVP requirements without extensive stress testing across all scenarios.
User quotes
“I have over 10 years working experiences and I am not comfortable with changes and new technology.”
- Compliance Manager -
“I am new to BBFC and not familiar with the compliance rules, but I am open to new design.”
- Compliance Officers -
Design challenge 1
When officers watch a movie, they need to add keywords for defining moments based on the compliance rules.
Image on the right shows: 1_The Marker list that contain keywords defining each moment. 2_Tagging panel for users to enter keywords to create a Marker
Limited space for a long list of keywords
The interface has limit ability to display a comprehensive dropdown list of keywords in the tagging panel.
Design has to be scalable and fit in two viewing modes.
Full screen mode
Viewing mode with much smaller tagging panel
Solution
Optimised tagging interface
Redesigned the tagging panel to address space constraints, making it more intuitive for compliance officers to add tags during film reviews.
Comprehensive marker list
Developed a marker list displaying timestamps and tags, aiding compliance officers in accurately capturing critical moments for film ratings.
Design challenge 2
Difficult to navigate the report after viewing a movie
Users emphasised that if a movie gets busy with lots of rating defined keywords, the long rating info (LRI) section could get really long and it's difficult to navigate.
Unclear information hierarchy
Purpose of the (LRI) 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.
Solution
Progressively display info
Make information less overwhelming by progressively displaying info only in focus, and make it collapsable to shorten the report
Add more manual control
Allowing users to edit the list for any mistake, so as to provide flexibility to edit and on the report length
Prototype of Report Page (by Figma and Principle)
Revisiting the project
Enhance AI usage for work efficiency
Allowing adding tags verbally, with AI auto recognition, so users can focus on watching the screen without needing typing.
Ideation mock up on audio tagging
Improve accessibility for wider usage
Accessibility is crucial, given the users age range is wide and they have various level of ability to adjust to new technology.
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.
