Requirements and Services
When SportBusiness approached us, they already had an existing website but they wanted to improve the frontend design and overall UX. They also wanted an improved WordPress admin UX workflow in the backend.
After several discovery sessions, we outlined the minimum requirements as follows:
- Full website redesign to modernise their online presence.
- Distinguish and present their online products more clearly for customers.
- Allow the various editorial teams more admin control over managing the editorial content and product offerings.
- Create a very flexible content access system to match ever-evolving services & products.
- Restructure the content to simplify its presentation and usability to the customer.
- Improve site performance and stability.
- Streamline integrations between the website and the existing third-party platforms and workflow.
During the initial phase of development, the client was very pleased with the process of finding effective solutions so they evolved some of their initial ideas to accommodate new requirements. This demonstrates the effectiveness of an agile approach as it gives space to try things and feedback to the stakeholders rather than committing to a huge chunk of development without feedback. They decided to keep improving the website after launch, also taking advantage of a continuous-development approach. The goal was to stay agile enough so we could not only improve the various aspects of the site but adapt and change to new ideas brought by the client.
This is a breakdown of the services provided during several years of design and development for the new site:
- Migration from their previous website
- Initial website design concepts
- Custom WordPress website and theme development
- Development of various custom functionality
- to integrate services & tools which were already part of their workflow
- to implement specific features needed to improve their online business and services
- Continuous development, including design changes
- Calamity support and maintenance
- High availability hosting and monitoring
Migration and Content Refactoring
Their old website was built in Drupal and one of the reasons they decided to contact us was because they wanted a specialist WordPress agency to move them to the familiar WordPress platform. One of the big challenges was to move from one system to another while rationalising and streamlining the content structure. The old website had been built up over the years and like so many sites we see, certain areas needed much improved UX for both customers using the frontend and backend admins.
We spent quite a bit of time on the migration phase, working with the client to rationalise their content structure, and to determine which taxonomies, post types and metafields were strictly necessary and which could be removed or replaced, to reduce the unnecessary complexity.
Then, during the migration, we refactored the data and stored it in the new database using the new structure, ready for a fresh start. In addition to that, we also implemented a WordPress Multisite environment and divided their articles across three websites using the same theme. This is something we’ve done in the past for several clients. This positioned their main products & services slightly differently while all retaining the same branding and design patterns. Using this approach, the various teams could work in separate environments and the management of their workflow could be a much simpler UX.
Servers and Performances
SportBusiness is an international organisation and their websites have visitors from all over the world, in particular from Europe, but also the USA and Asia. This is reflected by the substantial amount of traffic covering any 24 hour period, as opposed to traffic spikes in a specific day or night period. Multiple organic traffic peaks and also phases in which different time-zones intersect, generating occasional increases in the server load.
For reasons that I will explain soon, we couldn’t implement full page cache at the server’s level and therefore the website heavily relies on the database performance.
To balance things out, we’ve decided to provision several web servers and set up a load balancer to split the incoming traffic evenly among them. In that way we managed to maximize the speed and utilise the resource, ensuring that none of the servers are overloaded at any given period. If a single server goes down, the traffic gets redirected to the remaining online servers.
To reduce possible overhead, we introduced an additional replica instance of the database, separating the read-only requests from the ones that insert new data. The updates made to the primary database instance are then asynchronously copied to the read-replica, reducing the access load on the database, improving server response time and providing read scalability.
A lot of SportBusiness customers are companies and universities. This is one of the core requirements for this project, so we implemented automatic login by IP address so that the users connecting to an organisation’s WiFi could access the website under the same account, without having to insert the login details.
This requirement was quite challenging since WordPress doesn’t provide proper support for it. Therefore we had to come up with a custom solution that would quickly map a user by the given IP address, without penalising too much the overall performance of the website.
Unfortunately, the direct consequence of this feature was due to the reduced ability to cache full pages on the server. To overcome this problem we had to closely monitor all the performed queries and try to minimise their impact on the overall page load.
For this project more than ever, we implemented custom cache for several specific parts of the pages, like widgets and landing page blocks, as well as navigation menus and other parts that perform additional database queries.
To optimise styles and scripts, we have used Webpack to compile them into minified static files, but we also tried to bundle the assets from theme and plugins together as much as possible, to reduce the number of HTTP queries performed per page.
Then, to defer the loading of external scripts and libraries, we placed all their calls in the bottom of the page, so that the content is rendered before than those files.
To optimise images, we have used a combination of lazy-load technique and imgix. The latter is a brilliant service used in most of our websites, which allows to offload images transformation and resizing as well as their optimization, and then serves cached images to the end-user.
One of the key benefits is that the pages load faster and the servers can handle the traffic with very rare moments of stress and with a high uptime percentage.
Theme and Functionality
We have done a lot of custom development for this project, both to integrate third-party services and to implement bespoke functionality. I am not going to describe all those features here, but a few are definitely worth to be mentioned more in details.
Custom Page Builder
For many years we have been using our widget powered page templates to provide our clients with a flexible way to build and modify their landing pages quickly and with a good degree of variability.
We initially used them in this project as well, but we soon realised that we needed something much more flexible, which could be used to build content-driven marketing pages with many different layouts and section types, rather than the classic pages with lists of articles which are commonly used on publishers websites.
SportBusiness is a very dynamic company who need a lot of flexibility when it comes to offers and marketing strategies. Therefore they needed to tweak the initial layout and styles of the pages, to make them more effective or to try new approaches. They also needed to create several landing pages with a marketing focussed aesthetic, based on their content strategy.
Unfortunately, it is not so quick to develop custom WP Widgets which then could be used in our widget powered templates. And although it is possible to modify the logic and options of our core Widgets using WP filters, we are usually very careful with this approach because the code can easily become messy and difficult to maintain.
In the end, rather than continuously tinkering with the widgets, we decided to develop a brand new plugin which takes advantage of a very modular and flexible Object-Oriented approach. The plugin acts as a PHP framework that allows re-using common functionality across different modules, reducing the effort needed to create new custom content blocks, which can then be used to build landing pages from the WordPress admin panel.
For the admin interface, we used CarbonFields, a powerful and flexible library that allows to quickly scaffold sets of options and fields, which are then stored in the database as WP Post Metafields.
With a bit of custom development work, we managed to have a very sleek interface with expandable blocks, which provides a good overview of the page content and allows the WordPress admins to easily add Blocks and re-order them by simply dragging and dropping into another position.
We started with a few Block types and each of them had a set of options that already provided good frontend flexibility, without having to touch the code. And thanks to the modular structure of our Page Builder, it’s also easy for us to modify those options and extend the functionality of a Block, to cover potential new requirements.
A lot of functionality is common to all modules and therefore it is inherited when creating a new Block type. Even some more peculiar features are modularised into Traits that can be easily included into any Block and then used in the backend or in the frontend too.
If we want to create a very simple new Block, it can be as easy as creating a Class to declare its options fields and then making a template file with the HTML markup which should be used to display it.
The Blocks are rendered in frontend with a flexible templating system which exposes the values of the module’s options to the template part, so they can be displayed or used in conditionals. But the more complex logic is handled via helper functions which are placed within the main Block class, to keep the template’s markup clean and easy to maintain.
Each Block’s frontend view can also be easily overridden by placing a custom file within the Theme folders, and nearly anything can be customised from the Theme using WP filter hooks.
The plugin also caches the output of each block separately, with the ability to set different expirations or to deactivate the cache only for specific blocks. Even the more complex landing pages load very fast in the frontend, which was particularly important for this project, but it is always a primary concern for us.
With this Page Builder, we can achieve an ever-expanding range of layout variants which has fulfilled SportBusiness’ needs and quickly became one of the main tools providing them with the level of flexibility needed to effectively manage their content.
Newsletter Builder
SportBusiness uses an email delivery service to manage and send their newsletters like most of our clients, and they were generally happy with the platform they use including list management and campaign workflow. They were not looking for full automated integration between WordPress and their existing system, and they were not keen moving much of the workflow into the WordPress admin. The only real problem for them was the amount of work needed to manually populate the email templates with titles, excerpts, and links copied from their website.
Many newsletter integrations allow to automatically inject a few latest posts into the body of the email, sometimes with basic filtering options as well. But for this project, we needed to provide the ability to cherry-pick posts and to display them with a few different styles and layouts, stacked in combinations which would vary for nearly every email.
To meet the requirements we decided to use an approach similar to the Page Builder, and we developed a Newsletter Builder based on flexible blocks which can be used either to create listings with manually selected articles, or sections with arbitrary text and images displayed in a few different layouts.
In addition to the blocks which are used to populate the body, a few general options allow to set up the email header and footer as well.
Multiple newsletters can be created and stored at the same time, so they can be used as starting points for the next email of the same type.
At any time the client can click a button and generate the full HTML for each email, based on the blocks and the selected options. That code is then pasted into the email management templating system and the newsletter is ready to be sent and managed from there.
WordPress is a Content Management System, after all, and in some situations, it is probably better to avoid forcing it to handle complex tasks such as bulk email delivery, newsletter list management, and the related analytics. Those tasks can be better handled by specialised services which are often already part of the client’s sales and marketing workflow.
Custom Search
We integrate Elasticsearch in most of our websites and you can read this article if you want to know more about the many benefits of this popular service.
Usually, our clients are more than happy with a standard integration, but for this project, we had to implement a highly customised search page with lots of filters and bespoke behaviours, which has been challenging in some parts, but also very rewarding when we receive positive feedback from the client and their users and customers.
SportBusiness has a large number of articles, some dating back 20 years. They also have two different post types (News and Features) which are spread across three websites that use similar taxonomies but also have their own custom elements.
They wanted to have separate search pages for each site, but we still decided to develop a single system which would work for all websites, using dynamically pulled filters and handling other differences behind the scenes. This approach also provided the flexibility of adding it to any new site that could be required as part of the Multisite setup.
First of all, we agreed to exclude the oldest articles by default from the search, assuming that none of their users will be looking for a “news” over 10-years old. Then we implemented a date-range selector so that the time-frame can be enlarged or narrowed.
We also tweaked the weights of the various elements considered by Elasticsearch, so that newer articles would be given precedence over older articles, even when the latter is actually a bit more relevant for the searched keyword. Additionally, there is also a dropdown selector to sort the results by date, newest or oldest first.
The various taxonomies are displayed in a sidebar and the terms lists change dynamically, showing only the terms which contain any result matching the keyword and the other selected terms, as well as displaying the number of results for each of them.
To complete the system, we also implemented an expandable search bar within the header, which is equipped with an auto-suggest feature and lists results in real-time based on the typed keyword. Thanks to our Elasticsearch customisations, even without using the taxonomy filters, those results are usually quite accurate and visitors manage to find what they needed directly from there.
Content Access, Subscriptions and E-commerce
SportBusiness offers various types of subscriptions to its customers, which includes access to different content within their three websites, and also to an external data-services.
Although initially, they preferred to continue handling sales and payments from outside of the website, we still had to implement a system to manage the access to the articles based on the user’s subscription type.
Similarly to other features in this project, we quickly realised that the client needed an extremely flexible and granular system, capable of supporting their ever-changing product packages and the different combinations of capabilities, as well as allowing for exceptions and temporary changes.
We preferred to avoid using WordPress roles and capabilities because it would have required to create a new role every time that the client introduced a new plan. Instead, we used a custom meta field to store a set of capabilities for each user, and then we matched the same options in each post to determine the minimum requirements needed to access that very article.
Using this method, the client could potentially have a single user with completely different access capabilities, as well as the ability to give free access to specific posts or to publish special articles which can be read by users having subscriptions that don’t share the same capabilities. And they could also modify the access requirements at any moment in a couple of clicks.
We also developed some WP-CLI scripts to easily edit users and posts capabilities in bulk, in case we needed to temporarily change access rules, or if they decided to add a new capability to one of their plans and deploy the edit to all users having that same subscription.
After the client started to use this new tool to manage the access to their content, the feedback was so positive that they asked us to implement an online subscription system as well, to allow their users to subscribe directly from the website.
The subscriptions had to integrate with the granular capabilities and content access, therefore they needed to have the same level of flexibility.
As for many other projects, we decided to use Stripe to handle the payments, because it is reliable and has a well documented along with having a powerful API. And also because their admin interface has proven to be very easy to learn for our clients, so they can manage payments and subscriptions directly from there.
We started by creating a settings page where the client can set some general options and then add as many plans as needed. For each plan, they can specify a few details, the related capabilities, and also add the ID of the Stripe product which should be connected with each package.
To complete the system, we implemented a flexible single template file for the checkout page, which can be used to dynamically render different payment forms that trigger different actions and subscribe to the various plans.
Each action then uses the settings page to determine which flow to follow and which capabilities to assign to the user. With this UX, the client can modify the options, add plans and change the subscriptions behaviour without the need to touch any code.
In addition to the subscriptions, the client decided to start selling access to single Reports, each as a separate product detached from the user’s plan. Fortunately, the flexibility and modularity of our system allowed us to re-use a good part of the subscriptions functionality in order to handle these new payment forms and capabilities. And the new e-commerce system was up and running in no time.
There are a lot of possible solutions when it comes to online subscriptions, but nothing is as flexible as a bespoke system, and this project has definitely confirmed it once again.
Conclusions
When all has been considered this project has been quite a journey, challenging in some areas but also extremely rewarding, thanks to the excellent results and the satisfaction of the client.
It wasn’t always easy to find solutions to accommodate the many changes of plans and new requirements, but we definitely got a good grasp on it after the first development phase. This is one of the main benefits of employing an agile approach to design & development. It’s crucial you keep the client included in the day to day conversations and update them — you need that close working relationship to get the best results.
Every time that a new feature was requested, we would have the space to do a detailed discovery and then implement everything so that it was the most flexible possible, trying to think in advance which additional functionality they might have needed in the future, and then write our code so that it would be eventually ready to fulfil those potential new requirements if necessary.
In the end, we provided the client with the website that they wanted. This would have been difficult to initially visualise into a precise solution so it demonstrates the value of going through the phases properly. It was also a very good exercise for our problem solving and development strategies, additionally giving us the inspiration for a number of tools and approaches which we can use in future projects.
