Here’s a glimpse into my approach to integrate a customised feature into an already established website. The idea was to make it feel like an organic part of the overall design and functionality, rather than a standalone addition.
Let’s dive in!
The brief: a map
The aim of this task was to enhance a client’s website by incorporating an interactive filterable map to showcase their projects. While the client already had a map in place, it fell short of meeting their specific needs.
The key requirements were the ability:
- for users to filter projects based on location and project type, and
- for editors to easily manage project additions, updates, and deletions.
The design of the map needed to align with the established website and adhere to the client’s branding.
The proposal: customise an already existing module
Given limited insight into the website structure initially, I crafted a proposal with assumptions based on available information.
Before making any changes to a website, it’s very important to get to know it first. This includes getting an understanding on how the website works, how it is structured, in the front-end and the back-end, visualising dependencies, modules available.
Two primary solutions emerged:
- enhancing the existing map (adding filters and improving design) or
- integrating a Drupal module tailored to their requirements.
Recognising the need for customisation in both options, I leaned towards a Drupal module, anticipating better alignment with the client’s objectives.
The implementation
To start with, I explained my preferred approach to the client and answered any question they had, so we had a final agreement on the deliverables.
To ensure sustainability, I extended the module so I could customise it without risking overwrites during module updates.
If customising existing solutions, it is important to do so in a way that it won’t be affected by future updates. Extending a module is better practice than overwriting it.
I created a new Drupal view, so the map could be filtered.
Additionally, I created a second view, displaying all projects in a scrollable section on the page, but outside of the map. I wrote a script so when a user clicks on a project, it interacts with the map by opening the corresponding location. This provided a dynamic and interactive user experience.
The original available map was a world map. I therefore customised the map so it only focused on and displayed the UK, as all projects were UK-based.
Finally, an important part of this implementation involved creating a user-friendly guide. This step-by-step guide empowered editors to effortlessly add their projects to the map, ensuring smooth ongoing management.
The result: a happy client
The interactive map now serves as a powerful tool for users to explore and filter projects. The customised script adds a layer of accessibility, making project interaction intuitive and seamless. By narrowing the map’s focus to the UK, we addressed a specific client requirement, providing a tailored solution.
Moreover, the backend modifications empower editors with the ability to manage projects effortlessly.
In conclusion, this project highlights the importance of adaptability and a thorough understanding of client needs. While faced with imperfect solutions, a tailored approach and strategic implementation resulted in a website enhancement that not only met but exceeded our client’s goals.
