Hi! I’m Gus and today I want to tell you the story of our new website.
It started with The Find Help Now page
In April 2019, the Grassroots Chief Executive Stella sent some notes about redesigning the Find Help Now page. She expressed that it should be “warm and friendly”, with information easier to find, and making better use of the visual possibilities. She asked for our thoughts, and as the Grassroots Website Officer, I responded with some notes and concrete suggestions which were mostly well received. After adding several keywords to what was essentially Stella’s design brief – including clear, hopeful, helpful, and inclusive – I set about redesigning the page according to the assembled brief.
The prior Find Help Now page contained tips, encouragement, and a list that had grown to around 80 resources. That was too much and could be considered overwhelming for a new visitor. It was also difficult for me to check and maintain. I reprioritised the content and pared the resources down to a handful of key resources, with a link to
Our Stay Alive resource database held our curated latest resources, so I programmed a web page (the Resources Directory) to display the database as easy-to-navigate, bookmarkable, and printable lists. The Find Help Now and Resources Directory were in many ways a great improvement on what had come before – the pages were clearer, well-prioritised, and would be easier to keep up-to-date than what had gone before. But my design of the Find Help Now page itself was visually lacking.
As I hadn’t really done much web page design for over 5 years, I took a couple of online courses to refresh my skills. These courses largely reinforced or updated what I already knew, but they also reminded me that in good design, absolutely everything is the way it is for a reason. From a clearer perspective, I reworked my original redesign in Photoshop and was encouraged by great feedback from Grassroots.
Redesigning the rest of the website
While our prior site had served us well, it was approaching 7 years old without a major refresh – practically ancient in web terms. A full redesign of the site was desirable for many reasons, including:
- We weren’t giving the clearest impression of what we do as soon as people arrived at our site.
- Visitor expectations had moved on since the prior design
- About 50% of site visitors were now on mobile devices, despite the site pre-dating the
mobile friendly era - The site’s layout and structure had become cluttered over time
- Some pages were less easy to discover due to historical projects being given a similar priority to current projects
We’d also recently had a new logo, and an additional Real Talk website – both designed and developed by Creative Blend. My intention was to translate their creative work into the new site design.
Using the brief and visual style developed for the Find Help Now page, I prepared a homepage design in Photoshop, adapting the Real Talk site’s header and footer. Pleased with the result, I sent it to the team, who fed back that it was much more modern and easier to understand than our old site and created a better first impression. Grassroots agreed that this was a project we should pursue, so I set about designing other key pages in Photoshop, using an extended colour scheme derived from Creative Blends logo colours. A visual style had been established and it was good!
Building the pages
It was obvious we should leverage WordPress to enable dynamic, up-to-date content. I started with a well-documented mobile-first base WordPress layout theme and further styled the pages based on the Photoshop mockups. Though I had used WordPress several years ago and found it difficult, I was now enormously impressed with its functionality, flexibility, and documentation. I was initially unsure about the feasibility of what I was attempting, but the pages developed quicker than expected. I used Google and other resources to learn how to implement the desired site features exactly how they were intended.
Several months, several features, and over
Key new features
- New, less “busy” page designs
- Various content improvements
- Brand new homepage
- The design is intended to focus on the visitors’ needs
- Self-contained “Find Help Now” section, with a custom menu making all our resources easier to find without the clutter
- Brand-new Resource Directory utilising the latest resources database from the Stay Alive app
- Latest Facebook, Instagram, and Twitter posts are now embedded within the site giving a live view on our social media presence
- Convenient “At a glance” summaries on all our course pages
- Training pages now include upcoming course dates, location, and cost with a “Book now” link
- New blog feature (to be further developed in the future)
- Site-wide search
- Visitors bookmarks are respected by redirecting each page to the equivalent new page
- Mobile friendly at last!