Website

NSW Police

Date:

Category: Portfolio

Tages: Design System, Government Department, Lorikeet, Pattern Library,

Joined the project as a frontend lead to lead the frontend team and to ensure to deliver the product with high quality code in timely manner. Also provided the front-end technical advices to the backend engineers and other team members.

Leading Front-end Team

NSW Police is one of the biggest government department in NSW, Australia – thousands of people visiting the website every day.

I joined the project as a frontend lead and worked along with 2 more frontend developers as well as designers, backend engineers and technical consultant.

My main responsibility in this project was to ensure to provide the solid frontend architecture and technical advice to the technical consultant as well as the frontend team.

A11y

I paid a lot of attention on the accessibility to not only pass the WCAG AA, but also provide the proper HTML markup and ARIA attributes. Moreover, I made all components keyboard-accessible to ensure all pages are accessible by all users.

NSW Police – Full Desktop

Lorikeet Pattern Library

I utilised the Lorikeet pattern library which I have built with my front-end team at Squiz. It allowed me to provide quality code and deliver the project on time.

Using Lorikeet also allowed us to spent more time on more sophisticated work, for example the “Contact Us” section which we had to build a multi-level menu pattern to help users find information more accurately and easily.

NSW Police – Contact Us

Responsiveness

From the very beginning of the project, I always discuss with the front-end developer and make sure we understand how we are going to approach making the website responsive.

For NSW Police project, we discussed what would be the best way to make sure the website looks great in all devices.

On top of that, even if there was no design provided in certain screen size, we still ensured to have the website looking good in all possible screen sizes and devices.

Technical Challenges

One of the biggest challenges myself and technical consultant were trying to solve was the News section.

NSW Police – News

The data returned from the server wasn’t in any certain format or included any specific patter we could retrieve. Also it was in HTML format instead of XML or JSON. So it was quite hard to layout and style the news feed.

To solve that issue, I tracked the data as of HTML and converted it into an array and added extra pattern where necessary. In that way, I could target the CSS to layout the News feed cards and style each of them.

It worked out really well and it comes with the “Load More NEWS” button too.

Overall

Some of the components were quite challenging to developed but overall again I had so much fun working with my team and other team members too.

I would especially like to give a big shout out to my team members, Eve (Senior Front-end Developer) and Jeremy (Front-end Developer). Well done!