The Problem

A New Website For A New Audience

The previous SoccerBible website was very dated in design and had many technical limitations due to being on a legacy platform. The company was also at a stage of pivotting towards a slightly more sophisticated brand perception which would also appeal to a wider, older demographic. Previously, the primary audience was teenage football fanatics. A complete overhaul was required to bring the site up to date and to reach a top quality standard. The previous site was 'Desktop Only' so creating a fully responsive site with a strong focus on mobile was required.
‍
Content & Engagement
‍The high quality articles and photography published needed to be showcased in an engaging and easily digestible way. It also needed to be simple and quick to create and publish original content via a content management system. In terms of user engagement, focus was required to increase the amount of articles being viewed and also make it easy for customers to share content, ultimately driving more organic traffic.

Generating Revenue
‍Although primarily an online publication, SoccerBible also produce a quarterly print magazine. This was required to be promoted and sold via the website. Additional revenue opportunities needed to be included such as advertising and product affiliates.

SoccerBible Magazine.

What does success look like?

Core Metric = Weekly Active Users
‍Increase weekly active users by 10%
Start generating revenue through the website

Quantitative & Qualitative Research

Data Analysis

Although the previous site had limited tracking, we were able to identify the most popular topics and features via a series of stakeholder and customer interviews. An example of a key topic was a feature called 'Boot Spotting'. A weekly article referencing the best boots worn by football players around the world. A key insight learnt was that users were typically only viewing and interacting with 1-2 articles per session before bouncing.

Key User Personas

User Personas

To get an idea of the existing and desired customer, a set of personas were created. These personas were used throughout the process to keep the customers needs top-of-mind when coming up with solutions.

Key Customer Insights

• Only visit to view 'Boot Spotting' articles
• Difficult to navigate and find content
• Dated design and functionality
  Forum rather than a publication site

• Very slow to load anything
• Unusable on mobile
• Needs a refresh to match the brand and content

Design

Design Ideation

Using the research gathered, it was clear that a simplified navigation, dynamic article layouts and engagement tools would be major players in the re-design. Before any designs were created, an audit of the existing navigation and content was carried out. Identifting the most and least popular categories, combined with business requirements, a proposed re-structure was presented to stakeholders and agreed. The main change in the re-structure was a reduced, but broader range of categories which provided increased visibility of relevant articles.  

Once the information architecture was signed off, it was time to start designing the new page layouts. Starting with sketches followed by wireframes, the new site began to take shape.

Wireframes to Prototypes

With the initial wireframes developed, a set of newly designed UI elements were applied. Using InVision, a prototype was created which made it quick and easy to experiment with potential content flows.

Wireframes to Prototypes

With the initial wireframes developed, a set of newly designed UI elements were applied. Using InVision, a prototype was created which made it quick and easy to experiment with potential content flows.

Simplified Search

I introduced a simplified 'All-In-One' search UI, which combined activities and locations in both 'list' and 'map' views. Cleaning up the UI, improving the search algorithm and reducing load time all compounded to achieve a huge 400% increase in search conversion.

Encouraging Engagement

The task to increase user engagement was broken down into a set of sub-tasks. Each relatively subtle, but combined would create a set of triggers for continued browsing.

1. Showcase Products
‍The majority of articles featured or contained references to products. A dedicated space for these 'featured products' was added to the article. Each product was set up as an affiliate link and diverted to an e-commerce site where the item could be purchased. Advertising space was also allocated on most pages to provide an additional revenue stream.
‍
2. Next/Previous Article
‍A quick and easy way to navigate between the latest articles without having to return to the list page was made possible by adding next/previous links to the end of each article. A clear CTA with a reference to the article title increased the amount of page views per customer.
‍
3. Related Articles
‍A standard feature of most consumer sites, but something that previously did not exist was a 'related articles' row. Suggesting relevant content based on the customers recent activity improved the discoverability of relevant content.

4. Comments
Perhaps one of the strongest ways to create engagemnt is to provide a platform for customers to express their thoughts and interact with other users. Allowing comments created additional value to the content and provided a good reason for increased repeat visits to the site.
‍
5. Newsletter
Another touchpoint, email, was required to increase return visits and engagement. A simple set of curated articles were emailed to customers after signing up. This was also a useful tool to gather more customer details, ready for any personalised content.

Sharing To Millions

With the millions of SoccerBible fans being so heavily engaged with social media, it made perfect sense to make sharing a key part of the user experience. Having a fixed CTA to 'share' visible at all times when reading an article made it quick and easy to promote content.

The SoccerBible Store

In addition to promoting products and advertising within articles, another large part of revenue creation was provided by the direct sale of the flagship SoccerBible product, the magazine. A Shopify store was set up to house inventory which included the magazine, artwork and other merchandise. Including a link to the store on the main website and vice versa, the dual content/commerce platform provided a complete package.

Testing & Rollout

Testing was continuous and embedded within the whole process. Once a set of designs and prototypes reached completion, they would be tested using a combination of in-person and remote user tests. Monitoring behaviour and interviewing testers highlighted any issues or bugs, ready to be iterated and tested again. As well as testing on existing customers, new users would provide vital additional feedback. Existing customers had already built up habits through years of continued use of the site. Being careful not to disrupt the existing flows too much, some design changes were made which would take some initial time to adjust to. Testing the changes on new users validated the design decisions without being biased towards the historic behaviour.  

A beta version of the site was initially sent out via email to begin the rollout process. Gradually increasing the amount of users provided a great way to iron out any issues before the full release.

Business Impact