In 2012, we and Sunderland AFC launched the first responsive club website in the Premier League. In 2016, we have broken further new ground and launched the Premier League’s first mobile-first club website, and with it, a bold new vision for Sunderland AFC. See the site here.
As Head of Design, my role within the project, beyond that of defining the visual direction, covered the planning and determining of processes and ways of working, and, working collaboratively with our lead strategist, Olivier LeGris, determining the user experience, site structure and approach.
In the hope that this proves useful and you may gain some level of insight from our experiences, I have outlined a snapshot of our processes, the foundations of our design system, and the nods to history that have combined to create this all new Sunderland AFC website.
Our approach: War room
During larger projects we set up War Rooms – rooms set aside for the project in which the team creates a dedicated space for the duration of the project.
Giving a team the space it needs to work, to discuss and to explore ideas, away from the distractions of the everyday working environment, is fundamental to the success of our projects. In this space the team can escape, and immerse themselves in a very focused environment. It becomes a central hub, where the project is shaped and defined.
Over time the walls begin to fill with visual research, sketches, ideas and concepts. The site’s Information Architecture plans are developed using Post-its, and take over one corner of the room. The project plan is up and visible. Any existing brand language has a space – photography, typography, collateral, tone of voice etc.
As the project progresses, the room evolves. Sketches become prototypes, wireframes and then mock ups.
All client meetings are held in this room too – It helps keep everyone up to date, allows the ideas to flow and gives a tangibility to projects not often experienced when work is simply presented.
One of our tenets is Co-Creation. We believe in collaborating with our clients and partners. Co-creating and co-locating with them to get better work in less time. We don’t subscribe to the slow-moving, big-agency model: we organise ourselves into adaptable teams to cut out the to-and-fro and get on with doing great work. We’ve been doing things Agile for years and always design a workflow and team with our clients to get the best results.
On the Sunderland AFC project we were lucky enough to work in conjunction with Sunderland AFC’s experienced and dedicated project team – Stuart Vose (Head of Digital), Kate Smith (Digital Communications Officer) and Alex Middleton (Head of Design). Collaboration at this level is a cornerstone of our project process and means all members share in creating a unified direction and have a complete understanding of the project at all stages.
With Sunderland being in the North West and us in London, we weren’t always able to meet in person. We needed a solution that would allow us to collaborate remotely. On the design side we used InVision, a fantastic prototyping, collaboration, and workflow platform that has been built with this is approach in mind. Our mood boards were created as InVision’s Boards and meant that both us and the team at Sunderland AFC could add content, share resources and comment as the designs evolved.
Clickable prototypes were also created across both mobile and desktop breakpoints – we tend to design to the extremes and allow the content to define the mid-size breakpoints. Prototyping helps to visualise interaction and test ideas, but also more importantly, allows the team to engage with the product in the environment in which it will be used.
As with all of our projects we take a mobile-first approach. This isn’t just around designing for a small space, but defines every aspect of the site’s design. We structure our hierarchy around mobile browsing. We think about what is truly important – and build up from there. We validate font rendering on mobile devices, and observe how different light levels affect legibility. We look at image compression and page weight. And so on and so on.
The most important aspect of consideration, is our focus on touch interaction. This isn’t just removing hover states or simplifying the site experience, but concentrating on touch means we focus on touch target areas – the area of clear space required around an interactive element, such as a button, that allows the element to be interacted with without interference.
This touch target area helps define our baseline grid, which in turn defines our vertical grid. It defines the height of list items and buttons, form fields and menus. In short, it is one of the most essential measurements in our design process.
For a couple of years now we have been developing an ethos around the way we design and build our sites. This ethos is built around flexibility and the knowledge that our clients need more than just fixed layouts and restrictive templates, they need fluidity and freedom, as well as a need to modify and evolve their digital estates at the spur of the moment.
As such we have developed a purely modular approach to our site designs, where we create design systems – approaches to typography, image use, colour, structure, grid systems and flexible components, rather than creating collections of fixed, inflexible web pages.
This approach is based on Brad Frost’s “Atomic Design” principles, but we have modified it into a slightly more free-form approach.
On the Sunderland AFC project we wanted to define a system that would give the Sunderland AFC’s content team the ability to create any permutation of page they wanted, and this meant giving them a library of components that could be assembled in any format and any order. We decided the best approach to achieving this, would be to use Cards – self-contained, small groups of elements that generally have a single purpose – e.g. a link to a news article, a snippet of information or a link to an upcoming match. Cards are the foundation of our system, they are highly versatile and due to their simple nature work fantastically well across mobile and responsive sites.
Firstly we set about defining a core set of Cards, from the simplest text only article link to more complex Cards such as Fixture or Event Cards. We then defined all of the various permutations, the rules surrounding their use and how they could be work together.
The next step was Content Modules. These are sets of Cards that combine to form content blocks e.g. a News Listing module, a Featured List or a Latest Video module. The beauty of Content Modules is that they are fluid and not limited to the type of cards they can display. For example, a content editor could combine a Content Card (i.e. News item), a Game Card and List Card to create a dedicated Next Game Module. Or, they could combine a Video Card and two Event Cards to promote hospitality options.
Defined Modules on the other hand differ from Content Modules in that they are unique items that serve a sole purpose. Examples of Defined Modules are Hero modules, Fixture Lists or Social Panels. These, along with content blocks, tend to form the basis of our Page Types – loose starting points for creating pages.
We know, for instance, that at its most stripped down, a news article needs a title, written content and an attribution, and it is these elements that form the news article Page Type. Nothing more, nothing less. However, with our modular approach, the team at Sunderland AFC can build on this in any number of ways. They can embed video content, images, pull quotes or galleries. They can add responsive promo panels, or full width image galleries, player cards, related news modules, fixture lists, tables or maps. In fact, anything from our module or card set can be added to the page, in any order they wish.
By designing and building in this way, our clients are not restricted by a small set of limited templates, nor are we required to design and build a site with 20 or 30 unique templates. It is a fluid system that allows for the creation of flexible page layouts which are not tied to traditional templates, giving content teams the freedom to adapt and modify their sites as needed.
The end result, this flexible system, is fantastic, but getting there can sometimes be tricky. When designing at a component or card level rather than page layouts, you need a client with confidence. A client that can see and understand the bigger picture, and we found that in the team at Sunderland AFC.
The vast majority of design reviews and updates were done purely at a card or module level, and on the very rare occasion we put a page together, it was done simply to illustrate the possibilities.
There is no doubt in my mind that this approach of working from a component level, designing systems and following mobile-first principles, makes for a far better final product and I strongly believe that it is our open and collaborative process, combined with a strong and confident team that enables us to work in this way and to create websites as flexible as the new Sunderland AFC site.
Strongly shaped by industry over the centuries, from large scale coal mining and a world leading shipbuilding industry, Sunderland has a rich and proud history. In fact, one of the reasons the ‘Stadium of Light’ (built on top of the former Wearmouth Colliery), was named as it was, is as an ever-lasting tribute to the region’s mine-workers and proud industrial heritage.
Another important and fondly remembered part of Sunderland AFC’s history was their time at Roker Park. Designed by world-renowned architect, Archibald Leitch, and with its distinctive latticed truss work on the Grand Stand balcony, it was Sunderland AFC’s home from 1897 to 1997.
Whilst the new website is about looking forward, it was important that we included historical references in the new design. References that mean something to the club and the fans, that elevate the site from any other football club, into something uniquely Sunderland.
As such, we brought in subtle coal textures as selectable backgrounds to some of the modules, and the Wearside Bridge spans across the site’s footer. The angle used across typographic headers comes from the fretwork of the Grand Stand balcony, as do the play icon on videos, the paddles on carousels and the quote marks used in pull quotes. Elements like these are threaded throughout the new design, anchoring Sunderland AFC’s new vision with their roots.
This isn’t about gimmickry, rather offering subtle reminders to the past, and bringing a knowing smile to those dyed-in-the-wool, born and bred Mackems.
If the adage ‘You are only as good as your last bit of work’ is true, then we will stand proudly by the new Sunderland AFC’s site.
Big, bold imagery, a strong colour palette and clean, stripped-back typography combine to give Sunderland AFC a new, more confident visual language. One that builds from their offline collateral, giving them a consistency and flexibility for new digital work.
The full screen navigation, neatly segmented into 3 key sections – commercially focused links, main site links and directional links, not only makes navigation easier for the visitor but also ensures more parts of the business have a presence. Plus, it allows for long-term growth, should it be needed, without hampering or cluttering a more traditional menu system.
Increased commercialisation, a driving force behind the project, was achieved through subtle placement and interspersion, with consistent navigation items, flexible content modules for events and hospitality (colour coded for increased standout) and responsive promo modules, over the more traditional use of ubiquitous banner ads and sidebars.
The versatility of the modular card-based approach gives the content team the ability to create areas of light and shade on a page. Bolder, more stand-out features nestle amongst cleaner, simpler sections to add variance and bolster interest.
This combined with an increase in the presence of the women’s and academy teams and a more fluid approach to highlighting non-football related activities means that the new safc.com has more to offer a wider audience, something that differentiates it from the majority of football sites out there.
As a project it brought together a number our existing processes and merged them with our new ideas into one seamless, well-oiled machine that was a joy to work on.
To summarise, a few key points to take away:
- Working at a card level and up helps refine the way in which we think about our sites, and puts flexibility of content at the fore.
- Collaboration is the key to success and working directly alongside a strong client team results in a far better product.
- Immerse your team in a dedicated war room. The benefits will soon become clear.
- Commercialisation doesn’t need to be overt. Threading the needs of the business amongst the needs of the fans is a far better approach.
- Look to the future but remember the past – it’s what each club is built on.
- And, remember what makes a club truly special – it’s community of fans. So give them something to smile about.
Wise men say, only fools rush in, but I can’t help falling in love with you. Sunderland!