Project Overview
A unique council website design that inspires and delights.
Project Commissioner
Project Creator
Team
TRC Team
Sian Sutton, Manager Stakeholder Engagement & Communication
Daniel Loader, Coordinator Online Services (Project manager)
Tanya Sherwin, Web Support Officer (coordinated content improvements for the project)
Butterfly team
Aaron Cameron - Test analyst
Draco Chan - Front end developer
Carol Galila - All round developer
Sophie Gulbenkian - Senior designer
Nathan Job - Server ninja
Brad Masters - Business analyst
Liz McLean - Creative director
Matthew McLean - Senior digital producer
Hee Sien Ooi - Front end developer
Bassam Othman - Back end developer
Sean Shi - Team leader and lead developer
Simon Quach - Front end developer
Project Brief
Create a website design that is vibrant, welcoming, easy to navigate and creates a ‘sense of place’ on arrival.
Use the new branding to full effect and communicate the modern, welcoming nature of the council.
Ensure user needs are at the forefront of the navigation and design.
Project Innovation/Need
Vertically & horizontally responsive
Inspired by the brand element "regional silhouettes" which represent each of the different regions in the Toowoomba area, Butterfly created a design that is framed by laying these "cut outs" over bold, vibrant images.
The silhouettes sit perfectly along the bottom of the site, adjusting in size across a range of tablet and desktop devices, while the rest of the page fills to the width of the device.
Mega menu
This design fills the entire screen and incorporates the silhouette, creating a lovely consistency between views. The menu itself allows users to see deeply into the site, and navigate quickly to any section, essential for a site with over 900 articles, 350 parks & 400 PDFs.
Homepage collage elements
The homepage uses a collage style for the featured content, asymmetrically placing modules for a scattered effect. The homepage is much less cluttered than typical council websites, with much prominence given to the key user actions taken on the site, featured in the "Popular topics" menu, which is present on every page of the site, and even moves down the page as you scroll.
Design Challenge
Normally designs only have to respond to device widths, not heights, and certainly not both, so creating the "framing" effect with the silhouette was a challenge! The effect is definitely worth the effort however.
A technical challenge was developing a custom index tool to search multiple websites at a fantastic speed.
Butterfly developed a park finder tool to ensure that the 350+ local parks are beautifully laid out, and help users by including a useful "search by park features tool" allowing users to find the perfect park location for their needs. This tool also includes powerful in-built Google mapping features.
User Experience
Comments from our users are very positive:
Stephen: “Easily read"
Jason: "User friendly especially with someone who has a visual disability"
Roselle: “Well laid out"
Leisa: “Immediate connection to Toowoomba... I don’t at all feel like I’m opening a Maths Book"
Peter: "Easy to navigate"
Toowoomba Regional Council project manager Daniel Loader said:
"The new website has brought to our organisation a significant improvement in delivering information online for the region by:
1) Wrapping the site in a visually appealing design that plays nicely for all screen sizes
2) Simplifying the home page and increasing the emphasis on popular topics our website visitors come to us for
3) Reducing the number of levels within the site and displaying these all in the one attractive and easy-to-use menu
4) Reviewing and improving content to ensure it answers the questions the community want answered
5) Providing some cool functionality through a drastically improved search engine and parks locator where people can search for a park that has the features they are looking for."
Tags
Digital Experience - Website - Government
This award celebrates innovation and creativity in design of a unique user experience in the combination of text, audio, still images, animation, video, and interactivity content for websites. Consideration given to clarity of communication and the matching information style to audience.
More Details