The OLA was looking to bring there 10 year old design up to current standards. That included improved functionality, assessing user experience needs, accessibility and responsiveness for all devices. This was to be rolled in on new applications being developed, rather than site wide.

The first project I undertook was the new online expenses for politicians so the public would have visibility as to what the politicians expenses were. I had to maintain neutral colors so that none of the political parties could be associated with the design.

I chose a light blue theme so as not to distinguish it from any particular party. The main menu is blue with the lighter blue being used to distinguish links in the sub-menu.

color pallete to be used on expenses application
figure 1

The new menu design was based on an expandable accordion concept. The main link is displayed and when clicked, it expands and displays sub-menu links under it. I used ARIA attributes for accessibility needs and confirmed adherence with the WAVE tool. This is a UX improvement for users with screen readers such as JAWS, VoiceOver and meets AODA requirements. All the code was validated before going live to ensure compliance with the W3C Validator tool. Not only is this an improvement for usability but it is also ensuring that the html meets the html5 specification.

light blue menu expandable accordion
figure 2
hand holding mobile phone displaying a mobile website
figure 3

When designing for the web the rule is mobile device design first and then as you expand to meet the higher resolution devices, the design will take this into account ensuring elements are arranged accordingly. An example would be the usage of datatables to display financial data and how the columns collapse in mobile but arrange horizontally on higher resoultions. This can be seen on figure 4 and 5 versions.

mobile version of expense report
figure 4

Based on a minimalist design, the site empowers the user with use of whitespace to seperate elements and provide a user friendly interface that is easily readable with accessible content. The menu stands out and clearly provides a UI that is easy to use so that information can be accessed with ease creating an excellent responsive user experience, on all devices (figure 5).

responsive design featuring desktop, tablet and mobile versions
figure 5