We specialise in building engaging and accessible front-end experiences using HTML, CSS, and JQuery. Recently, we had the privilege of working with Disney to upgrade a suite of microsites dedicated to their beloved animated feature, Brave Heart.
Our task was to transition these microsites from outdated technologies to a more modern, interactive, and accessible design that would resonate with fans of all ages. Over several months, we worked closely with Disney to enhance user engagement while prioritising accessibility, ensuring everyone could enjoy Brave Heart’s magic.
Story-driven experience
The Brave Heart microsites extend the film’s universe, offering fans interactive content, games, character profiles, and behind-the-scenes insights. We aimed to create a digital experience as engaging as the film. Using HTML5 and CSS3, we redesigned the structure and layout to be both visually captivating and intuitive to navigate. Using CSS animations and transitions, we recreated the enchanting visuals characterising Brave Heart, with smooth hover effects, interactive menus, and dynamic background elements.
To further enhance engagement, we integrated JQuery to add interactive elements, including character sliders, expandable story sections, and quizzes that test users’ knowledge of the movie. With these features, users can explore the world of Brave Heart at their own pace, immersing themselves in a magical digital journey that feels playful and engaging.
Prioritising accessibility
A crucial part of our project with Disney was ensuring that the microsites met the highest accessibility standards. We leveraged HTML5 semantic tags to structure the content logically, making it easy for users relying on screen readers to navigate.
We added alternative texts to all images, and we carefully selected colour contrast ratios to meet Web Content Accessibility Guidelines (WCAG), ensuring readability for users with visual impairments.
We implemented keyboard navigability for interactive elements, such as quizzes and sliders, allowing users to interact with content without relying on a mouse. Additionally, all animations and visual effects were tested for accessibility, ensuring they did not hinder users with motion sensitivity.
Enhanced content management
Beyond user experience, we optimised the microsites for Disney’s content management team by creating reusable CSS components and JQuery functions, streamlining updates and reducing maintenance time. Our developers minified image files, CSS, and JQuery scripts to improve loading times, creating a seamless user experience on all devices.
The result is a set of modern, engaging microsites that invite fans to delve deeper into the story of Brave Heart. These microsites have enhanced interactivity and accessibility at their core.
Our collaboration with Disney highlights our commitment to creating inclusive, interactive digital experiences that capture the magic of storytelling for everyone.
