Bringing community driven justice online

We’ve been working in the justice sector to build and design better systems that improve the way people access and experience justice since 2012. So naturally, we jumped at the opportunity to work with Fitzroy Legal Service. As our neighbours who share our vision to promote and improve access to justice and legal services, it seemed like a no brainer. 

Fitzroy Legal Service is a community legal centre based in Fitzroy, Melbourne. They opened their doors in 1972, providing free legal advice and support, with the intention of working towards a fairer and more just community for Victorians. In 2019, Fitzroy Legal Service merged with another like-minded organisation, Darebin Community Legal Centre. This enabled them to unify the two organisations and deliver better legal services to Victorians across both catchment areas. 

This merger was also an opportunity for Fitzroy Legal Service to redesign how they provide information online and to create a new brand identity. They engaged us to work with them to create a brand strategy and visual identity to unify these two brands, to support and complement the new organisational structure, and to make their website and the Law Handbook more usable and accessible.

Fitzroy Legal Service operates one of the largest community legal services in Victoria. Even throughout the COVID-19 pandemic they continued to support the legal needs of the community with in-person and phone appointments. 

For them, the pandemic only further highlighted the importance of easily accessible legal information online. As community vulnerability, risk and isolation increased so did the need for legal information and support. Our challenge was to help Fitzroy Legal Service to continue to support their community, given the added complexity created by the pandemic.

Alongside their free legal advice, court representation and advocacy services, Fitzroy Legal Service also publishes the Law Handbook, a comprehensive, plain-English guide to common aspects of the law for Victorians. The Law Handbook has been updated every year since it was first published in 1977. It’s accessible in both print and online formats by lawyers and non-lawyers looking for practical information on legal issues like consumer protection, anti-discrimination, family and employment. 

Fitzroy Legal Service asked for our help in merging the Law Handbook website with the main Fitzroy Legal Service website, to create a single unified website with aligned User Interactions (UI) and User Experience (UX), that would also minimise the workload for staff by reducing the number of websites to manage. 

Throughout each stage we kept Fitzroy Legal Service up-to-date with our progress through weekly WIP meetings and playbacks, ensuring that they were with us every step of the way. 

Before we created a single unified website, Fitzroy Legal Service recognised that they needed a brand strategy. Following the merger with Darebin Community Legal Centre, the two organisations continued to work as separate entities, creating confusion for both staff and clients.  We needed to work with the newly merged organisations to create a brand that acknowledged the independent nature of two community legal centres, while also creating a sense of unity that represented who they were as whole – a distinctive and cohesive organisation that contributes to meaningful change in their communities. First, we conducted market research into other brands, both in the justice sector and similarly-related sectors. Following this, we ran two brand workshops with different stakeholder groups, to co-design the strategy and direction. The workshops revealed a gap between the grassroots, community activist and the legal professional parts of Fitzroy Legal Service, which the strategy sought to resolve. Using the insights from the workshops, we developed a high-level brand strategy and digital brand direction that would inform the website design. 

We discovered that everything at Fitzroy Legal Service is underpinned by a sense of community, which aligned with the organisation’s new strategic direction around elevating the role of community voice. 

This allowed us to create a unique brand value proposition to incorporate into the visual direction: community-driven justice.

The visual direction for the brand that we developed was inspired by activism, with the logo representing the organisation’s bold and unique role as a leading community voice. The off-centred placard shape is active, but remains symmetrical to the space around it, suggesting the idea of balance – a key theme in representing justice – while the text inside takes inspiration from the original window lettering, preserving the long history of Fitzroy Legal Service. 

As part of the visual direction, we also developed style tiles to help us to present a variety of visual options for the look and feel of the new brand and any related marketing or publishing materials to Fitzroy Legal Service’s project team. 

We started by conducting a structural audit of the two standalone websites (Fitzroy Legal Service and Law Handbook), to determine ways to improve the navigational experience for website visitors and define how these two sites could be brought together. As part of the audit, we mapped out the website based on the URL structure and on-screen navigation to assist us in defining the new information architecture. This was supported by an analysis of their website data to understand and identify website visitors’ navigational habits, potential barriers to finding information and common drop off points.

Given Fitzroy Legal Service’s strong ties with their community, we used this stage to focus on developing, refining and testing the digital experience for their users, with their users. As mentioned, this project was carried out during the depths of COVID-19 (and multiple Victorian lockdowns), so we used digital tools to help us engage with this group. 

We ran several 1:1 Zoom interviews with different groups of website users to direct the redesign process, correlate our audit findings, gauge attitudes of the two websites and learn about their needs. We also set up a website engagement survey and online tree testing to help us collect more insights into who was using the two websites and assess the findability (or not) of the content within our proposed new site map diagram for the single unified website. 

As part of this stage, we managed to visit Fitzroy Legal Service in person, during eased COVID-19 restrictions, to meet with their clients, share our website concepts and gather their feedback. This process gave our designers a stronger understanding of the context and pain points that clients experience when seeking legal advice.  

We also collaborated with VALID, an organisation that has been at the forefront of advocating for people living with a disability in Victoria for over 30 years. We shared our website designs with their team at various stages of the project to make sure that we were all working towards an inclusive approach. This included in-person testing sessions with people living with a disability, which helped inform our design decisions.

These meetings allowed us to test, iterate and validate the new site map, to make sure we were creating user-friendly navigational pathways and an improved digital experience. From there, we mapped out the development approach of the new WordPress website.  

With a defined brand direction and site map, we started to develop the look and feel of the single unified website. During this stage, our designers and developers collaborated closely together to make sure that the design components were flexible and reusable throughout. We focused on designing concepts for key web pages and we tested these with different user groups to ensure we were keeping them front of mind. As part of this, we developed a website component library, including technical guidance for responsive design across all breakpoints and in line with the WCAG 2.0 level AA guidelines.

The final stage of this project was the build of the single unified website. While WordPress can provide a solid and familiar editing experience for content editors and a rich plugin ecosystem, it hasn’t historically provided a great development experience. The team made use of the Roots stack, especially Bedrock and Trellis, to manage automated deployments and provide a solid base to develop on.

We needed the design to be as flexible as possible, to allow Fitzroy Legal Service’s content editors to build web pages in a variety of ways. We took advantage of a combination of Gutenberg editor and Advanced Custom Fields in WordPress to construct flexible modules that could be put together in different ways to build a page, while keeping inline with the design and brand.

Fitzroy Legal Service’s original site was built on NationBuilder, a platform with a rich set of tools for managing memberships and subscriptions, meaning we needed to rebuild these in WordPress. Our developers settled on integrating membership payments in WordPress with a WooCommerce plugin, MailChimp and a custom middleware/API layer to manage some of the business rules specific to Fitzroy Legal Service’s memberships. This was all set up in a way to provide a seamless experience for back end site administrators managing memberships and subscriptions.

“Portable, being a local organisation and with a shared vision, seemed a logical choice to assist us with our brand redesign and website makeover. From the very beginning they were enthusiastic, worked closely with us and our key stakeholders and showed a deep commitment to helping us create a new brand and what they came up with, incorporating our past into the new design is far better than we envisaged.”

“I loved that we were able to take such a great resource as the Law Handbook and give it a new look and feel. It’s such an important source of free legal information for Victorians and it felt really special to be able to do our part in improving access to that.”

Lauren Manning, Senior Producer

Jackie Garfield, Senior Experience Designer

Harrison Blackmore, Experience Designer

Jake Hogg, Lead Experience Designer

Ashlee West, Lead Experience Designer

Luke Thomas, Senior Legal Designer

Peter Roper, Senior Content Strategist

Belinda Donald, Senior Design Strategist

Joanne Osbourne-Taylor, Lead Design Strategist

Andy Kilham, Senior Developer

Cam Stark, Developer

Andrew Fulton, Lead Developer

Wes Fermin, Quality Assurance

Simon Goodrich, Account Manager