New Webflow Website Launch: Going Green Together

Documenting how SIDE designed, built and delivered Going Green Together, our latest no-code creation.

Noam
SIDE Labs
4 min readSep 29, 2021

--

📑 The brief

Encourage and support non-profits in the North East to take climate action.

Notes

The website part of what we created — https://www.goinggreentogether.org

🕵️‍♀️ Our proposal

We put together a proposal and an appendix showing our approach, timeline, experience, and some initial discovery and design work. We produced a project budget using the Catalyst budget template.

Team

  • VONNE (client) — Concept & Content
  • SIDE Labs — Design & Build = £25,000
  • di:ga — Comms & Engagement Strategy = £4,000

⏰ Project timeline

The project lasted 10 weeks —mapped on this timeline in Miro, and below.

Project timeline on Miro

📝 Ways of Working

As with every project, we start off by deciding how we’re going to work together. How we meet, capture work, and collaborate.

Meetings

Task management

  • Trello Board — there are some small bits we are finishing off

Collaboration

  • Slack — where we chatted about the project and shared files
  • Miro Board — where we worked together and shared thinking throughout
The Going Green Together collaboration space on Miro

🏷 Naming & Branding

We spent a few weeks brainstorming names. After much exploration (see below), we settled on Going Green Together. All about going green and working as a collective. We also wanted to create a brand that had the potential to be reused for other regions. Plus it’s a solid domain name:

https://www.goinggreentogether.org/

🎨 Visual Design

We explored a range of visual directions. See the Miro board here and here. The finished brand identity combines a limited colour palette with simple line art. We wanted the brand to feel lean and clean, and be inherently environmentally friendly. Small image sizes, quick load times. Using up little ink in print. That kind of thing.

We applied this approach to north east landmarks, to conjure a sense of place and create something the north east VCSE community could be proud of.

📐 UX & UI Design

The site developed our testing carried out on the VCCA prototype. The core of the site combines editorially written climate action “steps” and real-life interventions and changes from VCSEs in the North East on their journeys to becoming more green.

We built out an events section, newsletter and blog using no-code tools and services, listed further down.

Developing the information architecture
Early wireframes of key pages and areas

🧰 No-Code Development

We built a clickable prototype in week 3. This gave us something to prod and play with early on. It bought one or two ideas to life. From there, we iterated weekly. We developed un-styled pages until week 7. Then we applied visual design.

SIDE builds in Webflow plus best-in-class no-code tech.

For this project, we used:

  • Webflow — to build the final website, Going Green Together 👷‍♀️
  • Revue — to create and send out newsletters 🗞
  • Meetup — to publish Meetups and build community 👋
  • Medium — to publish blog posts ✍️
  • Zapier — to send sign up emails from the site to the Revue subscriber list 📨

💬 Comms & Engagement

Flo at di:ga worked with us throughout the project, offering domain expertise, feeding into key messaging and brand development. Key outputs included the Comms & Engagement Strategy & Press Release Template.

We also built a library of social media assets for Instagram, Twitter, Facebook etc using Canva. See the Instagram experimentation below.

👟 Next steps

Monitor usage of the site. Gather feedback from upcoming Going Green Together Meetups hosted by the VONNE team. Add items to the Wish List of our Trello board.

Plan. Review. Iterate!

🤓 Read more on the VONNE blog: Introducing Going Green Together

--

--