The UX of the AFC Media Channel

Creating a user experience for everyone. Incorporating the brand design of the organisation, the right legible fonts and consistent use of colors.

Brand design

For the press that will use the media channel it’s important the style won’t distract. For the Asian Football Confederation we incorporated the primary branding colors blue and yellow. In the media channel you will find the main navigation in the AFC blue and the most important buttons have a yellow background color.

Roboto Condensed

The complete media channel is using the Roboto font by Christian Robertson (Google Fonts). We chose for the condensed version for a couple of reasons:
1) Most of the text is not very dense, there aren’t a lot of paragraphs or text pages.
2) Much of the information is stored in tables, a font that save horizontal spaces makes sense.

Example of Roboto

Example of Roboto

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

Description of Roboto on the Google Fonts website

Buttons, elements and states

The 3 styles we designed for the buttons are primary, secondary and optional. The sizes also differ to give more attention to particular screen actions.

Login page with primary, secondary and optional button styles

Login page with primary, secondary and optional button styles

Event colors

We also made it possible to color code a event. This way you can easy distinct the different events from each other.

Color coded events

Color coded events

Simple layout for registering and the accreditation of events

We made sure the pages for registration is simple as possible with a clear 1 column layout and helpfull hints on the right side of the screen. If there is a field not filled in you will receive an error message highlighted in red.

The Registration page

The Registration page

Media Organizations

That are using the Media Channel of the AFC