Overview
Discovery
Define
Ideation
Prototype
Film Barking and Dagenham
For many students and local professionals, finding career opportunities and making connections can be challenging. Recognising this, I was commissioned to redesign the Barking and Dagenham Film website. My goal was to create an intuitive platform that simplifies access to the "Make It Here" programme and strengthens connections within the local community.
Roles
& Timeline
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" program funded by Film Barking and Dagenham. 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, hindering collaboration and networking. These issues collectively prevent the website from serving its intended purpose and supporting the local film industry.
The Challenge
How might we improve student engagement and career development by making the "Make It Here" programme more accessible, while also simplifying connections with local professionals through an intuitive platform?
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 to 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 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. This process helped gather insights into user needs, goals and pain points.
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 Heavyl: 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
The user persona helped define the target user by highlighting pain points and goals. It played a key role in the ideation phase, ensuring that design concepts addressed specific needs, such as access to training opportunities. This clarity enhanced the user experience by guiding the creation of a platform that is intuitive and tailored to the user's needs.
Aspiring filmmaker persona in Miro
Journey Mapping
I carried out a journey mapping workshop with stakeholders to understand Joy's thoughts, feelings and actions as a student browsing for training opportunities. This helped identify key moments where she felt overwhelmed and uncertain about making the right choice. The workshop resulted in generating design concepts to meet the user's needs.
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. Through discussions with stakeholders, we aligned on user goals and determined the essential pages to include on the website.
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
The stakeholders wanted to maintain a monochrome colour palette with subtle hints of colour for a clean and sophisticated look. We decided to remove the black background to improve readability and enhance the visual appeal. Additionally, I worked on establishing a clear CTA hierarchy by incorporating secondary colours.
Style guide for the interface in Figma
High-Fidelity
In the high-fidelity wireframes, I’ve implemented the style guide incorporating consistent typography, colours, and imagery that reflect the brand identity.
High-fidelity wireframes in Figma
Prototype
Final results
Reflection
During this process, I learnt the importance of balancing user needs with business objectives. Facilitating the kick-off meetings and leading ideation workshops with stakeholders were key in scoping and managing the project.
Takeaways
Developer Engagement: Including developers throughout the design process ensures that the design is technically feasible.
Anticipate Challenges: Identifying 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.