The assignment
TVmatchen’s goal with the redesign was to get a refreshened, up-to-date appearance and an improved user experience. They also wanted to migrate away from their custom PHP solution and instead leverage a well proven technical platform that would work as a solid foundation for further development of the project.
The website is a popular product with a faithful audience and a clear focus: quick and easy guidance to televised sports events. Financially, the project is driven by advertising and partner programmes. The people running TVmatchen are capable web developers themselves, which means that they needed to be involved in the actual development of the website, so that they could do further development themselves later on.
Choosing the technical platform was a non-issue in this case, since the client had decided they wanted to go with Drupal. The project isn’t necessarily the kind of use case where you would consider Drupal as first, but as you’ll see, this powerful and flexible framework would prove to be a good fit for the project.
Goals and ambitions
With all of the requirements in mind, we set out to develop a modern, good looking design for the project as a whole, and a web layout that would give users a very quick overview of upcoming games. The website should have a high level of usability and feel easy and fast to navigate. Search- and filtering functionality needed improvements, and the administration interface had to be quick and easy do deal with.
Technical strategies
When the project started, Drupal 7 was still in beta and not production ready. However, TVmatchen.nu seemed to be very well suited for an early adoption of the new version, simply because it required very few add-on modules. One reason for this is that some of the most advanced features of the site was to be implemented as custom JavaScript/Jquery code, but also because we were able to keep the bulk of the match/channel data import features from the existing site.
In the end, we released the project only weeks after Drupal 7.0 was released, which must be considered very good timing. We’ve found the new version to be rock solid, except for a couple of remaining bugs in add-on modules.
The user’s perspective
Comparing the old site (to the right) with the resulting new TVmatchen we like to think that the disposition of the page is a lot clearer. The logo stands out on its own an provides an immediate point of recognition. The most important information on the page – the match list – is emphasized by its size and the contrast against the darker background. It’s wider than in the old version, accommodating to users’ generally larger screen size, and it has a new expandable interface for things like notifications etc.
Above the match list is the new filter tool which blends in more and tries to stay out of the way for those who don’t use it. Those who do, will find that clicking on a sport for instance will take effect instantly, without reloading the page. The new filter uses JavaScript to show or hide matches based on the filter state. This can then be saved as a personal preference with just a click of a button, stored as a long term cookie in the user’s browser, rather than having to register an account.
In the sidebar, the editorial content is tagged with a light blue stripe which floats outside of the actual sidebar width. Ads are positioned above the page and inserted into both the main column and the sidebar. Sometimes there are also ads outside of the main page area, on the right hand side.
At the bottom is another novelty, a navigation bar for jumping between the days in the match list (which shows the next seven days by default). The day links also change their highlighting automatically when scrolling the page manually. There are a number of other small page elements, such as links for subscribing to team notifications, adding games to your calendar, sending them to a friend, and submitting missing games to TVmatchen.
Designing the new TVmatchen has been a challenging task, since it involves a fairly large amount of information that needs to be communicated very quickly. The existing user base needs to feel that the new version provides a similar or higher level of usability compared to the old site. After a very thorough design process, we have none the less made some design adjustments based on user feedback after the launch. Another design related challenge is the ads – it’s difficult to predict their visual impact on the page, and they need to be both separated from the main content and clearly visible at the same time – but we think we have found the best solution possible.
Standard components and custom solutions
The technical implementation is fairly simple at its core. For those who know Drupal, here’s a quick overview.
The site’s main content is handled by a single node type and a single view in Drupal. All meta data, like sports, teams and channels, are implemented as taxonomies. This is something that would not have been possible in Drupal 6, since these entities also needed additional fields added to them. Channels, for instance, need to have a Logo field, and before Drupal 7 the only way to do that was by using nodes.
Hardly any contributed modules apart from the most fundamental ones are needed. Custom modules are used partly in the form of features that hold most of the conventional Drupal building blocks, and partly to provide some custom tailored functionality, such as importing match information from an external database and providing email notifications.
The data import is done by custom PHP scripts, written by the client, that scan a number of data sources on a regular basis. The scripts populate a temporary match database which is accessible from within the Drupal administration interface.
Another feature that stands out from a technical stand point is the custom built JavaScript/jQuery match filter. In short, it works by having the Drupal back-end provide the front-end with all of the available meta data. Using that information, it’s able to update the match list instantly based on the user’s selection.
This front-end functionality turned out to be a challenge for some browsers with slow JavaScript engines. We have continued working after launch to make the page as responsive and quick to load as possible, partly by disabling some of the functionality for slow browsers.
The back-end benefits from the decision to put all filtering functionality on the front-end. Nearly all page loads use the exact same HTML document, which means it can be cached very efficiently.
