Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
2nd August 2013

Arsenal FC: A responsive redesign

No strangers to high-profile projects, London agency Ostmodern linked up with old teammates Arsenal Football Club to redesign its dotcom. In this exclusive post-match report you’ll learn how a feverous pitch crossed the line.

Arsenal FC: A responsive redesign

Project: Arsenal – Web: www.arsenal.com | Agency: Ostmodern – Web: www.ostmodern.co.uk
Duration: 1 year – People involved: Multidisciplinary team – Project budget: Confidential

When it comes to English football and the online playing field, we’re talking something of a chequered past. It seems that high-profile and certainly Premier League clubs have only fairly recently woken up to the importance of digital marketing to widening a fan base. Previously, clubs were seemingly tied into cookie-cutter websites outsourced to a third-party provider, compromising that tribal sense of identity that is so synonymous with the beautiful game. Now in the age of apps, this approach has evolved to engage more directly with supporters and provide more localised hubs for covering news, delivering video and selling merchandise.

Clubs with an eye on pushing a global brand such as Manchester’s United and City clubs, Chelsea and indeed Arsenal are naturally at the forefront here and have employed the services of top independent agencies to get results. Ostmodern are one such creative force who, with prior working experience, were asked in 2012 by Arsenal’s technical partner Rippleffect to completely overhaul its dotcom presence. With a background in VOD and content delivery spanning projects for clients such as BBC, ITV Channel 4, EE, Virgin Media and indeed the Australian Football League, this 20-strong team sure boasts the requisite skills. “The challenge was to make most effective use of the deep content generated by the club. Including photography, editorial, player profiles, metadata and video, and observing how the in-house editorial team produce content and how their user base consumes it was key to our approach,” explains project manager James Cambourne. The task would encompass a ‘root-and-branch’ redesign improving the UI experience, introducing a scalable backend, and even drawing up a new editorial strategy for the site itself – all before the February 2013 launch. With a final result befitting what most Arsenal fans are accustomed to, welcome to Design Diary’s full-time play-by-play analysis of Arsenal.com.

Arsenal FC: A responsive redesign

Experimental formations

A big part of any design project is establishing a relationship with the client. Once this has been put into place the next step is take a look at the client solution. However, this can often involve a voyage into the unkown and a journey of discovery for the designers themselves. For Ostmodern’s development stages, cohesion was needed between the two sides of the build, with a process of prototyping proving most useful. Head of UX on the project Richard Amos details the strategies adopted when it came to testing the development waters. “One of the great challenges of a separate build and design team is clearly articulating systems and interaction design nuances. Historically we have found that when the best ideas get ‘lost in translation’ due to this separation, it is often the articulation of the idea that was the weak point rather than lack of willing from a developer.
“To mitigate this, we invested time in creating a HTML, data-driven Python/Django prototype running on Heroku. This let us experiment with some of the core concepts behind our data models. We spent a considerable amount of time exploring metadata concepts such as ‘Topics’ and content tied to matches, but hadn’t been able to demonstrate it in the real world.
“We were able to stress-test how user flows would work within these content structures and demonstrate to the technical provider how we envisaged this data would appear on a real site. We also experienced significant challenges with the ‘mega’ drop-down menu and while the idea seemed sound on paper, it wasn’t until we fully prototyped the rollover behaviour that we were able to articulate the nuances to the build team.”

Arsenal FC: A responsive redesign

“Our relationship with Arsenal began in 2010 when they asked us to redesign their VOD (Video On Demand) service, now named Arsenal Player”, says Richard Amos, head of UX, when asked how the project originated. “From the outset it was emphasised that Arsenal Player was just the start of a redefinition of the global brand. It became apparent that we were evolving their content offering beyond the capabilities of the rest of their ecosystem, and it was a natural evolution to move onto Arsenal.com afterwards.” From this organic progression and working trust, Ostmodern were always a perfect fit to re-energise the wider online presence given its finer perception of what was required. “The website brief was ‘evolution, not revolution’ from a technical perspective, but it was clear from the outset that the existing site would not remain in any distinguishable form,” Amos continues. “The first phase of our approach focused on the broader themes that surrounded Arsenal.com. Working with the editorial team, we dissected their current editorial offering and mapped out simplified models of the content. This revealed the breadth, depth and quality of the content and highlighted the challenges and complexity of the existing site infrastructure. Our observation that Arsenal.com was overly complex and could be simplified struck a chord with Arsenal’s editorial team and ‘simplification’ became the starting point.”

Arsenal FC: A responsive redesign

This appreciation of the editorial aspect became a strong thread for the team, having been identified as the bedrock for the existing site’s appeal. Facilitating this content generation would be crucial and as Richard Amos elaborates, an awareness of practical workflow was invaluable. “As a company with a history of strong journalism, Arsenal’s editorial team spent considerable time with Ostmodern helping us understand their workflow and editorial style. It was key to marry our perceptions of their current offering with what they were actually attempting to achieve with their current tools. While understanding existing workflow was important, it was just as important to find synergy in each other’s ambitions and influences. We both had bold ambitions for the site as a concept, and a significant portion of the early concept work revolved around articulating and understanding each other’s aims. As the project developed, Arsenal’s website manager worked alongside our team in our Shoreditch studio. This ensured that he understood all aspects of UX, and could provide his own knowledge of the Arsenal brand as we modified and created new brands within the new framework. Most importantly, we integrated him into the team who were responsible for rolling out imagery throughout the site, with the expectation that eventually he would take this role on independently of us once the site was complete.”
With editorial content established as critical, the team could drill down into the information key to hooking visitors back. Regular updates and fresh stories when it comes to rumours, match feedback and player fitness offered a neat sense of the excitement and anticipation of fans. “From website analytics, it was clear that news was the reason people came back to the Arsenal site multiple times a day,” stresses user-experience architect Lucy.

Hughes. “In terms of concept, we wanted to transform news reporting from a chronological blog-style presentation to a more dynamic news journalism model, so that fans could follow stories as they emerged and evolved over varying periods of time. By modelling the club’s weekly schedule against the annual schedule, we built an understanding of the ebbs and flows of Arsenal’s coverage. Through this, we saw the patterns in expected news revolving around the club’s fixtures, versus unexpected news such as injuries, disputes and headline news events.” In black and white however, all of this stuff can feel slightly cold once removed from the high-energy fervour of the touchline. Possibly one of the biggest perks of this type of commercial project then, is in getting your hands dirty with some good old fashioned ‘research’.
“It is easy to get lost in ‘the web’ and so to get a sense of the true Arsenal experience, the project team went to a match. [We] immersed ourselves in the anticipation and consumption of news and stats around the match and within the Emirates Stadium,” beams Hughes. “The challenge then was to translate this ‘buzz’ into a coherent and efficient tool to communicate the club’s voice to the fans. We knew we had the content to keep fans hooked, so the challenge was to present it so that fans could see the latest news and easily follow a story through its life cycle. This involved incessant sketching and prototyping until we were happy to expose it to fans.”
This kind of reconnaissance work extended to the site visuals, with Arsenal keen to offer a clean creative slate.
“A detailed tour of the Emirates Stadium enabled us to take visual cues from physical aspects such as the industrial architecture and themed interior design, including the rather natty toilets!” laughs Ostmodern’s head of design Chris Randall. “The end result was a set of mood boards that focused on photography, typography, architectural form, colours and textures, article formatting and digital language. We initially explored several conceptual routes, focusing on the general balance of typography, photography and graphical UI components.”
Once these core ideas were approved, the team could settle on a formal set of principles used to inform the frontend build. “The grid was an important factor; our solution had to be adaptable across platforms while still providing a level of control that was crucial in meeting Arsenal’s editorial and commercial constraints,” Randall explains. “Multiple screen densities influenced a lot of our design thinking, using pure CSS styles where possible.”
Some of the lessons here had indeed been learned from the Arsenal Player project, where trying to predict iterations of probable content proved restrictive. Content templates that had been previously designed to ensure consistency became prescriptive and often shunned as a result, as James Cambourne testifies. “The new Arsenal.com homepage framework was an antidote to this problem, designed in a modular format allowing ‘clustering’ of stories, enabling editorial to react to shifts in the team’s focus and activity. For example, when Arsenal’s first team suffered a number of significant defeats, there was a vacuum of news. With this in mind Arsenal used our framework to tell their big story of the year, the success of their Ladies team. Traditional prescriptive layouts and architectures may have forced this content to be buried.”
Fans can be fickle in the face of adversity, so you would suspect a football site’s target audience to be a tough crowd. All that groundwork on look, feel and voice would be thrown to the lions. Arriving just after the crucial Christmas and New Year stages of the 2013 Premier League season, the designers could only watch from the social-media turnstiles for affirmation. “The relaunch marked a sea-change in the approach to editorial and design within the site,” Cambourne recalls. “We monitored Twitter and Facebook to gauge reaction. There were those who didn’t like such a drastic change, but as people discovered and learned the benefits of the new design and functions, it was fascinating to follow the evolving opinion. We were pleased that the overwhelming majority were happy with the new website.” Yes, all was well… until the next weekend at least.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • web design in hyderabad

      Thanks for you valuable information in responsive redesign…

    • Eddie May

      unlike the club, it might win some silverware!