Film Barking and Dagenham
For many students and local professionals, finding career opportunities and making connections can be challenging. I was commissioned by the Film Department to redesign their website, making it more dynamic and user-friendly.
UX Designer
Researcher
6 weeks
Team
Content Designer
Developer
Project Manager
Client
Barking and Dagenham Film Department
Tools
Figma
Miro
The Problem
The website fails to inform students about local opportunities such as the "Make It Here" programme. Its outdated theme is visually unappealing, which negatively affects user engagement. Additionally, the website lacks the ability to foster a sense of community among local professionals and suppliers. These issues prevent the website from serving its intended purpose and supporting the local film industry.
The Challenge
How might we redesign the website to improve visibility of local opportunities, support early careers and connect local talents in the Barking and Dagenham film industry?
The Hypothesis
By showcasing the "Make It Here" programme and improving access to local talent, the website redesign will make resources more accessible. This will drive a 10% growth in enrolment and a 20% increase in user engagement.
Discover
Competitor analysis
I chose the Barbican, Essex Film Office and ScreenSkills for my competitor analysis because of their significant impact on the British film industry. I identified areas for improvement in the Film Barking and Dagenham redesign by examining their common UX features, industry standards, strengths and weaknesses.
Competitor Analysis table from a research session in FigJam
Key Insights
Local Film Community: Encourage businesses and professionals to register their services in the local film database, creating opportunities for collaboration.
Property Registration: Allow residents and businesses to list their properties for film-related opportunities, streamlining the process.
Content Design: Ensure that the content is visually engaging to reflect the film culture and captivate the target audience.
Students & Early Careers: Highlight clear CTAS for students, job seekers and early-career professionals to access job boards, training and work experience.
Local Film Programmes: Showcase local film training opportunities, offering easy access to programmes and workshops for career development.
User Research
I conducted user testing followed by a feedback survey at a film event in Barking and Dagenham, where both students and industry professionals interacted with the current website. I guided participants through specific tasks while observing their navigation to identify usability issues.
User Testing objectives
Navigation experience
Pain points
Ability to complete tasks
Design system
Feedback Survey Objectives
Accessibility standards
Recommended Improvements
Frustrations
User needs and goals
Screenshots of the Film Barking and Dagenham website
Feedback
Accessibility Issues: The text is illegible due to poor contrast against the black background. The animated navigation elements are not accessible to screen readers.
Straightforward Navigation System: The website has a simple and clear structure, making it easy for users to navigate and find their way around without confusion.
Images: The images are outdated and not engaging, failing to capture the user's attention. They could be more dynamic and aligned with the content.
Text Heavy: The website is heavily reliant on text, which can overwhelm users. More visual elements or concise summaries will ensure the content is digestible.
Film Programmes: Difficulty locating information about film programmes within the borough, making it challenging for users to access relevant and local content.
Define
User Persona
A user persona was created to gain further understanding of the user's goals and motivations, such as accessing training opportunities. This highlighted the need for clear, concise content with key details like date, time, and location. In addition, clear CTAS for enrolment should increase participation.
Aspiring filmmaker persona in Miro
Journey Mapping
I carried out a journey mapping workshop with stakeholders to identify key moments where users might feel frustrated or overwhelmed while browsing for training opportunities. The workshop emphasised the need for a tool that allows students to easily compare training opportunities, allowing them to make confident choices without feeling overwhelmed.
Journey Map from Miro
Ideation
Sitemap
I collaborated with stakeholders to create a comprehensive sitemap, utilising information architecture principles and focusing on the hierarchy of information to ensure a user-friendly navigation system. In addition, stakeholders agreed that the "Make It Here" programme and external training opportunities need dedicated pages to increase visibility and help users find relevant information.
A section of the sitemap from FigJam
Low-Fidelity
The low-fidelity wireframes aim to enhance the design by incorporating more imagery and streamlined content. In response to user feedback about the previous site being text-heavy, I’ve added more visual elements such as hero images. The text has been simplified for quick scanning, with a layout designed for easy navigation.
Key low-fidelity wireframes
Mid-Fidelity
In the mid-fidelity wireframes, I implement information hierarchy by clearly defining content sections and prioritising key elements. I’ve refined the information architecture, with tile categories and CTAS for easy access.
Key mid-fidelity wireframes from Figma
Style Guide & uI Kit
Stakeholders requested a monochrome colour scheme with crimson accents to reflect Barking and Dagenham’s film industry ties. The UI kit and style guide ensure consistency and a clear hierarchy, improving user engagement. These elements create a cohesive, visually appealing experience.
Style guide for the interface in Figma
UI Kit from Figma
Iterations
During the feedback session, stakeholders pointed out that the "Search by Type" filter was too broad and the pagination was too confusing. This led to refining both features to meet the goal of achieving a 10% growth in student enrolment.
Key iterations with annotation
High-Fidelity
The high-fidelity wireframes, informed by user research were designed to boost enrolment and engagement. The redesign aligns with the style guide, reinforcing the brand identity and vision.
Key high-fidelity wireframes from Figma
Prototype
Key Pages
User Testing
Using Google Analytics and the department's data, I compared metrics for the first month before and after the redesign. Enrolments increased from 110 to 130, and bounce rate dropped from 63% to 41%. The changes showed an 18% increase in enrolments and a 22% reduction in bounce rate, demonstrating the redesign's success.
Takeaways
Developer Engagement: Including developers throughout the design process ensures that the design is technically feasible.
Anticipate Challenges: Identify potential roadblocks early to prevent future delays.
Stakeholder Alignment: Regular updates and clear communication with stakeholders ensure expectations are managed and met.
Next Steps
The project is currently in development.
A/B Testing: Test the effectiveness of different pages and features against the previous design to identify what resonates with users.
Usability Testing: Conduct further testing with users to identify and fix any usability issues before development.
Collaboration with Developers: Work closely with the development team to build the website, ensuring design integrity is maintained throughout the process.