Open source code is part of a sustainable circular design economy
In our work with Circular Open, an offshoot of Melbourne Design Week, we amplified their conversations about sustainability in design by selecting an easy-to-use CMS and writing reusable open source code.
Image 1: The Circular Open website displayed on a desktop and mobile device.
The challenge
‘We want a website that’ll connect, share and showcase the event and work of top Australian designers. It needs to be clean, modern, accessible and user-friendly, especially for people using mobile devices. An open source website is as important to us as our exhibition event.’
That’s the brief we received from our clients, E tu E tu and Ulla-Britta Westergren, who developed the Circular Open Design website to promote the By-Product group exhibition event as part of Melbourne’s 2021 Design Week.
We loved this project proposal with its strong focus on circular design, repurposing and knowledge sharing as a way to build design resilience, and felt the reusable nature of everything that we’d build for this website would be well suited to the brief. One of our underlying company values is sustainability and the ethical use of resources, and we’ve always been heavily involved in open-source web design, which relies on the efficient use and re-use of code.
The website needed to help our clients achieve their objectives for the event, which were to:
Promote the exhibition event and enable ticket sales and social media sharing
Provide an opportunity for participating designers to be introduced to NGV curators and collectors for potential networking, commissions and future exhibits.
Create an open and inclusive space for conversations on sustainability and the urgent need to work towards a Circular Economy in Melbourne’s design community.
Demonstrate the power of community and knowledge sharing by creating an open-source library of instructional guides inspiring others to make from waste.
Provide an opportunity for Melbourne designers to come together and showcase their objects made from waste and provide a platform for their design to be purchased.
Support the community by donating auction profits 50/50 to participating designers and charity.
The website also had to tick these boxes:
Modern design
Created on an open source platform
Simple authoring for ease of use
Mobile-first design
Use accessibility best practices.
Image 2. Image on left is a lo-fidelity sketch of a wireframe. Image on right is the high-fidelity design created in PyroCMS.
What we did
We began with a CMS Audit to find the best open source CMS for this project.
CMS considerations included:
Ease of use for content authors
aesthetics of page editing tool
ability to find and create pages
ability to create content, links, attach images etc.
Accessibility plugins
Number of steps for getting started for a developer
Availability of off-the-shelf modules
How configuration would be managed.
The client provided the branding and identity assets and a style guide. They had a specific request to bring animation into the logo as they wanted the arrow to represent ‘circularity’.
We used laser-focussed co-design sessions to quickly gather all the information about what success looked like for this project.
The proposed design was tested by the client stepping through all the features using a lo-fi wireframe of the site.
Image 3: The client provided a static PNG logo, requesting that the arrow circulate in the website hero section to represent ‘circularity’.
Image 4: A screenshot of the Contributor landing page. This page linked to Contributor profiles where visitors could access photos, process videos, contact information and URL links to access the designers’ open-source creations.
The result
The resulting Circular Open website was produced and launched in two months and it worked on all levels.
It was beautifully designed, easy to use, written in open source code and made available for people to re-use.
Importantly, this work enabled us to be part of discussions about sustainability and open source principles.
We’re serious about lowering our, and our clients’, environmental footprint in as many ways as possible – code is our material and sharing code is one small step in that direction.