Case Study:
brisbane lions
Role:
interactive web
component
Timeframe:
12 weeks
Tools:
Figma, HTML, CSS, JavaScript, GSAP
the brief
Design and develop interactive web components for the Brisbane Lions homepage. The objective was to enhance the browsing experience through purposeful interactions.
research foundation
The project began with a SWOT analysis of the existing Brisbane Lions homepage to identify strengths, weaknesses, opportunities, and areas for improvement. This analysis highlighted accessibility concerns within navigation, alongside an opportunity to better showcase the club's recent achievements through more engaging visual content.
These findings informed the selection of two interactive components: a back-to-top button to improve page navigation and an image slider designed to showcase imagery from the 2025 AFL Grand Final. The research established the interaction requirements, content hierarchy, and overall direction before development commenced.
process highlights
flow charts
User flows were created to define how users would interact with each component and establish the logic behind each interaction. Mapping these behaviours early ensured the components remained intuitive, accessible, and aligned with the overall homepage experience before moving into visual design and development.
wireframes
Low-fidelity and high-fidelity wireframes were developed in Figma to establish the structure, placement, and visual direction of the homepage components. The initial wireframes focused on layout, hierarchy, and spacing, while the final designs refined branding, typography, colour, and interaction states to ensure consistency with the Brisbane Lions identity.
Final Interface & Player Flow
interactive web development
The final interface was developed using HTML, CSS, JavaScript, and GSAP to transform the static designs into a functional interactive experience. The image slider became the primary feature, combining JavaScript functionality with GSAP scroll-triggered animations to create a dynamic showcase of the club's 2025 AFL Grand Final imagery.
Additional motion elements were implemented throughout the homepage, including animated header text, navigation transitions, and footer social icon hover states. These interactions added depth and polish while maintaining usability and visual consistency.
outcome
The final deliverables included a fully developed Brisbane Lions homepage featuring a custom header, footer, contact form, interactive image slider, back-to-top button, and supporting animations.
Beyond the final interface, the project strengthened my understanding of translating UX concepts into functional front-end experiences, combining design decisions with technical implementation through HTML, CSS, JavaScript, and GSAP.
reflection
This project reinforced the importance of considering both design and development when creating interactive digital experiences. Implementing my designs through JavaScript and GSAP provided valuable insight into how interaction decisions impact usability, performance, and overall user experience.
Looking ahead, I would allow additional time for experimentation with more advanced animations and interaction patterns. As this was my first project implementing JavaScript functionality, further exploration would have allowed me to push the interactive elements beyond the initial scope.