Accessibility-first website for the brain injury information hub, Synapse.

UX / UI, Website Design, Research
Synapse
Synapse is one of the leading brain injury information services in Australia. Their existing website was outdated, not accessibility friendly and hard to navigate. I designed a new, accessibility-first website for users with a brain injury plus their carers to access information in an easy to navigate and read format. Researching heavily into deeper accessibility outside of the usual colour / contrast AA compliance, the website incorporates design decisions to help combat fatigue, aid in memory loss, and provide assistive navigation.
https://synapse.org.au/

Accessibility Considerations

Before any modules or pages on the website were designed a comprehensive styleguide was created to ensure consistency across the website and that accessibility requirements were met from the beginning.

Typography

Many fonts were tested for readability and accessibility (including common fonts like Verdana and Helvetica) before deciding on the two main website fonts, RT-Raleway and Roboto Slab. When testing fonts, I analysed the design of similar letters and numbers, such as a capital I and lowercase l, or a d and b. Some typefaces have very little differentiation between these letters, making it difficult to discern letters for impaired readers.

Colours

The Synapse brand colours were assessed for AA standard accessibility and used accordingly across the website.

Dark Mode

The Synapse site also includes a ‘dark mode’ for users to switch to at any time via a toggle in the top navigation. For some users, having the colours inverted can improve readability and reduce tiredness on long form copy on a webpage. This is because there is less ‘brightness’ for a users eyes to process, but with the same amount of contrast between elements.

Iconography

A custom suite of icons were designed to bring colour into the website.

Navigation

Each element of navigating the Synapse website has been thoroughly rationalised through research and workshopping. The website features a two-layered top navigation based on hierarchy.  There are no drop-down menus incorporated to minimise frustration on defective loading. The top of each page features a consistent back button, breadcrumb navigation and introductory section - this gives the user context of where they are on the site.

Modular Approach

Using this design system, modules were created to be responsive across screen sizes and minimise unique development.

Final Result

Pages were created based on the system and modules, creating a cohesive and easy to use experience across the site.

Credits

Agency: ROMEO Digital. Project Management: Jennifer Vass. Developers: Chris Nowlan, Justin Walduck.