NESA WEBSITE

How might we make the NESA website more accessible from any device?

The NSW Education Standards Authority (NESA) provides information for students and teachers, including results and awards for students each school year.

PROBLEM

The tables featured in the merit lists section of the website contain the details for the student, their school and the top band courses. This section of the website is:

Not accessible
Not optimised for mobile

GOAL

Understand the existing problems and create an adaptive User Interface where anyone can easily search and filter award results on a desktop or mobile browser.

MY ROLE

UX Designer
UI Designer

TOOLS

Figma
Lighthouse
WAVE

THE PROCESS

EXISTING DESIGN

As this was a quick design task to redesign specific sections of the website I reviewed the existing design on both my mobile and desktop browser to gather any further feedback that needed to be provided to the product owner. This included hovering over and clicking on all the links, viewing the results and general usability of the website as it existed now.

ACCESSIBILITY TEST

Using Wave and Lighthouse to check accessibility, there were numerous issues with the current website with the most common error being empty and redundant links.
Other issues include form controls having either multiple form labels or none at all. The search field is an example of this and by having multiple labels it can cause assistive technology to not read the label properly or at all if there is not one used.

MOBILE REDESIGN

The goal for the mobile redesign was to ensure that the table was designed for mobile use and was easy to use.
Other changes to increase usability and accessibility included:

Search field added rather then just filtering by A-Z

Breadcrumbs updated to suit mobile view

Table limited to 10 results with pagination added to reduce scrolling

Table is movable using a swipe gesture with the student name column locked

Download, Print and Share consistent to desktop view and placed under content

DESKTOP REDESIGN

Using the Digital.NSW Design System the desktop was redesigned to look and feel familiar with other NSW Government websites.
Other design changes included:

Clickable drop down menu bar instead of being triggered by hovering

Years of graduation added as filters and removed from side navigation

Breadcrumb includes parent pages only

WebReader ReadSpeaker added for accessibility

Ability to search for a name, school or course

Total number of results shown

Download, Print and Share buttons updated

Pagination added to easily navigate through large number of results

Student names are written Firstname Surname as this is less formal and easier to read

Using Digital.NSW design system to improve WCAG 2.1 AA compliance

•