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.
As the industry representative, the Rail Delivery Group had amalgamated several microsites over the last few years; with the widening of content, its navigation had grown. We knew that the navigation structure would significantly impact conversions, enquiries, and bounce rates.
As an information and service website, it's content-rich, with policies, publications, timetables, forms, and documents, all of which are essential to its stakeholders. How could we present information in an easy-to-use and more engaging way? For example, improve human usability and readability; how could we simplify search and make content more visually attractive!
The RDG website has over twenty different member groups, with special access to different areas. In addition, RDG staff consists of site publishers, managers, and administrators, all with additional privileges. With a wide range of users, the challenge was to simplify creating content for both staff and members. Could we lose complex admin screens, reduce training time and improve the workflow?
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.