Improve efficiency in films rating for compliance team for the UK
From 0 to 1, designed a new desktop web application for the compliance team at BBFC to improve efficiency and effectiveness for films rating.
Impacts
Enhanced user confidence
Designed intuitive features that boosted users' enthusiasm and willingness to explore new functionalities without additional guidance.
Established a design system
Developed a cohesive design framework to ensure consistency and scalability across the application.
“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.”
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
1 UX Designer
1 Design Director
1 PM
1 Product Owner
4 Dev
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.
How I overcame
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.
- Compliance Officer -
“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.”
Design challenges 1
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
Design challenges 2
Difficult to navigate 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.
Solutions
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.
Prototype of Report Page (by Figma and Principle)
Results
✅ 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.
✅ Positive user feedback
Users praised the intuitive design, expressing eagerness to explore new features without requiring additional guidance.
Revisiting the project today
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.
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 on verbal tagging
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.
Improve efficiency in films rating for compliance team for the UK
From 0 to 1, designed a new desktop web application for the compliance team at BBFC to improve efficiency and effectiveness for films rating.
Impacts
Enhanced user confidence
Designed intuitive features that boosted users' enthusiasm and willingness to explore new functionalities without additional guidance.
Established a design system
Developed a cohesive design framework to ensure consistency and scalability across the application.
“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.”
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
1 UX Designer
1 Design Director
1 PM
1 Product Owner
4 Dev
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.
How I overcame
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.
- Compliance Officer -
“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.”
Design challenges 1
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
Design challenges 2
Difficult to navigate 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.
Solutions
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.
Prototype of Report Page (by Figma and Principle)
Results
✅ 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.
✅ Positive user feedback
Users praised the intuitive design, expressing eagerness to explore new features without requiring additional guidance.
Revisiting the project today
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.
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 on verbal tagging
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.
Improve efficiency in films rating for compliance team for the UK
From 0 to 1, designed a new desktop web application for the compliance team at BBFC to improve efficiency and effectiveness for films rating.
Impacts
Enhanced user confidence
Designed intuitive features that boosted users' enthusiasm and willingness to explore new functionalities without additional guidance.
Established a design system
Developed a cohesive design framework to ensure consistency and scalability across the application.
“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.”
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
1 UX Designer
1 Design Director
1 PM
1 Product Owner
4 Dev
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.
How I overcame
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.
- Compliance Officer -
“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.”
Design challenges 1
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
Design challenges 2
Difficult to navigate 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.
Solutions
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.
Prototype of Report Page (by Figma and Principle)
Results
✅ 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.
✅ Positive user feedback
Users praised the intuitive design, expressing eagerness to explore new features without requiring additional guidance.
Revisiting the project today
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.
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 on verbal tagging
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.