Fair Work Commision

  • UX
  • Web design
  • Front-end development

The Fair Work Commission is not only a tribunal, but a place where everyday Australians come to find resolutions to work-related issues. The challenge was to translate a complex system into an intuitive and informative platform that would suit an audience spanning across multiple target groups.

fwc-imac

UX, wireframing and protoype

The wireframe was a key stage during this project. A huge amount of work has been done on the IA (see prototype example) in order to categorise the information and the audiences. From there the challenge was to give a simple access to complex and sensitive information. Landing pages per audience were also created  to facilitate the user’s navigation. If you want to know more you can have a look to some early research and prototypes we’ve worked on: IA with big menu, IA with off canvas navigation, Homepage experiment.

Wireframe

Research & moodboard

Fresh ideas needed to be introduced whilst following tight government guideline (see the new web styleguide). It should  be modern, serious, clean and engaging. The art direction was to bring images into a 99% text based website. We managed to produce quality banners, iconography and colours to create this feel.

moodboard

Front-end

The site is developed in Drupal and is fully responsive from wide screens down to mobile devices. The site uses all the latest features we can imagine to create this experience… font icons, svg, retina images,  off-canvas navigation, sass… Not much more we can say, just go try it out!

fwc-screenshot4

Design

This would be one of most efficient design phase I’ve ever worked on. Despite design had to go through different working groups we managed to sign it off in 2 weeks. A clean and elegant design, grey gradients with a hint of blue and yellow. We also introduced  a colour coding for the target audience landing pages to allow the user to easily identify where he is.

fwc-screenshot2

Basic information page with dynamic TOC at the top and full bleed  effect to balance  the design.

fwc-screenshot3

Section landing pages with sub-sections and summaries. Use of a grid view with a nice and bold font  to create an appealing look and feel with an 100% text based content.

fwc-screenshot1