Website and design system

Sustainability Victoria (SV) expressed to us that their public-facing website and CMS were due for an upgrade. Our goal was to develop a new design system and component library for SV, which we could then use to create a brand new website with a flexible content management system.

We worked closely with SV throughout the project, leaning on their subject matter expertise for the development of an information architecture, which formed the source of truth from which the website was developed.

With our full project team resourced on this from start to finish, we could ensure that all disciplines were consulted on key decisions within each project stage. With this approach, we could continually translate the immediate needs of the website back into a set of requirements for the design system and component library, which would serve SV beyond this website into future projects.

This allowed us to create the overall design system and component library in parallel with the website itself.

We also implemented a feedback module on most pages of the new website to constantly collect feedback from site users, allowing us to continually update and enhance the website over time to suit changing needs.

We undertook a number of stakeholder workshops with SV staff, which helped us understand the strengths and pain points of their current website for us to then build upon.

We established a series of key page templates for the new website and broke these down into individual reusable components, to ensure site-wide consistency and content authoring efficiency.

We then created interactive, annotated wireframes and a functional specification document to illustrate the key page templates, including the components available on each; essentially forming the basis of the design system that would sit at the heart of the website.

Building a flexible design system

Once the wireframed pages and components were approved, we took these into visual design. We designed each page type first, with sample content, to see all the elements working together in a real context. From there, we extracted these elements and design styles into more granular components. These styled components would serve as the basis of the SV design system for any future websites.

This required us to think outside of the boundaries of this specific project, calling on our learnings from the stakeholder workshops, whilst also turning an eye to the future and what may be required by SV going forward.

Custom component library in Craft

Using Craft CMS, the frontend team built out the previously identified components, and used these to set up the various page types. By establishing page types in the CMS, this put some structure around how the components should be used, while also giving SV content editors flexibility in how to build out each specific page on the website.

The built out components resulted in a custom component library for SV; essentially a functional, interactive version of the components in the design system. This allowed page templates to be completely modular, generating HTML content based on the components added to each page in the CMS.

This modular approach to element markup means that any future SV projects can be built from the same set of components ensuring not only consistency and efficiency on a page by page basis but also on a site by site basis for any website within the SV suite.

The new website not only enabled SV content editors to more easily manage their content, but it also saw improved performance amongst users.

Shortly after launching the new site, we saw a 3% increase in the number of sessions per user, a 16% increase in pages per session, and an 11% increase in the average session duration.