Fantasy Premier League-Mobile app redesign — UI/UX Case Study!

In this case study, I am going to share insights on the design decisions I made while redesigning the mobile app.

What is Fantasy Premier league?

From being just a fantasy game when it began in 2002, FPL has grown exponentially. The 2019-20 season had over 7.6 million people playing the game and is one of the best fantasy league games there is.

It’s an online game that puts you in the shoes of a fantasy manager, where you pick real-life players that score points for you depending on their on-field performances.

The working of the fantasy league is simple. Fans are allowed to pick a set of players to form their own team. Teams are formed on few constraints and earn points based on the performance of the players in the actual matches .

Why redesign fantasy premier league ?

This is my first case study 😄 and as many designers suggest start with the app you frequently use or relate to most .I decided to go with the thing I love most and that is football.

This is the best game for Fantasy football lovers. I have been playing Fantasy premier league for the past 5 years and have used the fantasy premier league website to make teams and see the scores for most years. However this year I started using the mobile application. The app was recently developed and naturally like any new product there were few problems with it. I was curious to find how could I improve the fantasy app’s usability and enhance the user’s journey.

Timeline

It took around a month to complete the user research, analysis, and creation of the prototype.

User Research & Analysis

I have used survey forms and also the reviews of the app on the app store, Twitter to check what users like and pain points about the application

I prepared a google form survey for 10 fantasy premier league users to understand their pain points to avoid the guesswork and self preconceptions

The questions were mostly around the usability of the product and the engagement.

Here is what some users had to say about the current application of Fantasy Premier league

Navigating to game fixtures is so annoying

The deadline time for changing team is not visible clearly so the deadline day is skipped and I am not able to make the changes to the team

To summarize the data collected

  • Many use the app to view the live scores and team news
  • Many users feel the app is cluttered
  • The navigation through the sections is not simple you can often make errors
  • The website is much easier to use than the app
  • Points should be displayed first after opening the app

The Process: Design

Keeping in mind the pain points and a few of the elements which users on the FPL app use frequently, started sketching out the screens required to address the problem

The sketch of Homepage, transfer section for FPL managers and stats screens

With the reference of the above screens and sketches, I am going to dive right into the visuals and explain my reasoning along the way.

User Challenges and their Solutions

All the pain points are with reference to the current mobile application

To see the points earned by their team and to view the transfer deadline

Solution:

The main attraction of any Fantasy app user is to see the points earned in the game week. The first component on the homepage is to show the points gained so that the users are engaged with the app. Many users miss out on setting up the team before the game week deadline and end up losing out on the points. To avoid it the timer is included as the component on the home screen.

Navigating to game fixtures and to view details of it is so annoying

Solution: With a click on any fixture, you can view the live-events, lineups, stats, and News in real-time to avoid missing out on any information around that game.

Transfers Page

There are a total of four tabs in this section with making changes to the squad, live points, leaderboard to check your ranking, and news to keep yourself updated with the injuries and team news to make your team stronger

Substituting and Transferring the players efficiently

Solution: To use both the functions one would have to navigate back to the home screen and then use the other function. Both the buttons are now added besides each other to reduce the navigating through screens.

Substituting a Player

While substituting a player clicking on the player on the substitute bench will swap the player with the on-field player.

Transferring a Player

Transferring a player involves changes in cost and deduction of the number of players that can be transferred in. Not taking a confirmation before making changes causes deduction of points so confirmation is necessary to proceed ahead. The popup screen provides the overview of the changes made and their effect on points so that user can decide either to proceed or cancel

View the real-time points of the team and players

Solution

You can view the points of players and your team for every game week with just a click. I have used the color gradient for the game weeks to suggest the current game week and the one which is completed or yet to start

To summarize the changes made

  • Added the points and transfer window timer to the home screen
  • Adding the button for substitution and transferring of a player on the same window
  • Changed the points viewing window of a player
  • Complete detailed view of the match details

Prototype

Click on the link below👇👇👇 to view the prototype

<iframe style=”border: 1px solid rgba(0, 0, 0, 0.1);” width=”800" height=”450" src=”https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FDF0QeMBGeazHb7qnMrZihA%2FFantasyPlfinal%3Fnode-id%3D1%253A94%26scaling%3Dscale-down" allowfullscreen></iframe>

After testing the prototype with users the few changes users suggested that could be improved in the design

  • Increase the font size of a few elements
  • Reducing the image size of the replica jersey

Thanks for reading ..!

Thank you for your patience in reading till the end 😃. Please provide your valuable suggestions for the case study so that it will help me improve my work and motivate me to add more such case studies. You can also contact me on any other social media accounts if you have any questions. I would be more than happy to have a chat with you 😃

Software engineer and 💜 for UI/UX design .Self learning UI/UX designer