Adding New Functionality To With A Dynamic Component Roadmap

Article Primary image
Author Image - Marc Cullen

By Marc Cullen

An experienced Front End Developer with 5 years industry knowledge, Marc works on our British Airways account

As you may be aware, we’ve been working with British Airways for 14 years now at Leighton and we’re as proud of our relationship today as we were when it first started. Speak to anyone who has been involved with the numerous BA projects over the years and you’ll get feedback that showcases the perfect balance they offer between creativity and complexity.

Having worked on the BA account myself for 9 months (and my colleague, Ryan, also for 9 months), one of our latest involvements was with the Dynamic Component Roadmap, which was a collection of requests that had the focus of adding new functionality to various parts of the website.

A challenging but extremely rewarding project, Ryan and I spoke about it at the first Leighton Innovation event earlier in the year, and today we want to share the details of the project here on the Leighton blog.

Multiple requests, one project

In a continual effort to be as efficient as we can be at Leighton, we’re always looking at how to deliver client requests. When these specific requests were made, it quickly became apparent that the work involved would cross over between them – and it’s here when the Dynamic Component Roadmap was created.

Bringing together all of the requests into one project, it was not the usual approach for our Web Dev team, as we would normally focus on delivering individual requests as opposed to a large collection of requests at once. However, it without doubt proved to be an effective way of working this time, with all requests completed and the roadmap finishing within just 8 months.

For comparison, if these requests had been undertaken individually and not as part of a collection, the actual amount of time to complete them all would have been in excess of 11 months. This would have been down to the need to perform individual walkthroughs, tests and UATs, as well as creating testing plans and running the tests on separate occasions.

Key Highlights

When looking at the roadmap, there were three core front end components that the majority of work requests related to.

Within these three core component areas, the most time-intensive piece of work was the mass refactoring of the existing backend code base, paving the way for the implementation of new data sources, which the front end components would ultimately be dependent on.

One of these data sources returns the cheapest flight prices for each day, whilst the others contain a vast array of special offers and deals across a range of product types that BA offer.  These data sources include special offers for hotels, cars, flights and hotels, and flights and cars, which all use the new backend code that improved usability and functionality.

We also carried out a lot of work around data entry for editors at BA, particularly standardising the fields and layout within the components, as well as ensuring consistent field descriptions, ultimately allowing the editors to create dynamic content and pricing for customers of

Added Value

In addition to successfully implementing all of the original requests, we were also able to provide a number of added benefits along the way.

For example, we refactored the code to improve performance, reduced file sizes and allowed future changes to be done more easily.  As a single example, we were able to reduce 2,653 lines of code across five files down to 1,016 lines of code in just one file.  There were many more examples of this type of reduction across the whole Dynamic Component Roadmap.

BA Benefits

Aside from the clear benefits of having the requested work completed, we’re proud to say BA were able to benefit from the completion of the Dynamic Component Roadmap in a number of other ways, too:

  • Better code meaning it’s easier for other teams to update and maintain with a lot more comments
  • Refactored code, resulting in more efficient and cleaner code with smaller file sizes
  • Consistency across all components makes it easier for editors to use
  • For future additions, the components can be updated easily
  • Helps to raise revenue by giving editors more power and flexibility to display better targeted content
  • Makes everyone’s life a little easier, from future Leighton / BA developers to the editors at BA

Working on the BA account is always rewarding and challenging, and this Dynamic Component Roadmap was no different. Taking 8 months from start to finish, it involved drawing on a variety of different skills, but as with all projects, seeing the successful end results undoubtedly made it worthwhile!