As an avid Arsenal fan and casual fantasy football team player, I wondered how the live match day experience could be more visually interactive and feel more immersive. Currently, in fantasy football, you pick your formation, then select players within a fantasy transfer budget, and then you wait until the end of the match-day week to see how the players performed. This idea was actually developed very naturally as I often talked about football with my UX/UI mentor during our creative meetings. I think that the fantasy premier league could benefit from this revamp as it would enhance the matchday experience and bring a new dimension into the viewing of matches.

GOAL

The goal of this project is to create a new matchday experience where the player can see highlights, match stats, and simulation of set plays as the matches are being played out in fantasy football with a focus on the players that the user primarily picked from the different teams.

RESEARCH GOALS

I started the research phase by formulating a set of user questions to ascertain the features they would like the most, questions to understand user knowledge of competitors, and user attitudes towards Fantasy Sports. As the feature, I will be implementing is quite unique (featuring live game highlights), I needed to know what competitors were doing (feature-wise) and get an understanding of Fantasy Sports general use by its users. Below are the research goals I had set for this case study

• Look at current features offered by competitors

• Explore the experience of Fantasy Sports players

• Ascertain ways in which the experience can be improved

• Extract possible solutions regarding match day features

I studied competitors by comparing different fantasy sport website features to better understand what features the “Premier League” website must have, what would be nice to have, and what could set them apart from their competitors

I conducted a survey to gauge user impressions towards Fantasy Sports. I found out that high volumes of users (95%) used the Fantasy Premier League website as the main service point for their Fantasy Sports needs. The majority of the users (82%) chose mobile phones as their preferred devices to view their fantasy points. Lastly, I discovered that users feel their current experience with game highlights is lacking.

After organizing the research, I created a user persona, distilled from the large pool of information and shaped using the most notable divisions in temperament: social investment, online habits, and inclination to logic or emotion.

User Flow

To understand what need to be designed and tested, I created a user flow of the natural process of how i envisioned the flow through the Premier website would be and what mandatory elements were necessary in the upcoming wireframes.

There were several instances that I wanted to answer through this core flow :

• User being able to check favoured team/player fantast points

• User having an option to watch a 2D highlight goal of a participated player on their team.

• Observe whether the user would want to subscribe for a Video Highlight Premium account.

When I initially did the User Flow, I found it very different from typical user flows done and actually quite hard because its a ver interactive feature with many comppnents within it.

With research, define, user flows and interviews partaken, i began recreating the Fantasy Premier League Website. At this stage i began laying out and implementing the 2D/Video highlights and how it would be integrated to the user experience.

In-game events notifications

Fantasy Premier League Flow (Pre-test)

Looking back at the research and interviews conducted, it was important to implelment 2D and Video Highlights to make the users more engaged. However i still needed to test the core flow with users who would be seeing it for the first time.

In order to make the moving GIFs work , Figma was an essential prototyping tool for this project as it accepts GIFs and Adobe XD doesn’t accept GIFS. How I created the GIFS were:

1. To screen record the simulation in Football Manager/ YouTube,

2. Bring the raw file into Adobe After effects and created a Composition.

3. Render it out with Adobe Encoder as an mp4.

4. Then bring it into Photoshop and Export it (Save for Web Legacy) which then enables me to create the GIFS.

Resolutions were also an important factor as too low resolution would mae the GIFS pixelated but an optimal resolution was needed to bring the visuals but yet make the file size small enough so it can load onto Figma

Test

I created a high-fidelity prototype of the desktop site. This was created using Figma and the usability test was conducted remotely. It was really insightful as their feedback pointed out that:

• Users weren’t able to see fantasy points

• Users didn’t understand what the Premium Highlights feature was

• Users weren’t likely to subscribe to the Premium, so an alternative solution needed to be made

• Users wanted more match information on the Highlight screens.

Tasks

• Gauge how long it takes a user to view 2D/Video highlights and subscribe to Premium Video Highlights.
• To be able to view and watch both 2d and Video highlights
• Gauge initial response to Fantasy Premier League user flow
• Observe what issues or problems the user may face while browsing through the site

Thoughts on Testing

I found the testing/prototyping phase as enjoyable as it entailed talking about football and adding a novel experience for users. . Their reactions to seeing the Video Highlights, in particular, was really pleasant as they felt it was a much-needed additional feature to their current experience of the Premier League Fantasy Football Website. The only drawback during this process was the timing of transitions between the Team page and the Goal notification page as it was quite sudden and quick during testing and would need to be rectified after the usability tests.

Afterthoughts

After the usability testing, I made the high-priority mandatory changes that helped to make the flow more robust. One of the things that changed drastically was the payment page. Users stated they didn’t have enough information on the payment page and didn’t know what they were subscribing to which in turn made the page confusing.

So, I expanded that and made it more clear by including Plans, Order Summary, and details about the In-game highlights to make it clear the difference between their current plan and what they would be subscribing to. Below is the new flow after taking usability feedback into consideration.