In the beginning of 2012 Club Brugge set out a new goal for itself and the team: bringing soccer back to its essence, back to what it’s all about: hard work, showing ambition,tenacity and perseverance. No Sweat/No Glory. Ofcourse, we jumped at the opportunity.

A better UX for the visitors and more conversions (read ROI) for Club Brugge trough persuasive architecture.

Every -good- website starts with a thorough information architecture. Our goal was to create a persuasive architecture to pull the visitors of the new site along predefined conversion paths they need to walk to accomplish their goals – and business objectives of Club Brugge, by offering them all the info and tools they need.

So we started with defining the business objectives together with Club Brugge. We then conducted a thorough study of the web analytics reports and a series of interviews to get a good understanding of the needs of the visitors.

Based on these insights we defined a persuasion strategy, conversion scenarios (for the most important business objectives) and a new more user-centered sitemap.

After Club Brugge validated the strategy, we started building clickable prototypes for the most important pages of the site and for the pages of the conversion scenarios.

Finally we’ve organized a series of user tests to discover usability and/or conversion problems with these prototypes and the new IA.

The website design, brand new.

We made use of the given blue & black diagonals to provide the design the dynamic look and feel we were looking for.

Naturally, the structure of the site was also taken care of and extra features were aded along the way, the content of the various subsites were brought together, the interactivity was increased, flows were made smoother and more intuitive.

The site is now responsive, which means that it can be viewed in ideal conditions on tablets and mobile phones. Fans can follow the Club Brugge players on Twitter and Facebook, share their thoughts through the site and chat in the Fan Zone. Thanks to ClubLive all games can be followed live supplemented with feeds, polls and the scores of all other matches in the competition.

The site reduces the distance between players and fans and brings everyone related with black&blue back together. With the help of Kunstmaan, again, clubbrugge.be is the heart of the football community where all who has black&blue flowing through their veins can find each other.

Club Brugge is ready for the future, not only on the field, but also in its online communication.

Using a solid framework and the benefits of OSS

After careful consideration we chose Symfony 2 as the core of our development stack for the Club Brugge website. We evaluated a lot of frameworks and content management systems and found that Symfony 2 was the best fit for three main reasons.

1. How it’s made.

A lot boils down to the philosophy and techniques used to create a framework. We believe strongly that it is impossible to create websites that perform under high load, with lots of features and integrations, for long periods of time, without a codebase that rigorously follows the best practices in software development, and is built keeping the interoperability with other systems in mind.

Using Symfony 2 we have the guarantee that all the components are of a very high quality. Together with a host of bundles that follow the same standards, we can focus on building the website we want to build, and not in writing and maintaining hundred of thousands of lines of boilerplate code, saving both time and money, but also cutting down in amount of issues during the lifetime of a project.

2. Who’s using it.

While not the primary reason, the popularity and community size of the framework is almost as important. Lot’s of people using it will result in a better tested codebase, more prebuilt bundles to increase functionality, lots of knowledgeable people to turn to for support. It also makes sure that there are available resources on the market, both in tools and human capital, to support the website during its lifetime.

More organisations and big websites using it will also ensure that performance, quality and security concerns will always stay at the top of the priority list for the developers of the framework. It also serves as a validation of our choice for the framework. At this time well known CMS software projects Drupal (8, the next version) and eZ Publish have announced that they will build on top of Symfony 2 for the same reasons.

3. The licence.

Symfony 2 and almost all of the available bundles are licensed under the MIT open-source license. It’s a permissive free software license that allows us to use, modify and distribute as long as we keep the license terms included.

Being open-source has a lot of advantages for us. First and foremost on security concerns. There is a maxim called the “Linus’ Law“, named after the Linux Torvalds, the creator of the Linux kernel that states “Given enough eyeballs, all bugs are shallow.” This applies to general issues, but is especially useful for security issues. The more developers work with and can see code, the faster flaws can be caught and fixed. This is the opposite of the security by obfuscation technique often used by closed source projects. In practice this means security flaws will be detected early, and fixed fast ensuring the integrity of the website and its data.

The second feature that sells open-source without much discussion, is “Freedom”. The freedom to work with, modify, participate in the codebase, but also totally avoiding vendor lock in with a community of skilled developers and companies. Last but not least, the cost. While there are lot’s of discussions about the total cost of ownership, we found that given a high quality open-source product, the lack of licensing costs makes a huge difference. It allows clients to focus their budgets on what they need, not on what is needed to build what they need.

Like we stated before, the community is part of what makes Symfony 2 the best solution for us. It would be hypocrite to benefit from this community and not give anything back. So we bundled our 15 years of experience creating content management systems with the latest best practices and build several bundles that allow us to create our websites and administration interfaces with the user experience and features our clients need. These bundles are released open-source under the MIT-license and available on GitHub and Packagist.

Some interesting features from a technical POV

Building a website for any sports team has to deal with traffic spikes around games, transfer periods and major competitions. If you combine this requirement with the knowledge that website performance has a direct influence on user satisfaction and Google search rankings, it was very clear that every aspect of the website needed to be very performant, at all times. While Symfony 2 itself is already very fast, we combined it with a Varnish setup and eased the implementation of our caching with the built in ESI capabilities of Symfony 2 and the LiipCacheControlBundle. We continuously monitor the performance, throughput and end user rendering with NewRelic so we can anticipate and correct performance issues before they pose a problem.

One of the basic requirements of the website was bringing as much of the 120 year history to the web. To manage 120 years of players (over 500), teams (A-team, women, junior teams, …), games, different competitions, etc required an extensive, yet easy to manage administration interface. Players are linked to games, teams and competitions and we keep track of every metric important in the game, minutes played, goals, etc to build accurate statistics. These statistics, combined with the scores of all other teams in the Belgian competitions are used to calculate the current rankings in the Belgian Premier League, since no available API’s were available.

Another important requirement was to treat the visitor/fans as the 12th player in the team (a soccer team on field is 11 players). Since it’s all about the game, a live module was developed to bring the game to the visitors. During games the entire game report is streamed in text and narrated sound to the visitors. Game days are very high load days, so we worked with the PubNub cloud messaging service to be able to push our messages to unlimited devices. We chose PubNub over websocket based solutions because an important usecase of the live module would be mobile visitors. The website is entirely responsive, but on older Android devices websockets need to fall back to Flash, a plugin the visitors needed to install manually. After the announcement that Flash will not be supported on Android anymore, it was a done deal. PubNub supplied us with excellent support, and a rock solid service.