detail-cloud

Behind the scenes of our own website redesign

Design thinking
19.10.2021
Paul
Paul
Digital Director (Creative & Strategy)

Digital Garden's last website served us well for over half a decade − but it was time to practice what we preach with a complete redesign and rebuild.

As that site grew older year by year, we became self-conscious that we were no longer leading by example. The site was built on what had become a legacy version of Drupal and we felt the design had become dated. From an administrative perspective, the way we had configured the CMS years ago no longer suited our content strategy and SEO needs.

Our team was feeling increasingly constrained by the inflexibility of our own website. We realised it was time to become our own client!

Our approach was no different:

  • Comprehensive content audits and content strategy work to refresh messaging to align with the organisation's mission and its users' needs
  • Content management system (CMS) configuration that helps execute that content strategy and fits into the organisation's workflows
  • User experience (UX) that captures the audience's attention and provides an immersive, intuitive journey
  • User interface (UI) designs that encapsulate who the organisation is and shows that to the world
  • Modern, lightweight frontend frameworks that are dynamic and lightning-fast

As the project manager and creative lead, I worked closely with one of our own UI designers to create a design that would impress a tough client − Abby, our Managing Director, Creative Director and former UX/UI designer.

Design

Our leaf motif
Digital Garden's leaf-shaped logo is a memorable one, signifying that digital products should grow and evolve. We wanted to incorporate the leaf into design elements across the site. From the leaf-shaped mouse cursor that accompanies you through your site journey, to the iconography at the base of our Services page and the top-left logo

Bringing conceptual ideas to life
The cloud motif − which you can see throughout the site − represents a conceptual idea (the cloud) which Digital Garden helps clients bring to life (the leaf). You can see on our homepage banner that those conceptual ideas become fully-formed into the Digital Garden leaf motif.

Movement and interactions
Animation was an important thing for us to include on this website. The movement in the clouds represents the adaptability of both digital products and how Digital Garden approaches its client projects.

404 page

We designed a clever 404 page, with cool animations, which you can view here - digitalgarden.com.au/error 

Colour palette
While our primary colour is the green of the Digital Garden leaf logo you can see on the homepage, we always had a spectrum of colours in our palette. Pink for our work, blue for our services, purple for our team, orange for our blog and tangerine for careers.

Development

Drupal 9
The website is currently running a Drupal 9 CMS backend framework, customised to our content management needs.

React.js
The site runs a lightning-fast decoupled React frontend framework, allowing for limitless possibilties for the look and feel of the end user interface.

Content strategy

Services
We wanted our prospective and existing clients to have insight into the full range of services offered by Digital Garden − and how they can all fit together in our approach to their projects. Our content mission for the services section was to give users a sense of what each project phase and its activities would involve.

Our work
Digital Garden is incredibly proud of the diverse range of projects it plans, designs and develops for its wide range of clients. Our approach to content for our case studies was to better showcase our project approach plus the imapct and results that each project had for the respective client.

Our team at Digital Garden is committed to continuing to enhance and evolve our latest website. We want this website to grow with us as we change and so too does the digital landscape.