White label sports application – UX and design framework.
Our brief was to create a white label solution for the best of bread sports site. It would need to be capable of being the foundation for any Football club but potentially any sport over time.
1. Product vision
After many years of building digital sports experiences, we wanted to take that learning and create a next-generation product that would supply the majority of the fans and the clubs’ needs right out of the box.
Objectives
- Create a compulsive business model utilising existing best practice relationships with 3rd parties.
- Leverage best practice UX for amalgamating digital channels into the best match-day experience for the fan.
- Create a digital channel for fan engagement and monetisation before during and after the match.
- Design and build this experience using best practice UX and UI strategies
After years of fan engagement research, we had a wealth of data and analytics to draw upon in defining the user needs but we did not have as much knowledge about what kind of service the Clubs expected and needed.
We conducted several meetings with existing sports clients and sports organisations to better understand those needs.
- Many clubs required guaranteed revenue streams and those relationships needed to be part of the package.
- While fanatical about the club and its success they were a business and driving revenue through fan engagement was key.
- The maintenance and upkeep of the channel needed simple / automated to free up internal resources not demand more.
- The solution had to be omnichannel. It needed to pull together the customer experience and mobile would be key to this.
- Whomever they chose to work with needed to understand the sport and how to communicate with there fans
- The brand was important but often this would be prioritised under revenue. The clubs wanted to look great but without necessarily spending large amounts or branding.
- Where the budget for branding was available, say for Premier League clubs, the solution needed to be fully customisable.
2. Product architecture
Design an extensible information architecture
The architecture had 3 main focuses.
- Integration of 3rd party services for ticketing, Shopping, VOD, Registration, Statistics, and brand activation
- Matchday live coverage and team information
- CMS content such as news and hospitality
Integration of third-party data, content and functionality
Statistics – The major part of this integration would be with OPTA statistics where we would pull all match club fixtures and player details from. OPTA provides comprehensive service which we then push out to web and app platforms.
Video on demand – This is handled by a third party and we build endpoints into our templates to pull from their APIs. This includes registration and payment.
Brand activation – This is a large source of revenue and the placement of these promotions is handled with an agreed real estate across responsive web and apps.
Shop – The business model assumes a third party shop which is linked out to but a set of promotional components allows the clubs to place promotions across the site e.g. buy this shirt on the players’ profile page.
3. Application design framework
Based on Foundation
It was agreed by the technical team to use Zurb’s Foundation as a starting point for developing components. This meant that we could quickly develop Sketch components based on this and using the Atomic design methodology we created a based design system which could be easily changed as the design process progressed.
Powered by OPTA
Many of the more complex components were delivered using not Foundation but widgets supplied by OPTA and or API feeds from OPTA.
Wireframes
As we were basing this project on known components, mostly from Foundation, Stream and OPTA the UI functionality was mostly known. Because of this, we decided to skip the wireframe sketch stage and jumped directly into wireframes templates made up of re-skinnable components which could be customised to any sport or club in future design implementations.
Design prototypes
Having built the majority of components in Sketch it was easy to develop interactive prototypes for mobile and web using Flinto. These prototypes were used to inform stakeholders across the business and partner network on developments and to iterate the design based on feedback and usability testing.
Building the Design Framework
For this we used Zeplin. The built-in functionality allows you to create design frameworks directly out of Sketch. This was invaluable and allowed us to proceed quickly to the front end build of a white label framework. Zeplin was used as the main source of reference during the build along with Jira for the definitions of done.
5. Application delivery
Now that we had architected designed, built and tested our white label product it was time to apply this to a real project. The platform had been built to support responsive web and App via API feeds and CMS content pages.
Of course, there are many complexities specific to each client, partnerships may vary but in this case, we had created such a compelling proposition that we immediately had 2 clubs who wished to be ported to the platform.
The first was an existing client Swansea who required a complete redesign alongside the platform move. The second was a new client Cardiff who wished to keep the brand customisation to a minimum. These were the perfect project to prove the product design and allow us to learn and improve.
As you can see from the finished work the sites look completely different yet underneath the visual layer they are almost identical.
If you would like to talk…
