Case Study: Betfred Live Streaming for mobile & desktop

Putting fans first by providing quality streaming service entertainment.

Problem Definition

Betfred’s main competitors provided streaming services to existing customers. To keep up with the changing marketplace, Betfred needed to provide this feature and set the benchmark for what a gambling company could provide to their customers.

Betfred wanted to provide a streaming service to customers before the football season.

At the time Betfred only provided horse racing streams to its customer base. The company’s ambition was to cover multiple sporting events. To do this they needed to acquire more sports streaming events from a third party provider.

To meet this demand and handover the product on time, we had to go into development without much knowledge of the streams provided until late into development.

Audience

Naturally a lot of Betfred customers are sports fans & we wanted to provide them with a service to which they could watch their favourite sporting events from the Betfred Sportsbook mobile app and desktop site.

We wanted customers to be able to keep track of sporting events from the app/website and not have to look elsewhere to watch matches or check on results.

This product is for anyone interested in watching sporting events such as horse racing; football, greyhounds, tennis, ice hockey, basketball, badminton and even a few volleyball matches!

Betfred customers no longer need to watch a match from their tv, they now have the opportunity to watch sporting events from their device. This is particularly handy for people on the go or that have long commutes, they can now watch live matches from their mobile or tablet to always stay in the know!

By providing this product we hope to make Betfred customers lives that little bit easier by them having quick access to live sporting events when and where they need it.

Team & My Role

2 Front-end Developers (1 for desktop & 1 for mobile)

2 Project Mangers (1 from Betfred & 1 from Degree53)

1 Middleware developer

1 Designer (my role)

This project was run through our Betfred agile team in Degree53. Which is usually for small works projects. There was a push to get this product out before the football season began. We were delighted to be working on something a bit meatier & because of our fast pace, we were confident we could deliver it on time and in budget.

Due to the short time frame I had on this project (2 weeks for design and ux on mobile & desktop) I carried out competitor analysis and looked at other sports streaming services such as BBC and Eurosports. Writing down the good and bad features of these products helped me put together actionable recommendations that were within our resources. Based off these recommendations the requirements were then reworked so we could provide something unique to the sports gambling market.

I sketched out wireframes using pen and paper; I find this quicker than using a desktop tool, especially under time constraints. These were then used to peace together user journeys for both the mobile site and the desktop site.

Quick sketches of the mobile site UI layout

When creating the visual designs/UI I started mobile first. I prioritised the mobile site first as I’ve worked on this product for nearly two years in the agile team, so I knew I could quickly and efficiently create a working prototype in Invision. Having helped build the Betfred.mobi pattern library also helped speed up the process and helped make sure all typography, colours, and iconography used in the project were on brand.

Testing of the prototype was carried out inhouse due to time constraints. If I can’t test a product on actual customers I will make sure to at least get others to play around with it and watch how the interact with it. Depending on the sensitivity of the product I will get friends to try out prototypes, you learn a lot by watching people (that don’t work in tech!) use your prototype. They see and use things completely different to you!

I’ve worked closely with the agile team for quiet a long time now and if ever I have query about how filtering would effect the middleware or if the guys come to me with a question about the user journey, we can communicate effectively… and have fun in the process! I always try to get the whole team involved as early as possible. Designing a product isn’t a one (wo)man job and there is a need for everyones perspective and thoughts to get the job done.

Constraints

Business constraints

Time frame — I had two weeks to design this product for the mobile site and desktop site. We also had to have to product developed, tested and shipped in time for football season in just under two months.

Resources — due to the live streams being provided by a third party provider and a late delivery of the streams, our middleware developer was put under a lot of pressure close to the deadline.

Technical constraints

Betfred.com site legacy code: The .com site is old and due to the time constrants and developer resources the betfred stakeholders and Degree 53 decided it best to make a microsite — rather than build on top of the existing website.

Live Streams were provided by a third party so we were reliant on them to provide the streams and documentation on time.

The streams could not be responsive on the microsite due to legal issues of streams only being a certain max width.

iOS devices have a built in video player that goes full screen once a video is tapped. Sadly we could not get around this as the Sportsbook app is a container app and not fully native.

Retrospective

I feel the problem we had identified definitely was the right one. There is a demand of customers for a streaming service & based on feedback we can confirm this now.

Both the mobile & desktop site’s were delivered before the deadline to Betfred and the products went live before the football season! Yay!

Sports streams provided by a third party sat in an iframe, this meant they had to provide the player components as well. Communication got lost between the three groups and we ended up launching the product without a player UI. This meant that videos would start as soon as a customer landed on an event page, which can get pretty annoying after a while! If a customer wanted to lower the volume they were reliant on their device to handle that. Frustrating, but a good learning experience in always making sure everyone is on the same page.

If I had a chance to redo the project I’d have liked to have spent more time testing the prototype on customers to make sure we had got the user journey right. Since then we had tested the live site with customers and we found some really insightful things (I’m planning to write about this in a separate article about user testing)!

After the feedback we’ve correlated from user testing and app store reviews, I can now happily say we are working on a phase two of this project! It’s a very exciting time for Betfred & Degree53 and I am confident in saying the phase two of this product will go beyond peoples expectations.

If you’d like to check out the microsite for desktop click here and to check out the mobile site click here!