Problem
Sustainability plays a vital role in higher education, shaping institutional culture and attracting environmentally conscious stakeholders and students. However, on the main Australian National University website, sustainability content was buried under layers of content, leading to reduced visibility, limited community engagement, and a lack of awareness.
Solution
Develop a new responsive Drupal 10 website and design clear user journeys to increase and improve content accessibility.
Duration
6 months
Deliverables
Low-fidelity wireframes of the homepage and all level one pages.
User-friendly content architecture (content types, taxonomies, and paragraphs) to support publication workflow and flexible layouts.
Responsive user interface using the ANU stylesheet, Bootstrap, and custom CSS for website elements and layouts.
Reusable and auto-updating content feeds using Drupal views.
Responsibilities
Frontend and backend development
Strategy and planning
UX and UI design
Project management
Approach/process
Website strategy
As a new website, identifying the user journey was essential through a website strategy session - identifying pages on paper and sorting them to optimise the website sitemap.
Website wireframing
I conducted low-fidelity wireframes to visually demonstrate the user experience of the website to streamline the project as the ANU website theme was well documented.
Content modelling
I applied content modelling to organise and create structure for the website to ensure development was clean and user friendly for those who have no developer experience - defining content types, elements and user experience consistencies across the website.
Frontend and backend development
Content workflow
To provide an easy publication workflow, I used Drupal paragraphs, custom blocks, and views to support flexible content layouts and make it easier for non-developers to upload content.
Content types development
Based on the content modelling, I created and populated the content types with the identified fields and ensured that they could be reusable and flexible for any content type to reduce any unnecessary use of content fields for clean development.
Website templating
I used custom responsive HTML and built-in Drupal layout functionality to create custom templates alongside the ANU web style guide for each content type based on the low-fidelity wireframes allowing ANU Sustainability staff to publish pages without developer input.
Custom reusable feeds
To reduce the need for manual content updates, I built dynamic feeds using Drupal views that auto-populates content, ensuring internal and external ANU users have access to the latest sustainability information.
Responsive development
I used Bootstrap 4 and custom CSS to ensure all templates, views, and custom blocks were accessible and responsive for all devices to maximise the user experience and increase website traffic.