UX flow for a soccer app

1. SOCCERTRAC UX FLOW 2.0

2. Intro Registration
Facebook
New Acc
Login
Animation
Tournament
Page
Team Page
Point Score
Fixtures
Fixtures
Detail
News News Detail
Top Scores
Existing acc
Skip login
Current Flow in a nutshell
Areas in red signify high bounce rates, decrease in screen views, and decrease in average
time spent on screen.
Overall app activity very low due to linear flow of app*
*for sake of simplicity, ad spots are not currently shown

3. Red Flags
Page Views (June – Aug) Screen views /Avg time/%exit
Tournament Page
Login Page
Fixtures Ad
Points Table Page
User Registration
Fixtures Page
User sign up page
Log in Page
Top Scorer Page
News Page
Fixture Result Page
21632/1:02/29.32
11116/0.06/2.1
3011/0.03/0.23
221/1.24/29.41
201/1.11/10.95
139/1.16/33.81
133/1.16/10.53
106/1.01/2.83
41/0.53/56.1
15/0.06/13.33
No data
The data is red flagged to show comparison to data accumulated for past 6 months vs data from past 3 months. Any elements that
showed significant decrease in screen views & time and significant increase in %exit rates are the ones red flagged here.

4. 56.1% 33.8% 29.41% 29.32% 13.5%
Why do 56.1% leave from Top
Scorer
End of app usage
Lack of next steps
Why do 33.8% leave from
Fixtures Page
No further info needed
Poor UI
Why do 29.41% leave from
Points Table
No further info needed
Poor UI/UX
Why do 29.32% leave from
Tournament List
Poor UI
Poor UX. Red flagged
since it’s the first screen
Top Scorer
Fixtures
Points Table
Tournament List
News
Learning from Data

5. PROPOSED SOLUTIONS
TAKING IT ONE SCREEN AT A TIME

6. Key
• Black – Current features
• Green – Necessary edits
• Blue – Suggest edits
• Red – Red flag areas

7. Opening Page
• Current splash page shows logo in white against a dark football
field. The splash page is barely visible for a second.
• Recommend cleaner background, preferably flat color.
• Logo shifted to center of the page.

8. User Registration
• High %exit most likely fixable with redesigned UI for better
appeal.
• Recommend reducing the fields to just email and password. Can
add a new field called username.
• Remaining information can be acquired by encouraging user to
fill up their new user profile from the section menu.
• This should speed up the registration process.
• Top menu redesigned. If Back and home button take you to the
same place, one is redundant. Also, the placement itself can be
edited. More on it up ahead.

9. New User Register Page
• High %exit most likely fixable with redesigned UI for better
appeal.
• Recommend larger emphasis on Facebook button, lower
emphasis on new/existing user. Can do a 1:2 ratio where
Facebook button is twice the size of Register/Login button.
• Cleaner background, preferably flat color.
• Remainder info can be filled up by user via new user profile
section in app.
• Removal of skip feature. We want to encourage FB sign in more
(useful for ad retargeting in future). By giving the option to skip
makes the above login options redundant.

10. Existing User Login Page
• Overall pretty basic layout. Not much to change, except UI
design of the buttons.

11. Login Animation Page
• Currently showing a little football animation with the edges of
the gif visible (can see the football bounded within a light
square), overlayed on a dark background
• Can make a more smoother animation against a flat color
background to make it look more visually appealing instead of
feeling like an old internet website.
• No background transparency needed.

12. Main Tournament Page
• High %exit (29.32%) most likely fixable with redesigned UI for
easier sorting of information
• Recommend a complete redesign of how the information is
shown in order to minimize the long scroll across the app.
• Have mentioned individual edits below

13. Main Page – Tournament List
• Current UI includes a lot of content divided into three
categories (ongoing, upcoming etc). In current and future
scenarios with more populated teams, this will force the user to
scroll down quite a lot.
• Recommending a design revamp based on Thumb positioning
in phones.

14. THEORY TIME
A BRIEF EXPLANATION OF DESIGNING FOR THUMBS

15. Phones are getting bigger
Adobe’s 2014 Mobile Benchmark Report claims that mobile browsing
among phones with 4” screens or smaller is down by 11% and declining.
This means that learning how to design for thumbs is now more important
and ever. Most popular Android Screen sizes already range from 5.1 – 5.7

16. Typical Way Of Holding Phone
Designing for thumbs
involves building interfaces
that most comfortable to use
within our thumb’s natural
sweeping arc.
While this is complicated
based on how people hold
phones the assumption is that
most people currently hold
phones like the one shown in
the picture

17. iPhone’s Scroll Down feature
Which is why iPhone
introduced a double
tap feature to lower
down whichever app is
open for easier
accessibility to the top
menu.
However, this is feature
is not readily used by
everyone. Most are
even unaware of it.

18. Current method
• A common
problem is the
top menu button
often being far
outside
navigational
reach

19. iOS/Android’s solution

20. A slightly better way

21. Ideal method.
Facebook found in their tests that a bottom tab bar solution on their app also improved
Engagement, user satisfaction and perception of speed

22. The Thumb Zone
It’s a heatmap for thumbs.
The one shown applies for
iPhone 6 sized interfaces. If
the anchor of the thumb is
at the bottom right, this is
the typical reach it can have.
Notice in next slide how
the natural area doesn’t
increase much despite
increasing the size of the
phone

23. Comparing Thumb Zones
iPhone 6 iPhone 6+

24. Explaining ChokeUp Area
Choke up area is watching
how the thumb zone shifts
with grip, making it easier
to access the left side by
placing the thumb’s anchor
at the midpoint on right
side.
It is also important to space
the items itself, to avoid
accidentally clicking other
buttons

25. Fingers & Thumbs in Pixels
A classic example of this going wrong is with Whatsapp’s Phone button: Link

26. Key Learning
• Redesigning interface to suit thumb screens.
• Using gesture controls to access menus wherever applicable.
• Switching to an interface with key/most frequently used controls
towards the bottom ( Facebook, Uber, Ola, Zomato etc…all
have adopted to a bottom menu approach for their most used
controls)
• Ensuring button areas are not overtly cluttered, having enough
space i.e. 57 pix for finger touch, 72 for thumb, in order to
prevent accidental clicks.

27. BACK TO MAIN MENU
Moving on with the UX revamp

28. Main Page – Search (New)
• A search bar can be placed permanently or visible via downswipe
on screen (a method already employed on iphones by default).
The search will have tabs for users to swipe and search for
tournaments/orgs/people or everything
• Recommend using a swipe down for search, allows area to have a
transparency layer on which search features can come.
• To exit search, just have to swipe back up. Can search from any
screen within the app by swiping down from the top part of app.
• Removal of search from permanent display allows more space to
be used for other purposes. For instance, tournament sorting. A
user guide can always be made for first-time users on the app to
show the new navigation and gestures.

29. Main Page – Main Menu
• A more populated menu section including user profile, app
settings, favorited teams, Back to main page and logout page.
• The user settings tab will have a alert set on by default which will
disappear once user fills out his complete profile. They can also
sign up for more social networks such as twitter &
instagram(reasoning explained in media page)
• App settings are useful to switch notifications on/off and also
allow the option to pay to remove ads.
• Favorites menu added here so user can see his favorites at any
given time.
• Main menu can either be a swipe, or a button placed at bottom
(can be determined upon design and prototyping)

30. Main Page – Main Menu
• Additional recommendations if possible, adding Player Profile
and Org Profile sections in menu in the form of “Players of the
Week/Month & popular/trending Orgs of the month. While the
data is easily accessible via search, its an added bonus for the
more curious users to get a list of updated/active stats
periodically. More details on Player and Org Profile Page
• Another recommendation is to add photo/video sections in
menu as well. While individual galleries are available, this would
serve as images/video of the week/month. The most popular
ones available. More details on Media Page

31. Main Page – Favorites
• Current fav system includes clicking on hearts and a new tab area
shows up on top with fav tournaments.
• New system will retain the option of clicking hearts to favorite
teams. Favorites can be viewed via main menu
• An additional feature could be that any updates by favorited
teams can pop us as notifications??
• The feature is edited because favorites, by definition, should be
easily accessible anywhere across the app. It also makes the front
page less content heavy.
• It will also reduce the load time to register when a heart is
clicked. Currently it takes a while, presumably because the list is
being populated above.

32. Main Page – Tournament List
• High %exit (29.32%) most likely fixable with redesigned UI for easier
navigation.
• Recommend dividing current 3 primary segments (ongoing, upcoming
etc) as buttons. User can choose which items he wishes to see based on
the buttons.
• *NEW sort feature to replace the search area, allowing info to be
sorted alphabetically, by level, organization, location.
• Organizations are highlighted and on clicking them, will go to
organization info page.
• Levels can be depicted by color for easier classification.
• Would not recommend placing the full page ad block in this section.
Its too early on in the app and would turn a user off. Can have the
basic ad block at the bottom

33. Main Page – Tournament Click
• On clicking on tournament, the image expands to fit app screen
(often pixelated) as the points score load.
• Recommend using a standard flat colorful animation instead of
zooming into tournament picture. Can use tournament name +
illustration to show that it’s being loaded.
• If image is a necessity then should ideally enforce users to
submit a high res image to maintain design quality across the
app.

34. Tournament Detail Pg (aka Point Table)
• Currently on clicking tournament, it goes directly to Points
Table, showing PT, fixtures, News and top scorers as 4 options
to navigate across on the page.
• Revamped UI with options on bottom bar, including PT,
Fixtures, Top Scorers and Media (contains images/videos/news)
• Tournament Info Option placed as an icon next to Tournament
name.

35. Point Table Page
• Currently has 4 divisions which can be filled or empty depending on
status of tournament.
• Currently shows low views, low screen time and 29.41% exit rate.
• A revamped design needs to avoid the long scroll, but at the same
time, cannot deploy a bottom menu as there already is one on the
page. In this case, an accordion system is most likely feasible, having
the main division open, with bottom divisions expanding on click. It
allows quicker navigation between divisions, minimizing scrolling.
• Better spacing on the scores table for easier reading.
• Clicking on team name should ideally take it to org profile as well,
however not recommended in this case on assumption that people just
want to view scores here. Please suggest?

36. Tournament Info Page (New)
• Can be accessed via tournament list, player profile
• Info (Name of tournament, org logo, organized by whom (can go to
the org profile), type, date)
• Rules (Format, Registration, Tournament Timelines, Points) … too
much to show.
• Venue (shows googlemap of venue),
• Teams(listing of teams, clicking on them takes to org page team
section, org logos to appear next to team names)
• Sponsors (logos of sponsors)
• There is too much content to put on this section, particularly the rules.
Content needs to be broken down to its absolute necessary
components as there’s an overload of information to be shown on one
section of the page. Please suggest if anything can be cut from here.

37. Tournament Info Page (New)
• Tournament info page design can also follow an accordion layout
considering the amount of data to be displayed.
• The info, if condensed, can also appear as a pop-up page, (if the
info can be condensed to a maximum of two scroll down)

38. Fixtures Page
• Currently shows divisions by date.
• Stats show low views, low screen time and 33.8% exit ratio
• Pull up accordion view to see teams and minimize long scroll.
• More prominent display area, fixing alignment.
• To avoid repetition of images in case a default image is used,
goal is to make a single default image with multiple colors that
can randomly be arranged to make each section easily legible.
• Suggestion to have divisions by day/week/month instead of
date unless that’s a necessary functionality.
• Can alternatively also have a grid view instead of list view,
making it quicker to browse. Feasibility to be determined during
design & prototyping.

39. Fixtures Detail Page
• Currently shows 5 divisions, league match, goals, team stats,
cards and substitutions.
• Two new features to be added (Lineups and disciplinary) making
a total of 7 items on screen.
• Pull up accordion view four divisions with league match fixed at
top. At the bottom are icons to view lineup and disciplinary, each
opening a separate sub page. These two can also be floating
menus on this page.
• Disciplinary page can link to player profile/org info pages as well

40. Top Scorer Page
• Lowest views and screen time, with highest exit time 56.1%.
Most likely due to end of usage requirement. There is no further
CTA or direction for user to explore.
• Views and time spent on page less most likely due to UI. The
page looks very monotonous.
• Recommend a redesign that includes options to create a primary
area to show top three scorers, with the rest as a slide down list
below. This also instills a sense of having won top rank.
• Custom/ multiple “default” profile pics for adding color.
• More prominent score section.

41. Media Page (New)
• Converting the news page into the tournament’s media section
containing images, videos and news of the tournament.
• Current news page has minimal views and screen time, with
13.5% exit ratio.
• A gallery section with images + video footage of the match in
short clips & news on the tournament
• Social actions on each section, allowing users to share photos on
any of their registered social networks (from main menu – user
profile). When a user adds a new network, those buttons will be
made available

42. Media Page (New)
• Can introduce in-app ratings (similar to instagram’s favoriting) on the
photo itself. The most popular photos across all tournaments are then
collected and added in the “photos” tab on the main menu. A user can
access these photos from anywhere within the app and it would be the
best pictures of each tournament. These can change weekly/monthly
depending on traffic. Same for videos
• Photo and video tab on main menu differs from this page as the tab
pages shows a collective info from all tournaments whereas Media
page is specifically showing media of a single tournament
• Would recommend removing news section altogether if its not
interesting enough for users. Can test data for 2-3 months to find out
more if the new revamp helps increase clicks. From current
understanding of data, it seems to be the least relevant item on the
app.

43. Player Profile (New)
• Accessible via top score page and fixture detail page.
• Creating a resume-app styled profile for easy viewing.
• Can export data as pdf (or word if needed) and share it via email.
• Sections would include
– Photo, Name, DOB, Location, Position
– Career
– Team and tournament info (on clicking, goes to org and tournament info
pages)
• Top players across all tournament can be displayed in main menu
feature as players of the week/month, giving a chance for users,
namely scouts, to quickly discover best players across teams. Over time
it also serves as motivation for players to better know their overall
competition

44. Org Profile (New)
• Can be accessed from tournament list, tournament info, fixture
detail and player profile pages.
• Org page currently has 6 sections, info tab, squad & Staff,
tournament stats & wins, news, photo gallery
• The stats can be broken up into three tabs. Org info.
Tournaments and Media.
• Need to see example content to better understand how the page
info can be sorted. Currently seems like too much information
available on this section.

45. Intro Registration
Facebook
New Acc
Login
Animation
Tournament
Page
Team Page
Point Score
Fixtures
Fixtures
Detail
News News Detail
Top Scores
Existing acc
Skip login
Current UX Flow

46. New UX Flow
Larger image attached in mail*

47. Why is this better?

48. Why is this better?
Page loops direct user across
App and in turn, stay longer
A more diverse menu allowing more features to be
accessed throughout the app, also allowing user to
explore more once his necessary usage is over Frequently
Updated
content that
user can
browse
periodically
User plays a more active role in
terms of liking, rating, sharing
Instead of just viewing app data

49. Why is this better?
Power search for any
player, parent or scout to
access virtually any info in
one click through the app
Apart from direct
search, linear 3-4
click flow to
access any type
of data, making
it fairly intuitive

50. Suggested Full page Ad spots
Ad spots on these 3 pages can
come after a slight delay upon
loading these pages.
Ad spots in these sub pages can
come before the page is loaded

51. Next Phase
CORE UI EDIT COMPLETE UI EDIT
Involves revamping of existing UI i.e.
button styles, font, spacing & alignment,
while retaining a majority of the data layout.
It would include fixing layout only where
absolutely crucial for ideal mobile usage.
PLUS
Creating the design for the new pages and
additional recommended features
Involves creating a fully new navigation
style based on suggestions mentioned in the
UX flow including revamping elements
mentioned in basic edit.
It includes near-complete restructuring of
layout, gesture controls and navigation
across data
PLUS
Creating design for the new pages and
additional recommended features
Will be sending a revised, more accurate breakdown of time and cost for each
separately upon approval and closure of UX.

52. THANK YOU