case study: competitions hub website

ui/ux review (audit)


confidential information has been removed from this report and related wireframes.

part 1: homepage, login/join, my account

in addition to the notes and images below, you can see the wireframes that illustrate the proposed design solutions here. you can interact with the wireframes by clicking on the areas highlighted in yellow. titles, taglines and text in general are only suggestions with the sole aim to better illustrate the design concept.

homepage

above-the-fold
the above-the-fold area is crucial to immediately answer the following questions from users: what is this page about? why should I stay? what should I do now? we suggest to avoid any self-running slideshow and have only one background image (related to xxxxxx). there should be a clear, prominent message (title and tagline) and a CTA: the goal is to answer the questions above and direct the user to the next action.

navigation
the main navigation should provide direct access to the most important sections of a website. it’s preferable to avoid drop-down menus: they hinder the user experience and require a different design on tablets and mobile phones.

notes on current navigation
about us: suggestion to place this item only in the footer navigation. in any case, avoid the drop-down menu and bring directly to the page “Who We Are”. “Why to Join” and “Code of Conduct” shouldn’t be in this section: suggestion to place “Why to Join” directly on the homepage to entice users, and “Code of Conduct” under Terms and Conditions.
competitions: no drop-down. on selection, bring directly to a landing page with all the competitions.
clubs: suggestion to show this item only when a user is logged in. no drop-down. on selection, bring directly to a landing page with both My Clubs and All Clubs.
news: suggestion to place this item only in the footer navigation.
contacts: OK, possibly change to “Contact Us”.
login/create account: separate the two channels “Login” and “Join”. once the user is logged in, these two items will be replaced on the main navigation by an icon (user/person) and a small arrow next to it.
help: suggestion to add this item when the user is logged in. on selection, bring to the Help Center.
utilities: update the YouTube icon with the current version (play triangle).

below-the-fold
suggestion to remove “Headlines” and “Social Media” (or reduce their prominence on the homepage) and introduce “Why to Join” and “Winners” to entice users. there should be a CTA repetition towards the bottom of the page. the “Why to Join” section should briefly tell about advantages (fun + prizes), and try to gain the users’ trust (e.g.”20 competitions completed so far, 15.000 euros awarded to the winners”).

suggested homepage structure:
Hero -Why to Join - Competitions -Winners - CTA - Footer

homepage

login and join

the two channels are separated.

login
current implementation is generally OK, suggestion to remove the “Create Account” button. change the submit button’s text from “Submit” to “Login”.

join
in the registration form: remove password confirmation, I’m not a Robot, and the two checkboxes. implement a vertical sequence of text fields rather than a crossing one. no need to separate between personal data and access data. place the password field after the username and not after the email address. avoid the sex drop-down menu (there are only two options, they can be shown directly). don’t force the user to over-complicated passwords: if needed, introduce a minimum limit of 8 characters. change the submit button’s text from “Submit” to “Join Now”. don’t mention the newsletter. avoid showing “The E-mail has an invalid format” while the user is still typing.

after the registration form
the email sent should have, in addition to the link to verify the account, a thank you signature, and a message in case the email was received by mistake. new users should be logged in immediately after clicking on the link provided in the email, and land on the Competitions page. a quick onboarding tour should be offered. there should be no “negative” notifications on top of the page, such as “you don’t have an active subscription”.

call-to-action buttons
always make them look like clickable buttons and give them a color and size that emphasizes them. the text on the button should be short, start with a verb, and clearly state what users will get if they click on it. make sure that the CTA stands out, but still fits with the overall design of your website. keep it simple.
- Join: use the same color for all the CTAs related to Join (e.g. Join Now, but also the button at the end of the registration form). this color must be unique in the website, and “strong” (options: orange, red, yellow).
- Login: light blue, light green.
- Other CTAs in Clubs and Competitions: color needs to stand out, but be less prominent than the color used for Join. good options are still orange, red, yellow.

login join

my account

there is no need to have separate tabs, all the information can be shown on the same page. remove the possibility for the user to change the email address. show only data that is relevant, anything more will only add cognitive load to users without additional benefits (e.g. is it important to know the exact time a xxxxxxxx was created? or, is there a need to mention again that the game the users will play is xxxxxx? the fields in the personal data should be identical to the ones used during the registration process. use the term “xxxxxxxxx” instead of “Game Accounts” to avoid confusion.

account

part 2: competitions, clubs, membership, payment

you can see the wireframes that illustrate the proposed design solutions here.

competitions

all competitions page
all the competitions on one page: at the top the ones that the user is currently playing/played, below all the others (ordered based on date). implement infinite scrolling. filters should be placed at the very top, next to the page title: the main filter should be “xxxxxxxx”, other filters such as “game mode” and “status” could be placed under a common “All Filters” tab as they are less important. the remaining filters (date, name, game) could be omitted. on each competition tile, show only the information that is really relevant, without overwhelming users. the amount that the winner will get should be shown to entice users. add a CTA button on each tile: “See all details and join” (new competitions) or “See all details” (running or finished competitions). the competitions should be subdivided into 3 categories: Registering Now, Running, and Finished. the current “In preparation” option should be part of the Running category.

a competition page
similarly to the section “My Account”, there is no need to have separate tabs, all the information can be shown on the same page (Details, Gamers, and Rules) with the exception of Matches and Bracket. show only data that is relevant, anything more will only add cognitive load to users without additional benefit.

competitions

membership and payment

new users won’t be asked to pay for membership until they decide to join a competition. we suggest to discount the first tournament for an amount equivalent (or higher) to the annual membership cost (good news for the user > positive attitude). asking a new user to pay for both the membership and tournament could represent a barrier. when a competition is open for registration, there should be a prominent “Join Now” CTA on top of that competition’s page. clicking on this CTA button, brings to a page where only the relevant details and the payment options are shown (everything else is removed as it could represent a distraction for the user). payment options (e.g. PayPal and Credit Card) should be clearly visible, as well as the amount the user is going to pay. inform users that you will send a confirmation email as soon as the payment transaction is completed.

payment

clubs

all clubs page
all the clubs on one page: at the top the user’s clubs (My Clubs), below the others (All Clubs). similarly to the Competitions page, the “xxxxxxxx” filter should be placed at the very top, next to the page title. the “name” filter could be omitted. add a CTA button to each club’s tile: “See all details” (My Clubs) or “See all details and ask to join” (All Clubs). show a “Create a New Club” tile that acts as a CTA.

a club page
no need to have separate tabs, all the information can be shown on the same page (Details, Players, Club Stats, and Next Game) with the exception of Matches and Players Stats. show only data that is relevant. a notification icon (bell) informs about all the news. under the settings icon (cog) the user will find the option to leave the club.

club