To redesign the RDG website to be more visually engaging, accessible to those with visual impairment, simplify its navigation, present information in an easy-to-use way and lastly, prioritise essential information primarily for its stakeholder audience. The secondary set of priorities was to advance functionality and improve the frontend workflow for RDG staff and its member.
Each column represents a category group, with further sub-category menus making it easy to navigate. On smaller devices, such as mobile phones and tablets, we opted for in-page searches and navigation, allowing us to remove sub-category menus further.
The result was a website with over 1000 public-facing pages that can be navigated both quickly and efficiently.
Driven by human research and the WCAG standard, larger font sizes allowed us to improve text legibility. Menus were made more evident by darkened menu items and the use of white space. Underlines for text hyperlinks improved visibility with web-accessible colours. In addition, we carefully balanced the design elements with AA and AAA compliance. One example was customizable image overlays, enabling the publisher to darken a background image when overlaying text. The results were a visually engaging website that is clean, clutter-free and presents information clearly and readably.
By making the menu editing page aware, site publishers can edit the menu directly (please hover over the image) without using a complex screen. The same principles extend to creating a new menu item for a page.
It allowed for documents to be uploaded quickly and effectively within three clicks from any page (please hover over the image). No need to visit the backend admin screen; thus, we could reduce complexity and improve efficiency.