Jordana
Harrison

WorkContact

Experiential

Civic Action Commitment Wall

Laravel, Vue, MySQL, WebSockets, GSAP

Small colourful circles forming the shape of a triangle

About the project

The Civic Action Commitment Wall was created as an experiential installation for the Civic Action Summit, a gathering of leaders from various sectors such as politics, business, and community organizations. The wall allowed participants to publicly commit to addressing issues in three pillars: trust, prosperity, and affordability. Commitments could be made via a QR code linked to the wall’s website, where users could post their pledges. As each commitment was submitted, it would interrupt the wall’s passive display to prominently showcase the new entry in an animated, visual form.

  • role
    Lead Developer
  • year
    2023
  • agency
    Art & Science

The mobile commitment flow

Technology

The project was built using Laravel as the backend framework to handle the submission and database of commitments. Real-time updates to the wall were made possible through Websockets, ensuring that new commitments instantly interrupted the passive mode to display the latest entries. The interactive visualizations were powered by Vue and GSAP, allowing for smooth, responsive animations that showed the commitments filling in the abstract shapes. Each pillar was represented by a different shape, and the growing number of commitments added to the dynamic representation of the collective effort.

The changing shape in real time was also reflected on the mobile form experience.

Commitment Wall

The commitment types were represented by abstract shapes: squares, circles, or triangles, each representing one of the pillars. These shapes were filled with smaller circles, representing individual commitments, growing throughout the event. The visualization illustrated the collective effort toward solving community issues, with the shapes becoming more defined as more leaders contributed.

Below is a video of the passive commitment wall cycle as a new commitment is made and transitioned back into the passive mode.

Get in Touch

Interested in working together?
Find me on LinkedIn or drop me a message using the form.