Design concepts for a re-imagining of the main Careers NZ homepage

  • CLIENT:Careers New Zealand
  • RELEASE DATE:February 15, 2018
  • TOOLS USED:Photoshop, Hotjar, Google Analytics
  • TAGS:UI, UX, Web Dev, Analytics

During the first half of the year in 2017 I was contracted by Careers New Zealand to come onboard as their primary front-end developer for three months and assist their web development team with meeting a number of their short-term goals with the Careers NZ website (; the main face of the organization to the public.

This included being responsible for tasks such as debugging, fixing and/or updating broken or poorly performing functions of the website, cleanup and optimization of code, fixes to responsiveness across mobile and tablet devices and assistance and collaboration with QA testers, and design and development of various pages/content.

During my time there I was also approached by my team manager who expressed a keenness to utilize and take advantage of my design skills and background experience in UI/UX, and so I was asked to use some of my time to look into analyzing the main landing page of the Careers NZ website from a UX and usability perspective to see what, if anything, could be improved. Based on gathered user feedback and collected data analytics including heatmapping (HotJar) and Google Analytics data about how users were primarily using and navigating the website it was determined that above-the-fold content on the homepage primarily received the heaviest amount of clicks and traffic, while below-the-fold content received lesser attention. Users often seemed to have quite specific goals when coming to the website, and it was also discovered that a significant proportion of users were skipping the primary navigation altogether and were instead utilizing the search function of the website to find what they were looking for instead.

Utilizing this information and after investing some time researching various opinions and advice on UX topics relating to the requirements I developed a number of conceptual design mockups for feedback. One of my goals was to give the ability for content creators to feature two or three key news items, articles or events above-the-fold; to do this I designed a segmented feature block / hero container / what-have-you, using three of the primary colors from the website's branding style guidelines as background colors and positioned it directly beneath the primary navigation.

Another of my goals was to feature a search bar in a much more prominent and noticeable position on the page, while also providing a more logical flow and structure hierarchy to the overall layout and key navigation elements, as well improving upon certain UI elements with an updated and more attractive look in order to hopefully encourage users more to scroll down and explore other content featured on the main page.

I also found time to design some unique, custom icons to be associated with the four upcoming revamped 'Career Tools' applications that had been in development and would be launched along with the homepage update. I designed a set of icons with a number of alternative variations using the 'line icon' design style. Although the team loved the hell out of the idea, sadly it was decided they wouldn't quite fit with the rest of the website aesthetic and ultimately a slightly more tactful and simplistic approach was taken to presenting the tools, again by making use of three of the primary colors from the style guide.

A number of brainstorming sessions and feedback lead to me developing a number of iterations of ideas and layout concepts, and a prototype layout for mobile device view was also provided to demonstrate how the UI and layout elements might stack:

Although leaving shortly before they had undergone a final round of approval for a go-live launch, I was contacted in early 2018 by the former team manager to let me know that the concepts had finally received a sign-off of approval and would soon be going live..

More of the project can also be viewed at my Behance page here.