Work and Income UI Improvements


Work and Income receives an average of 28,000 views per day, and being one of the main sites of support to New Zealanders for COVID-19, we wanted to ensure we had a site that was straightforward to navigate and quickly highlighted important information.

I worked as 1 of 3 designers in an Agile standing team to support this site post COVID-19 lockdown. Every 2 week sprint I would pick up a couple of small UI improvement stories and work closely with the Business Analyst and Communications team to meet the requirements for these. This work often needed to be completed quickly, with limited budget and fit in with the current content/design of the site. I would demo my work at the end of every sprint to our stakeholders to gain feedback, iterate and get sign off.


The main usability problem I found with the alert banner was the colour. Red is generally a colour used in emergencies so this was a big misuse. Users may begin to look past this and in the case that we did need to highlight emergency information, it may have been ignored. I also found that the position of the alert felt out of place, and almost got in the way of the header and hero.

I moved the alert banner to the top of the page as this is typically where a user would expect it to be. I matched the icon with those across the rest of the site for consistency and added a dismiss link to get rid of the alert if wanted. I made sure to work with the developers around the use of cookies, so that it would appear on every new session in case there was a new alert added and so the user could find pre-read alerts if needed. I changed the default state of the alert banner to be a blue within the colour pallete of the site, but also created a red emergency option for when needed.


Promo boxes are popular on sites to highlight important information within lots of content. I found on the Work and Income site that these were okay but the usability could be improved. I did an audit across the site and found multiple versions of promo boxes with different colours and layouts, so I also wanted to improve the consistency.

I took the same blue I used for the new alert banner as this can be associated with ‘information’. I used this on the left border line, and used a slightly more transparent version of this as the box background to really highlight the information within the content and keep within our colour palette. I improved the structure of these sections with more padding, and broke up the content with a header and paragraph.


Similarly to the promo boxes, the file downloads were okay but I thought the usability and visibility could be improved.

I wanted to keep consistency with the promo boxes and alert banner, so I carried over the box look and left aligned icon. I went with grey as a neutral but visible balance and made sure the whole box was clickable, not just the link for usability.


This section of the site was created during the peak of COVID-19 for additional information. It should have been taken down once irrelevant, however the Communications team started using it for non COVID-19 related things and begged us to keep it. The problem I had with the section was that it was used for important information, but this is what I presumed the alert banner would be used for as we already had the ‘latest articles’ section at the bottom of the home page. I found it also looked messy and out of place, so I worked with the Communications team to make this section more usable.

We decided to turn this into a ‘noticeboard’ where they could upload recent and important news that users should see when they land on the site. I added in a title to the section so it’s clear what the information is, with each item displaying a date, title and blurb.

These were small improvements, but have made a big impact to the site overall.


After this work was completed with lots of positive feedback, I got asked to do a review on the Studylink site and see if I could replicate the improvements from the Work and Income site.