Johan Marais-Piper

All Case Studies / Wollondilly Council

Wollondilly Council Homepage

Wollondilly Shire is a local government area in South West Sydney, roughly 2,500m in size. The community often access information from the council from their website, with a selection of highly visited topics such as rate payments, garbage collection days, council meeting days and more. While the content was all available online, they received multiple calls and form feedback from the users that things were hard to find. Or, worse still, that they could not find the information at all. This placed further burden on the staff in having to answer queries which should is readily available online.

Due to the poor feedback they engaged Solutions Outsourced to overhaul their landing page to better optimise the highest visited pages. The primary goal was to empower the user to find the information they needed. This required a team effort both by the council to trim the content, and Solutions Outsourced to provide a simplified navigation system for the home page.

The following was decided:

  • Create a prominent search bar, as primary navigation
  • Create a list of task shortcuts users could complete (including custom task pages)


Main User Flows

From the meeting the council pushed to focus on the following flows:

  • Search
    User lands on the home page > user clicks search bar and types keyword > search results uncovers list of articles > user clicks relevant article and is taken to a new page
  • Completing a task
    User lands on the home page > user scrolls down to see a curated list of commonly performed tasks > user clicks relevant task and is taken to a new page
  • News and Events
    User lands on the home page > user scrolls down to find news and events > user finds relevant event from noticeboard

Date
2019

Role 
Creative Director, Designer at Solutions Outsourced.

Programs
Sketch, InVision, Keynote, Illustrator


The council's homepage, before the redesign, had a few glaring UX issues.

  • The banner looked interactive, but was in fact a static image
  • Too much emphasis was given on the banner (relegating navigation further below)
  • Search functionality was hidden
  • News and Events layout lacked hierarchy

The home page was in fact divided into sections, however the weighting of each section mean that the visual hierarchy was off.

The most important part of the page (the quick links) had in fact the least amount of visual impact.

Review and Wireframes

Looking at the existing landing page it was evident that a user landing on the page would be a little confused as to what step to take next. The homepage had various shortcut links sitting on a banner, however it wasn't obvious whether these were buttons or decorated text.

First steps included a competitor analysis of the use of prominent search bars and shortcut lists. Which one made sense for this particular use case?

I created early iterations as wireframes to present to the client via InVision. They were able to comment and review on the layout and functionality of the redesigned page. 


Time was spent researching navigation patterns that relied on search.

Competitor analysis of other councils and how they treated task shortcuts.

Looking at how other industries handled a combination of search and quick links.

 

As part of presenting the wireframe screens to the client, time was taken to highlight the new sections and its impact on the design.

Wireframes were created for different breakpoints from desktop to mobile.

 

Design & Development

After receiving approval from the client on the wireframes, moving into the design phase meant carrying through the existing page styling on the new layout. Part of the redesign included creating a family of icons to communicate the list of shortcut tasks. These icons would live on the homepage as well as the task pages.

Part of understanding how the navigation worked also included knowing the hierarchy of pages. Where would the task pages sit, how are these presented in the breadcrumbs? Can a user navigate this through the mega menu?

As per the wireframe stage, design was created for desktop and mobile breakpoints (tablet breakpoint was pretty similar to desktop in how the panels stacked). After a couple of rounds of iterations, including tweaking of the family of icons and search bar sizing, the council's digital team approved the designs.

During development I worked closely with the developer to go over the design implementation. Some compromises had to be made due to how the existing site was built, but these were minor and were around the styling of text and spacing.


 

The redesigned home page. Search functionality is the primary navigation, shortcut tasks are clearly highlighted.

Search results page, with results that have associated task pages pinned to the top.

Task pages, accessed through search or the home page. This page empowers the user to take action by giving them relevant information and links to complete the task.

 

Prototype walkthrough for client review

 

Delivery & key learnings

In the end the council's new website allowed for more flexibility handling task shortcuts and highlighting events for the community. I came out of it with the following learnings:

  • Experience in building a page within an existing page hierarchy/navigation system
  • WCAG 2.0 standards of accessibility for government sites
  • Handling communication between various levels of government departments



 ⚡️ H I G H L I G H T S ⚡️

🏃‍♂️
Simplifying

Removing clutter, Marie Kondo style, meant that only the important things remain. To spark joy and to complete tasks swiftly.

👀
White Space

Introducing more white space into a page that was previously chock-a-block full of information.

💪
Making Lives Easier

In the end it's all about making sure people spent less time doing admin. Providing users with shortcuts meant that they can get it done, and quick.


 

Are you building a product?

Let's talk about your goals and needs moving forward. I'm happy to give advice or provide further help if it looks like we can work well together and provide each other real value.

Using Format