Johan Marais-Piper

UX and UI Design / Shellharbour Civic Centre

Shellharbour Civic Centre Website

Shellharbour Council, in southern NSW, recently completed the building of its new Civic Centre in January 2018. A grand building with a 350-seat auditorium, an expansive local library and various meeting rooms for local businesses to hire. 

There was some contention among the community of the need for a building of its size, however the council recognised Shellharbour is a growing area — one that can take advantage of hosting regular events. The closest public venue of its size available for the local community was at least 20kms away, this was a statement of things to come.

Solutions Outsourced are a design agency in Camden, NSW — specialising in branding, marketing and websites. The websites are built on the Silverstripe CMS framework, generally using the Bootstrap grid breakpoints. Their clients range from councils, schools and local businesses.

Client goals

With the Solutions Outsourced team, we met with the client at project kick-off to understand their goals and major drivers. We sought to be on the same page on what success looks like and what tech back end we were working with.

The main goals for the website were:

  • To encourage the public to either hire a venue. This meant that we were also building a booking system for the available venues, this was key.
  • To encourage the public to visit
  • To introduce the building as a vibrant community centre


Designer and Creative Director at Solutions Outsourced

Sketch, Illustrator, InVision, Zeplin, Keynote, HTML

Before designing, wireframes were first created for client review.


Presenting wireframes and flows to the client.

Giving recommendations on user flow.

Showing the flow visually.


Design iterations

We left the meeting with a list of deliverables and agreed upon timeline. I took the project through the following process:

  • Wireframes and prototype — for early approval and sign off
  • Design (iteration 1) — to introduce application of colour
  • Design (finalised) — for final approval
  • Handover to development

Client communication and feedback was key and we ensured this happened often during the process from design to build.

The key feature of the website was its booking system, which had to link back to their backend system. While mainly in the domain of the developer handling the project, this required some design iterations once we understood its constraints and limitations.

Styling direction for developers

The building has amazing architectural features

The lines and shapes are reflected as patterns and page backgrounds

Civic centre and art

The Shellharbour Civic Centre was designed by DesignInc and is an airy, well lit space. The grounds are surrounded by sculptures and public art, the facade and interiors covered in a mix of textures and waved shapes. 

As part of the website's design, I introduced similar shapes and patterns to reflect the building's architecture.

Delivery & key learnings

The website was designed and built over 12 weeks and we were to plug into their booking system on the back end after some tweaking. There were some key learnings I took from this project:

  • Working with the Bootstrap grid on a new CMS platform
  • Understanding panel based design system and its effect on visual design
  • Client presentations and understanding feedback

Home page desktop, with quick links and list of facilities.

Venue hire page

Final designs at mobile resolution

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

Incorporating Illustration

To truly showcase the beauty of the building, it was great to be able to add elements of illustration.

Understanding Client Goals

During the client meetings it was a great experience to understand and dig deeper into the client's needs and metrics.

Bootstrap Grid

Learning a new framework for responsive website breakpoints.


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