Compassion information architecture and web design project

Compassion

Information architecture, content review, user experience and web design

New design for Compassion website
Compassion’s updated information architecture and web design

About the client

Compassion supports people who are marginalised through mental health issues, addiction, crisis, homelessness or poverty. Their services help people to live with dignity in the community. The services they offer include the Homes of Compassion and the Compassion Soup Kitchen.

The services we provided

Information Architecture
User insight and experience
Content design and management
Web design
Web development

See our full range of services

What we did

I’m busy, give me the 30-second lowdown

Compassion recently realised that their branding had become inconsistent and confusing. They recognised the need to be consistent in brand usage, to improve public awareness of their various services for marginalised people. Therefore, the Compassion website needed to be redesigned to align with their refreshed brand, and to better meet staff and user needs.

First of all, the Webstruxure team completed user insights exercises to design a user-focused site structure. Then we applied the refreshed brand for a new look and feel, before implementing an elegant administration interface which Compassion staff tell us they find easy to use.

The sister site for Compassion Soup Kitchen also needed overhauling. So, we reused the template we’d created for the main Compassion website, as a quick and easy solution.

The two new websites provide a fully aligned brand and optimised user experience for both staff and website users. The sites can now better support Compassion’s work in the community, underpin their online presence and brand, and meet their diverse users’ needs.

I want to know more (grab a cuppa and get comfy)

A consistent online brand and better user experience

Compassion’s existing website conveyed them as a small not-for-profit housed in a Wellington suburb, with a focus on their history as Sisters of Compassion. They needed their website to reflect their work as a high-functioning, New Zealand-wide, corporate organisation with a range of services, including the work of overseas branches.

In addition, the site wasn’t user-friendly and didn’t work on mobile or tablet devices. Plus, the team at Compassion found the website difficult to use, and wanted greater ease and ability to do content maintenance themselves.

Using insights to inform the strategy

First of all, the Webstruxure team helped Compassion to identify key objectives they wanted their new website to achieve, both for their website users and for themselves. This information guided every decision we made on the project.

Next, we took key stakeholders through a Persona Mapping Workshop, which is a targeted user insights exercise. The workshop helped us profile and understand Compassion’s audience and website user groups, and the reasons each group visits the site.

Post It note exercise for website persona workshop
Persona Mapping Workshop – post it note exercise

We also produced a sitemap and a content inventory of the existing site, and set up analytics to capture site usage patterns.

A user-led approach to design

Following these user insights exercises; the key objectives, workshop outcomes, sitemap, content inventory and analytics data were used to inform the draft information architecture and content strategy for the new website.

We fed the draft information architecture into a second workshop, where we worked with the team at Compassion to refine it, and to create wireframes.

From there, our user experience and visual designer Brandon took the wireframes and applied the visual design. He applied the logo, colours and fonts from Compassion’s new brand style guide and created a fresh look and feel for the website.

Image of wireframing exercise for user experience workshop
User experience workshop – wireframing exercise
Optimising the site to meet objectives

As one of Compassion’s core business needs is to collect donations, a key website requirement was an effective donation functionality. We created a simple-to use, clean-looking and stand-out donation widget. Then we made it part of the website page template so it appears prominently on every page of the site.

Finally, for ease of maintenance we set up the new site in our dedicated WordPress hosting environment. We added an elegant administration interface which Compassion staff tell us they find easy to use.

Adding value for great results

During the process of loading content into the new website, we became aware that the Compassion Soup Kitchen website also needed an update. The existing Soup Kitchen website didn’t reflect the new brand, making it appear separate to the wider organisation. We suggested we could reuse the new template we’d created for the main Compassion website for this purpose. We’d apply the same design and insert the existing content from the Soup Kitchen site.

Compassion website design
Compassion’s new information architecture and web design

The ‘two for one’ approach was agreed, and Webstruxure delivered the second website as a pro bono project in recognition of the Compassion Soup Kitchen’s work in the community.

Compassion staff are very happy with their two new websites. They provide a fully aligned brand and optimised user experience for both staff and website users. The sites can now better support Compassion’s work in the community, underpin their online presence and brand, and meet their diverse users’ needs.

Want to find out how Webstruxure can help you, too?

If you need user insights, information architecture, content review, web design (and more) for your own website, get in touch with our team today.