Repository

https://github.com/amosbastian/fpl-plus

Linked Task Request

This particular design was not related to a task request and @amosbastian reached out to me in the following post:

https://steemit.com/@amosbastian/fpl-plus-0-5-0-live-points-working-popup-and-more

Since the request being made, @amosbastian has since started the implementation of this design which can be seen in the below post:

https://steemit.com/@amosbastian/fpl-plus-0-6-0-complete-popup-revamp

Prototype

A prototype that contains the mocks with hot spots can be viewed here:

https://xd.adobe.com/view/802ebbea-624c-4f4c-5448-2efc0a70c2e9-f61f/

Video of Prototype

The following video helps to provide an insight into the experience created for Fantasy Premier League Plus:

Details

Overall the goal of this piece of work was to provide the Fantasy Premier League Plus Chrome extension with a complete UI overhaul and create an easy to use experience that could easily scale across the current and future feature set.

In order to design the pop up I created the following pages:

1. Initial Welcome & onboarding UI (3 Steps)
2. Login (Enabled/Disabled Buttons)
3. Overview
4. Overview with the menu expanded
5. Points
6. Team
7. League Overview
8. League Table
9. Fixtures
10. Statistics Pages

Within the below, I will provide some additional information about the pages that I created and all of these pages can be viewed within the prototype and video provided above.

1) Initial Welcome & onboarding UI (3 Steps)

When a user installs the application I wanted to be able to provide a clear indication as to the purpose of the application. Within this pages, you are first able to introduce the application to the user and then introduce key or new features. Within the below mocks you can see examples of a simple introduction page with two feature pages.

Example of basic introduction screen:

Welcome Screen 1	Welcome Screen 2	Welcome 3

Note: The grey circle which is shown as blank would be replaced with the logo as per the current implementation.

2) Login (Enabled/Disabled Buttons)

Once a user has completed the on-boarding pages, the user will then be asked to log in to the chrome extension using their user Id, by default the submit button for logging in should be set to disabled and then upon the user id being entered into the input field the submission button should become enabled. This is to provide a user with a clear indication surrounding when they're ready to log in.

Within this page you can also see a clickable option surrounding "I don't know my user Id", this was placed there as gathering the user Id may be confusing to a user. I believe this feature will be moved to a username and password approach prior to its release.

Submit Button Disabled (Default User Experience)	Submit Button Enabled (length of input value greater than 0):

3) Overview

Once a user has signed into the application they will be shown the overview page, the overview page provides a user will key details surrounding that game week combined with their season stats. This should provide a user with the ability to quickly view key information whilst still having the ability to dig deeper should they need to. A user has the ability to navigate to the following pages from the overview page:

1. Leagues
2. Team
3. Points

Within the mocks shown below, you can also see that there is the ability for a user to click on a more menu shown to the top right of the page, although this page can be accessed from all views within the application, the below shows an example of what the menu looks like when opened. Within the more options menu, you can navigate to:

1. Fixtures
2. Statistics
3. Feature Guide
4. Switch User
5. Sign Out

From the options presented above, the only requirements asked from @amosbastian were 1,2 & 5 and the other options are there to provide clarity surrounding the different options that should be shown within this menu. Overall the purpose of this menu is to provide a user with the ability to access additional options which are secondary to the main purpose of the application.

The main navigation options that are shown within the overview page are placed there as they complete a common journey a user would make when checking and updating their team each game week, whereas the secondary options shown in the top bar are options that a user may not need to complete that journey.

The menu placed in the top bar also provides the project owner with the ability to add further options to the application without needing to rewrite the design.

Menu Closed	Menu Open

5) Points & Team & Stats

The points and stats pages are two pages that a user would use very often when checking their team and as seen within the prototype they can be easily accessed within the main overview of the application. Although in the below the actual data has not been added and purely focusses on the experience, @amosbastian was able to take this design and apply the data as per his requirements.

Within the below you can see that there are a few differing UI elements across these pages, firstly you can see within the points pages that it is only a simple table and this doesn't include pagination or select options. This is because the main aim of this page was to provide with all the information they needed in a single view and overall the amount of data needing to be shown in this page is limited to a single team.

In the stats page, a user has the ability to select which players they want to view as well as the ability to sort the table based on a selection of different options, both of these options are provided within the main Fantasy Premier League site and the aim was to bring these across into the chrome extension. The statistics themselves can be found in the same table style as shown in the other pages and again the data was left for @amosbastian to choose what he wished to show here.

At the bottom of the table, you have the ability to change the number of players that are shown within the table as well as change page based on the total number of pages available based on the user's selection.

Points & Teams	Stats

8) Leagues

Within Fantasy Premier League you can join a selection of different leagues and it's a common area a user will check each game week, as a user can join same many different leagues this can become an issue when working with a small canvas such as a chrome extension. In order to provide a clean and easy to use interface, an accordion was used to help break up the various different leagues. The mocks below help show how the page will look when no leagues can be found under a certain league type combined with what it will look like when leagues are available.

A user is able to click on any of the leagues that they have present and click into the actual league table, the league table will show the top positions within the league by default along within a user’s current position fixed to the bottom of the table.

Within the league's table, a user has the ability to select how many teams they would like to view per page as well as change page using the pagination shown at the bottom of the page.

A user can also use the game week dropdown to select which game week they wish to view the league rankings for. By default, this would be set to the current game week.

Across all of these pages, you can also see that a breadcrumb trail has been suggested to provide a user with a quick an easy way to navigate between pages and overall provide a user with an easy way to go back multiple pages in a single click.

A user will be able to click on any of the teams shown in the league table and they will then be navigated to the team page as shown in the previous mocks.

Leagues Available to show	No Leagues Available	League Clicked

9) Fixtures

Within the fixtures pages, the user has the ability to view figures for any given game week, a user can select the game week they wish to view using the drop-down shown at the top of the page. A user then has the ability to see the fixtures for a game week within the accordion, this separated by each game day. Within the mocks below, you can see that no Premier League badges were used, this was because I wasn’t sure that the application would be able to use these badges due to copyright. This design surrounding the actual fixture layout was not used in the actual implementation of this page, however, the basic layout and consistency surrounding the accordion have been implemented.

Fixtures expanded A	Fixtures Expanded B

Benefits / Improvements

As this particular design was to create the initial UI design for the project the main benefit that this particular piece of work brings is that it's a starting point for the development of the project and will help to create a consistent guideline for future works. The UI reuses a lot of the same components so it should allow for rapid development without the need for custom CSS on every page.

As the colours are inspired/copied from the Fantasy Premier League website, it was important to make a UI that provided a clear indication of the extension's purpose and relation to FPL whilst still being unique it is own way.

I also believe that the simplicity of the design combined with the common components (buttons, table options) that are used throughout the extension will create a minimal learning curve for new users and overall a positive user experience.

Proof of authorship

Although the below profile show indication of the designs within Adobe XD, the iterations and discussions made with @amosbastian would provide further clarification surrounding proof of these being authored by myself.

Design Specification

A design specification that provides font families, colours, sizes, etc can be viewed here:

https://xd.adobe.com/spec/1fd9cee5-006c-467d-56f3-a1058820630e-69e8/

External Assets

The icons used within this design are Material and can be found here:

https://material.io/tools/icons/

These icons are available under Apache license version 2.0.

Tools

I used the following tools during the creation process:

Adobe XD (https://www.adobe.com/uk/products/xd.html)

Original files

The following link can be used to access the original files used within this particular piece of work:

https://drive.google.com/open?id=1S_FM1Oe-3pelXBl74p7WoRqYeIl9tefP

Proof of Work Done

A link to my GitHub account can be found below:

https://github.com/tobias-g1

——

This work is licensed under Creative Commons Attribution 4.0 International License