Imperial College Gliding Club
Public website for the Imperial College London Gliding Club.
The purpose of this project was to develop a digital product that provides the students of Imperial College comprehensive information about the union’s gliding club. The primary goal was to enhance accessibility and engagement among both students interested in air sports as well as the wider community. The platform aims to streamline easy communication amongst all members by providing accurate and easy-to-access information regarding the club, from membership details to safety guidelines.
Background
My specific role on the project
I oversaw the entire software lifecycle, exercising creative autonomy to ensure intuitive navigation and responsive layouts. Working closely with stakeholders, I fostered a culture of collaboration, prioritising alignment with user needs and project objectives. Beyond technical responsibilities, I emphasised effective communication and teamwork, adapting my approach to accommodate colleagues from diverse backgrounds. This inclusive approach not only streamlined workflows but also fostered a productive and harmonious work environment conducive to achieving project success.
The main goals for the site were to deliver comprehensive information about the union’s gliding club, covering activities, events, facilities, and membership details, while also prioritising accessibility to ensure that all students at Imperial College could easily access the platform, regardless of their background or abilities.
The design process began with the creation of prototypes, which helped visualise the layout, navigation, and key features of the site. Feedback from stakeholders was incorporated early on to ensure the design addressed user needs and expectations. The design emphasised responsive principles and accessibility to ensure a seamless experience across devices and abilities. Built around a React.js component architecture, the design also emphasised modularity and reusability to streamline development and future updates. This phase provided a clear blueprint for the development team, ensuring the site was optimised for both functionality and inclusivity before moving into implementation.
Design
Reponsiveness
A key aspect in the design process was ensuring that we prioritised building responsive web pages, taking a mobile-first approach.
This approach aligns with Imperial College London's main goal outlined in its ICT strategy: “Create a world-class digital experience for students that aligns with the behaviours and preferences of this digital generation”.
Recognising that phones are likely the primary device used to access the platform by users, this strategy underscores a user-centric design philosophy aimed at catering to users' preferences and behaviours, ensuring convenience and comfort throughout their digital journey.
I used custom Sass media queries to adapt the layout and styling of the platform based on the user’s device characteristics.
The flexibility afforded by custom Sass breakpoints empowered our team to refine the design, ensuring that the final product met high standards of responsiveness.
Implementation
Accessibility
We followed WCAG 3 accessibility guidelines to ensure that our website met high standards of accessibility, making it usable for individuals with diverse needs and preferences. To achieve this, we employed a variety of techniques and tools, including colour contrast checkers, screen reader compatibility tests, and keyboard navigation assessments.
We used colour contrast checkers to verify that text and interactive elements on our website had sufficient contrast ratios, making them easier to read and interact with for users with visual impairments.
Additionally, we conducted screen reader compatibility tests to ensure that our website was navigable and understandable for users who rely on screen readers to access content. This involved adding descriptive alt text to images, properly structuring headings and landmarks, and implementing ARIA attributes where necessary.
The website was deployed using Netlify for frontend hosting. Netlify is known for its fast, reliable hosting as its global CDN ensures that the website loads quickly and efficiently for users, regardless of their location. To facilitate smooth updates and releases, a Continuous Integration/Continuous Deployment (CI/CD) pipeline was implemented. This automated system allows for continuous testing, building, and deployment of the codebase whenever changes are made, ensuring that new features and bug fixes are delivered to the live website without downtime or disruption. Any changes pushed to the main branch of the Git repository are automatically tested and deployed to production, while other branches are used for development and staging environments.
The project’s source code was version-controlled using Git and hosted on GitHub. A clear branching strategy was established to manage different stages of the development process. The strategy included:
- A main branch for production-ready code.
- A develop branch for integrating features and fixes before they are ready for production.
- Separate feature branches to work on new functionality or enhancements.
- Separate bug branches to fix issues in the system.
Deployment
Outcome, maintainance, and continous improvement
The project achieved its goal of establishing a digital platform to inform Imperial students about the gliding club, as evidenced by the consistent user engagement and positive analytics. The site attracts up to 1.1k unique visitors per month, reflecting sustained interest from both new and returning users. The site effectively manages an average monthly bandwidth usage of up to 3 GB, which shows that while it delivers rich media content like images and interactive elements, it remains optimised for efficient performance. These monthly averages confirm that the application is successfully fulfilling its goals of providing accessible, comprehensive information to a wide audience, while maintaining a high level of user engagement.
Post-deployment, I am focused on ensuring the long-term stability and performance of the platform. Performance monitoring tools, such as Google Lighthouse, are used to identify any areas that need optimisation. Additionally, the project benefits from feature enhancements based on user feedback, with new functionalities being added to improve the overall user experience. Regular updates and improvements keep the application relevant, ensuring it remains useful and efficient for all users over time.