Hayleys Annual Report 2023 - 2024 Microsite

Interactive Annual Report Microsite for Hayleys PLC

Project Introduction

The project involved developing an interactive microsite for Hayleys PLC's 11th Integrated Annual Report. This digital platform was designed to provide an engaging and accessible presentation of the Group's value creation story, value transformation process, and stakeholder outcomes and impacts. By adopting a Persona-based communication approach, the microsite tailored information to specific stakeholder groups, ensuring that content was both relevant and accessible.

Check it out

My Role

In this project, I served as the lead developer, overseeing the end-to-end creation of the microsite. My responsibilities included using HTML, CSS, and JavaScript to build the site’s structure and functionality. I employed Bootstrap for responsive design to ensure the site was accessible on various devices. Additionally, I integrated Chart.js for interactive data visualization and incorporated animations using Adobe After Effects and LottieFiles to enhance the visual appeal and user engagement.

Target Audience

The microsite was crafted with a broad audience in mind, including investors, management, employees, and industry analysts. Each stakeholder group had distinct information needs and preferences. The Persona-based approach was used to ensure that the presentation of the report was tailored to the specific interests and requirements of these diverse groups, making the information both relevant and engaging.

Challenges

One of the significant challenges was working within a limited timeframe while maintaining high standards of quality and interactivity. Ensuring that the microsite functioned smoothly across different devices and browsers also posed a challenge. Furthermore, integrating animations and interactive elements without compromising the site's performance required careful planning and execution.

My Approach

To overcome these challenges, I adopted the following approach:

  • Strategic Planning: Initiated the project with a clear plan and timeline to manage the tight schedule effectively.
  • Efficient Development: Utilized HTML, CSS, and JavaScript to build a solid foundation for the microsite, with Bootstrap facilitating responsive design.
  • Enhanced Data Visualization: Integrated Chart.js to create interactive and visually compelling charts, making complex data more comprehensible.
  • Sophisticated Animations: Worked with motion designers to create animations using Adobe After Effects and implemented them using LottieFiles to enhance user engagement without impacting performance.
  • Persona-Based Content: Tailored the presentation of information to different stakeholder personas to ensure relevance and accessibility.

This approach enabled the successful delivery of the microsite within the specified timeframe, providing Hayleys PLC with an effective and interactive platform for their annual report.