NSW ACI: An Accessible Health Website

Role: User Interface Designer, under the in-house Design Manager
Tools: Adobe XD, Bootstrap design system
Standard: WCAG AA, required of all NSW Government agencies
Year: 2019

I designed the UI for the NSW Agency for Clinical Innovation's new website: accessible to WCAG AA, responsive across desktop and mobile, and delivered with a component library developers could build from.

Impact

A WCAG AA accessible design for a NSW Government health agency
Separate desktop and mobile component libraries handed to developers
The new designs now live, rolled out in stages by an external development team

Challenge

ACI needed a new website that met the WCAG AA standard all NSW Government agencies were required to meet, reflected its new branding, and worked on any device. Some UI work had already been started by another designer, and didn't yet align with Bootstrap, ACI's chosen design system.

The Approach

My first task was to adjust the existing designs to align with Bootstrap. From there I analysed the old site and designed responsive components and landing pages in Adobe XD for ACI's new brand, testing them myself on desktop and mobile.

Accessibility shaped the user experience throughout, not just the colours. And to make handover clear, I separated every component into its own library for desktop and mobile, so developers could see exactly which components each page used and how they looked.

Design

The homepage started as an annotated wireframe: six numbered sections, from the hero and four entry points down to the social media feed and footer, with every element lettered for reference.

The homepage and the Innovation Exchange page on mobile. — The homepage and Innovation Exchange on mobile.

A content page on a tablet, with a numbered 'Introduction' heading over a dark blue banner and body text below. — A content page on tablet.

The homepage, from wireframe to final design

The annotated wireframe for the ACI homepage, in greys with pink section numbers 1 to 6 and red lettered callouts: the hero 'Leading innovation in clinical care', four entry points (clinical areas, clinical resources, statewide initiatives, Innovation Exchange), featured content cards, featured resources, the Innovation Exchange, About ACI, a social media feed, and the footer. — The annotated wireframe.

The full ACI homepage on desktop: the hero 'Leading innovation in clinical care', four entry points (clinical specialties, clinical resources, statewide initiatives, Innovation Exchange), featured stories, featured resources, the Innovation Exchange, About ACI, social media and the footer. — The final design on desktop.

Clinical resources and search

Clinical resources is ACI's library of guidelines, fact sheets, research and reports. My first iteration searched it by keyword, category and type, with suggestions as you typed. The final design added A–Z, Topics, Type and Latest tabs for browsing, and a site-wide search that groups live results by content type.

Clinical resources, first iteration

First iteration of the Clinical resources page: a blue banner, a search tab with a keyword field, category and type dropdowns and a Search button, then featured and latest resources. — Search by keyword, category and type. Tap to see the full screen.

First iteration of Clinical resources with the category dropdown open, listing clinical areas such as Aboriginal health, acute care, aged health and cardiac. — The category dropdown open. Tap to see the full screen.

First iteration of Clinical resources with "heart failure" typed into the keyword field and a list of suggested searches below it. — Suggestions as you type. Tap to see the full screen.

First iteration of the Clinical resources results page: filters down the left, and a list of resources with titles, file types, dates and descriptions. — Results with filters. Tap to see the full screen.

Desktop designs

Final Clinical resources page on desktop: a banner, an intro line, tabs for Search, A–Z, Topics, Type and Latest, a search form, then recently viewed and featured resources. — Clinical resources: search, A–Z, Topics, Type and Latest tabs. Tap to see the full screen.

Clinical resources with the Topics tab open: three columns of clinical topics from Aboriginal chronic conditions to urology. — Browsing clinical resources by topic. Tap to see the full screen.

The homepage with the site search open: "heart failure" typed, and a panel of matching webpages, videos and PDFs with tabs for all, documents, webpages and videos. — Site search with live results grouped by type. Tap to see the full screen.

The search results page for "heart failure": filters by content type on the left, results with file-type icons in the middle, recently viewed on the right, and pagination. — Search results, filtered by content type. Tap to see the full screen.

The About mega menu open under the main navigation, with columns for Overview, Our People, Connect, Services and Corporate. — The About mega menu. Tap to see the full screen.

The Spinal Cord Injury Services page: a banner with a side menu for the network, a featured Pressure Injury Toolkit, and carousels of clinical tools, organisational models and resources for patients. — A clinical specialty page, with its resources in carousels. Tap to see the full screen.

A nutrition fact sheet page: a photo banner, download and text-size controls, numbered sections of text, a contents panel and quick links on the right, and recommended resources below. — A fact sheet, with a contents panel and quick links. Tap to see the full screen.

Mobile designs

The homepage on mobile: the hero, four entry points, a featured carousel, featured resources, the Innovation Exchange, About ACI and social media. — Homepage. Tap to see the full screen.

The mobile menu sliding in from the left, with Clinical Specialities expanded to show its links, then Services, Innovation Exchange and secondary links. — Menu, with a section expanded. Tap to see the full screen.

A long report on mobile, Appropriateness of Surgery: Knee Arthroscopy, with key findings and numbered chapters, each with a summary and a link to read more. — A report, split into chapters. Tap to see the full screen.

A report, split into chapters. Tap to see the full screen.

The report contents panel on mobile: numbered chapters, with chapter 4 expanded to show its three sub-sections and the current one highlighted. — The report contents. Tap to see the full screen.

A report chapter on mobile: the chapter introduction on a dark banner, text-size and share controls, body text, tags, quick links, and a link to the next chapter. — A report chapter. Tap to see the full screen.

A report chapter. Tap to see the full screen.

Project Reflection

Outcome

When COVID-19 hit, the project was paused for more urgent priorities. Once the pandemic was no longer ACI's main focus, it restarted in stages with an external development team, and the old site was gradually replaced by the new designs, which are now accessible to the medical practitioners and professionals who use it.

What I learned

A well-documented component library outlasts a project's interruptions: it let the work resume, with a new team, long after the design phase ended.

Have a project in mind?

Let's discuss how my design system, accessibility and product strategy skills can help your team.

← Back to Work Let's Talk

NSW Agency for Clinical Innovation

Overview