WHAT IS SPORTS BUFF?

Sport Buff is a real-time fan engagement broadcast media for next-generation gamification. It monetizes the audience directly through transactions and sponsorship and creates innovative new ad inventory. Sport Buff Fans can play with and against their friends for prizes, bragging rights, and fun.

CURRENT REVIEW

As there was a design being implemented I started by doing a review of the full implementation and design. here are my findings.

CURRENT SIGN UP PROCESS

The prompt to join the product looked like same and got in the way of the stream. so not only are users douting the product ligntesy it's obscuring what the user wants to watch.

CURRENT UX ISSUES

Another issue was that the signup element was not in the same area of the buff so it felt that they where not the same product and again looked like spam.

BUFFS

The issue with the buffs (questions/poll) was that they looked and felt very immature and kid-like. it's not for the sports buff target audience, it also played into looking like a scam or spam. Interaction wise it was not always clear what would happen when I selected an option and what am I waiting for.

What do i do after the event of buff is finished? its a closed loop, so they have lost the user.

LEADERBOARDS

Leaderboard was not connected in any way to the buff so the experience was very disconnected. another issue is that the current design, only shows the top 5 places and is going to be hard to scale it in its current design
‍

Other buffs types are polls, questions and celebrations. all of which again look discontent with the leaderboards.

RESEARCH AND TRENDS

Next, I had a look at the market leaders in sports and entertainment to show the team examples of quality and show what we should aim for and what our customers will compare us to

Also looked at trends and motions to show examples of what we should be heading for.

IA - INFORMATION architecture

IA is very important to get right, with the current IA there was no plan to build on or even have an MVP. so i came up with an MVP IA with the future in mind not just the current state of play.

below is the IA for beyond MVP (VR ect) and also how we can connect to smart TVs.

THE REDESIGN

Gravity sketch has a real mix of sectors as we aim to be the tool to help designer design in 3d weather that would for a film set, game world, aurticehecter or products. here are some examples

THE UX CHANGES

Knowing that the product needed to work on mobile, tablet, desktop and TV we wanted to focus on the buff being easy to interact with and clear to understand.

We wanted the UX to be the foundation for other brands/companies to brand, so we went with a clean and clear flow. Below is a higher fidelity mock-up.

In the old design, it was hard to view the leaderboard and was limited to 5 users. now players can scroll through to see other users. one of the asks for the CEO was to have multiple leaderboards, for example having a sponsored leaderboard, global and/or a friends leaderboard.
‍

In sport we wanted to give the user live stats, this helps keep the user engaged with the content but also give them content that could help with Buffs questions.

We did alot of prototyping for navigation, whether to should be on top or bottom. See below example
‍

For mobile and tablets, it seems like the bottom navigation works best in terms of ergonomics and ease of use. but I wanted it to be easy for a user to explore so on the smart screen we allow the user to swipe through the content.

Buff buckets are groups of Buffs that contribute to leaderboards and rewards. users can join multiple buckets and answer questions with live content or without, meaning we can surface content that's not live and still engage with the user.

in the old design was hard to understand what the user has selected but also this interaction should be celebrated and encouraged. So I can up with an animation example of interaction states

In testing, it was clear we needed a minimised state for when the user wanted to focus on the event/game. but users still wanted to know how they are tracking and when the next buff is coming. below are example of the but states.

In the deals that were being done, I saw an opportunity to showcase the sponsor and show them off in a different light. I wanted the sponsor to be part of the experience, not just a tag. below is an early iteration of how we can show sponsorship and give back to the user.

UI

The UI we wanted to use the company or sponsors to skin UI but with a buff flavour. so we use the branding of the company but the animation would be in the style of sports buff. here is the so the example below

BT CHAMPIONS LEAGUE EXAMPLE

A lot of are clients our in the sports and entertainment sectors below is the BT sports skin.

Here is an example of the flow of a question buff, the user has up to 5 mins to answer the question. when the user selects an option the user gets tactile feedback from the animation on touch or click and the selection lights up. after the buff timer is over the buff is locked in and we show the poll of the results and the user can see stats for the game.

Example of some of the specs.

Navigation is all at the bottom of the widget when the user interacts with the element it reacts with animation feedback, this reinforcer the feedback

Showing off the band and their sponsorship is important and we want this product to feel part of the stream. so having the branding thought out makes it feel at home and gives the user confidence in the product.

Adverts were something i was pushing for as extra revenue for the company. now in not for spamming the user all the time but if done correctly then they can work for the user and the company. for example, we only show three adverts in a football match - 30min into the game, halftime (big advert) and 30min into the 2nd half. There is also the option for the user to pay to turn off the adverts.

After a sponsored event some sponsors wanted to promote, discount or give away items to the users, this could be only the top 10 users or in the same cases all the users.

To keep the user engaged with the content before a live event we didn't just want to keep pushing buffs as users could get fatigued and the import buffs are when the feed is live so we came up with some distraction play things like showing a line-up, in the case of BT we showed as a list but this could be in AR.

The are four types of buffs we used for BT, team buff where the user picks a team (could be 2 - 8 teams) and a player buff where the user can pick a player.

On Web stream, the users wanted to be able to minimise. here is an example of the different states.

Buff buckets are part of the distraction play, when a user is looking for something different to interact with they can go to the bucket to see what's live or coming up next. If the stream is not live yet we give the user some pre-live buffs and some entertainment buffs (lineups and/or AR experiences).

One of the main aims of redesigning the product was to give the product a feeling of redesigning and we archived this by having nice transitions and interactions. below is the example of the transition through the main screens

After a feed, we wanted to reward the user and give something back to them. This is the start of gaming and rewarding the user through badges and ranking up. the aim is to be able to give the user offers and deals when they rank up.

OTHER EXAMPLES

Below are other examples of reskins of the buff platform.

NBA - THE JUMP

Here is The Jump (TV show for basketball) skin, as you can see the UX element stay the same But the UI has been tweaked to fit the branding of the TV show.

WORLD CUP 22

We also did a version for the world cup 22.

CALL OF DUTY

on release of the new Call of duty game, we did a live steam event in partnership with Activision.

KEYBOARD INTERACTIONS

in testing Keyboard interaction came up a lot, in the original design everything was done with a mouse which when streaming can cause fatigue in the user so we came up with some interaction prototypes to combat this. we took inspiration from the game section with the ASD.

Below maps out all the interaction on keyboard.