Brock McConnell - UX UI Design Project

UX/UI Presentation SuperCoach App

Brock McConnell - Academy Xi - Presentation

Introduction

Product Overview

1

What is the product about?

Each user selects a fantasy football side of 22 players (plus 8 bench players) to compete against other teams weekly. After each game in the round, each player earns a score which is contributed to your overall teams score for that week.

Also included in the product are weekly articles, which are posted by journalists from Herald Sun. Some of these are free to view, but most are hidden behind the subscription model.

2

What is the purpose product?

Their purpose is to deliver a fantasy football game experience which coincides with the AFL Premiership Season each year.

This experience is delivered through an online browser platform, aswell as an iOS/Android app. The game is free to play, but they also offer a subscription model, ‘Supercoach Plus’.

Costing $24.95 annually, it helps by having a team picker before you can register, tells you who’s playing each week, optimiser to predict the best possible line up, breakevens, projected scores and players price increases, prediction if players will perform well or poor for the week, access to Supercoach Plus articles and double prizes for the weekly cash winners.

3

Who is the their audience/target market?

The audience is predominantly male, in the 18-39 age bracket. The audience are AFL fans who are interested in the game, beyond their team they support. In terms of gender, there are female Supercoach players within the Supercoach community, just not as many.

Academy Xi - Presentation

Introduction

Key Questions

The brief from the client was to look at the AFL Supercoach app holistically, to listen to users of the product and find out what could be

What problem/s are we trying to solve?

improved. At the start of this journey, there was no set goal to be achieved. The feedback from our users would set the challenge.

How do we know this is a real problem?

Why is it important to solve?

Who are our users? What are their goals and aspirations?

Client/Product Owner

Herald Sun

UX/UI Designer

Brock McConnell

Timeline

12 weeks

Academy Xi - Presentation

Discover

Academy Xi - Presentation

Discover

Problem Statement

AFL fans, who participate in fantasy sports, feel frustrated and confused about the Supercoach app and want to understand how to improve/build their team but are confused on how to achieve this within the app.

Academy Xi - Presentation

Discover

Competitor Analysis

AFL Fantasy

ESPN Fantasy Sports

EPL Fantasy

The AFL Fantasy app is the main

The ESPN Fantasy sports app is

The EPL Premier League Fantasy

competitor to the AFL Supercoach

similar to the SuperCoach app, as it

sports app is cleanly designed using a

complete Competitor Analysis to look at the

App. For footy fans, this fantasy game

handles mutliple sports within the

much brighter palette, and utlising

current landscape of similar products in the

is the direct competitor to AFL

same app. This app showcases sports

more sub menus to house specific

SuperCoach. Key points taken away

from across the world, including

pages. Along with the AFL Fantasy

American Football, NBA, and soccer.

app, this app very easy to navigate,

The app uses a minimal colour

With this in mind, key points taken

very clear.

palette within the experience so

away

The first task in the research plan was to

market.

The app utlitises colours very well

items that need to breath and stand

Key takeaways

All three competitor apps were consistent with their navigation structure, and when they did provide fantasy services across multiple sports, they had a clear selector to choose which sport you would like to be viewing. For the

U

I, AFL Fantasy and ESPN use a minimal palette,

whilst the EPL app is far more vivid in it’s colour use.

Academy Xi - Presentation

out, do just that

The app has a menu selector at the

in highlighting specific states a user

The app has a consistent menu,

top of the app at all times,

would be familiar with

making navigation through the app

allowing the user to switch

The comparison tool for players, I

quite easy

between sports.

think is a key feature. As it is a

Consistent ‘back’ and ‘home’

The app uses submenus to help

fantasy sports app and you choose

buttons to help the user get back to

organise content efficiently

your players, this is very important

where they were.

The app uses clear icons to

The app is very stats driven, and the

differentiate each sport

way they are presented are very

Clear filter system to search within

clear. Whitespace is used to its full

players and stats.

potential Clear filter system to search within players and stats Most of the content is ordered in a list fashion, which is easily accessible to users.

Discover

Survey & Interview The second task was to conduct a survey with current users of the product.

Utilising Twitter, I reached out to the SuperCoach community to gain insights.

47 users responded to the survey, as well as one interview conducted via zoom.

Academy Xi - Presentation

Discover

Research Key Findings

47% of respondants prefer the browser version of the product, instead of the app.

5.6/10 was the averaging rating of the app given by the respondants of the survey.

Trading players was the task that was the most challenging to users.

Academy Xi - Presentation

Define Academy Xi - Presentation

Define

Affinity Map

After conducting the research, the data was analysed and sorted through an affinity map.

Using an open sorting process, feedback was sorted in intial clusters to form themes.

Additionally within these themes, smaller clusters appeared, narrowing down specific pain points users had with the products current experience.

Key takeaways

Overall it felt like users were only using the app as a last resort before the round starts. It was there second preference. Simple tasks are difficult to perform, and whilst there is alot of information and stats, users ‘just have to find it’ was a common thread.

Academy Xi - Presentation

Define

User Persona

Bio

Behaviours

Sam is working professional who is passionate about AFL and follows the Richmond Football club. He has full time job, which takes up most of his time, so the apps he uses, must be beneficial. He is an experienced player of the SuperCoach game as he has been playing for over 7 years.

Sam is often spending alot of his spare time refining his team during each week of the season. He is subscribed to the subscription model provided, but is often referring to other websites and apps to get his information. He is wondering whether its worth the price. His preference is to use the Desktop version of the product, as tasks are easier to complete on that platform. But when he can’t get to a computer, he uses the app to perform ‘finishing touches’ to his team.

Goals/Needs Sam’s goals include:

Name Sam

Occupation Working Professional

Age 32

Academy Xi - Presentation

An easier trading and navigation structure within the ap Doing relevant research in the offseason and during the season to help improve his team Sam would like an app that is more efficient and doesn’t take up too much of his time performing tasks that are simple on the other platforms To have the best SuperCoach team and win the $50,000 prizemoney

Motivations/Gains Sam is usually involved in a league with his friends. There are bragging rights on the line, so to have the best fantasy team at the end of the season is a real motivator for him. Sam wants to gain further knowledge about specific players so he knows which ones are best to improve his team. He wants the ability to compare players and view their stats easily. It’s important that Sam has an app that can keep up with him.

Frustrations Sam is finding core tasks a struggle to complete on the current app like trading and player research, and often reverts back to other platforms to complete these tasks.

Due to his lifestyle mostly being ‘on the go’, this is frustrating as he would like the app to be more user friendly on the smaller screen.

He also feels that he could be getting more out of his fantasy team, but the way news, stats and his team are displayed is limiting his progress. To be able to see his whole team whilst using the app seems a no-brainer to him.

Customer Journey Map

Academy Xi - Presentation

Define

Design Principles

Keep it efficient

Tasks should be completed with confidence.

Simplify the structure

Prioritise elements so they are always accessible.

Make it predictable

Alleviate confusion when it comes to information.

Academy Xi - Presentation

Define

How Might We....

How might we improve the trading system for SuperCoach users so that they can perform trades on the app, rather than resort to the desktop platform?

How might we simplify the layout for SuperCoach users so that they can easily scan the information when it’s presented?

Academy Xi - Presentation

Develop Academy Xi - Presentation

Develop

Crazy 8s Now that we have moved into the second half of the double diamond, it was time to turn all of the research and data into ideas to see how the experience could be improved. First task was with Crazy 8s.

This allowed me to identify 8 ideas, quickly, to help solve the ‘How Might We’ questions.

Key takeaways

From the Crazy 8s, there were three ideas that I was drawn to, to further develop:

Simplified Dashboard, Players your trading always visible, Full Field view.

Academy Xi - Presentation

Develop

MVP After developing ideas, it was time to workout which ideas would be our MVP. The best way to decide this was through a MVP Matrix.

This was conducted to better decide what should be the main MVP for the product, but also any quick wins that could be had along the way.

Academy Xi - Presentation

MVP Fixing the trading experience New Feature??

Quick Wins Redesigned Dashboard

Full Field view of your team

General UI Update

Develop

User Flow

For the user flow, the trading experience was the main focus. How can we make this more efficient and easier to use for the user?

By adding the MVP solution within the flow, we could potentially cut the time it takes to trade a player significantly, but also help newer players to the game by adding this assistive feature.

Smart Trader

Using the apps data in the backend, let’s develop a feature where the app will suggest trades for you, based on underperforming players you have or injured players.

This feature has the potential to save the user a considerable amount of time when completing this task, as seen in the user flow to the right.

Academy Xi - Presentation

Develop

Wireframes The next task was to develop low fidelity wireframes, bringing the user flow to life.

Firstly, I started with pen and paper to quickly note down my ideas, then moved to figma.

Dashboard

Key stats (Player Quick View)

Dashboard

(Smart Trade Suggestion)

My Team (Full View)

My Team (Player Quick View)

Smart Trade Suggestor

Trading flow

For the main trading player flow, when you get to the stage of selecting a new player, this was where users were finding it difficult to trade multiple players or see their team and potential new players at the same time. Instead of having the user cycle through 3 seperate screens to complete this task, the idea is to have a pull up tab to view the player they are trading and their team as a whole in the same experience.

Academy Xi - Presentation

Trading - Select a new player

View your Trades

View your Trades - Make an additional trade

Review Trade

Trade Complete

Deliver

Academy Xi - Presentation

Deliver

Prototype & User Testing For the prototype, I choose to use figma to create it as close as I could to the current product.

The prototype allows the user to explore the dashboard, the My Team area, and also the tasks of making a trade, and testing out the new Smart Trader flow.

User Testing Tasks

User testing tasks included the following Explore the Dashboard screen (Featured stats, Round Recap Complete a trade using the Smart Trader section on the Dashboar Navigate to ‘My Team’ and select I.Heeney to trade out for B.Dale, utilising the trading players flow.

Academy Xi - Presentation

View Prototype here

Deliver

Outcomes From the user testing, overall the prototype and UX solutions were well recieved. The updated design of the UI was positive, aswell as the trading screen functionality.

Feedback about the dashboard was varied.

Some users found the tab menu at the top intuitive, while others felt the news articles should be kept on the main dashboard screen.

MVP

Quick wins

KFC Smart Trader

Full Field view

Ability to see your players your trading

Updated UI

My MVP feature, The Smart Trader, was a positive in the user testing.

The two avid SC users found that this feature would dramatically saved them time, as long as the AI behind the feature only suggested relative players. Users did wonder however whether it should be more prominent on the dashboard, and also whether it should be included when your on the My Team screen.

Another pain point for users was not having the ability of seeing your team and the players you were trading without having to go back and forth in the flow. This was a sticking point as alot of users in my research got a bit lost.

My solution is was to design a pull up tab at the bottom of the trading players screen, for users to bring up when they wanted to see the current trade they were makng, but also see if there were any other team moves they wanted to make at the same time.

Out of the research, not being able to see your team in full was a real pain point for users. I was able to redesign this so all players on field were visible. And with the utilisation of sideway scroll, the user could easily scroll left to right on each positional line to view the bench players for that position.

For the UI, this was redesigned to have a more contemporary feel. Changing the font to a thicker font helped with readability, whilst updating the colour palette used for key items, allowed the interface to pass AA Accessibility. Most notably the green colour for positive pricing was updated, whilst font sizes for player labels was enlarged slightly for greater legibility.

Featured stats

Out of the research, not all the information about your players was said to be easily accessible. So one of the additions on the dashboard is to a featured stats section.

This outlines which of your players are performing or not performing, and can help back up the Smart Trader suggestion, or just generally help you decide if you want to tinker with your team.

Academy Xi - Presentation

Thank you

Brock McConnell - Academy Xi - Presentation