Catholic Care Tasmania

Non-profit website

Catholic Care Tasmania delivers a range of support programs that respond to the needs of individuals, families and the community, regardless of background or circumstance.

View website

Key Goals

  • Redesigning a Non-profit website and create brand guidelines
  • Create a smart Search button solution for wide range of
    specific services
  • Provide cohesive and user-friendly design, usability and discoverability
  • Accessibility to all type of users

Overview

CatholicCare Tasmania is a non-profit organisation whose mission responds to individuals, families, and to the Tasmanian community by offering a broad range of specialised professional services that empower family life as the foundation of a healthy society. Their particular strength is in family focused, child centred approach, recognising problems and how it impacts families and their children.

Challenges

Our challenge was to find a solution to improve their current website. The website have known issues with information architecture and navigation. Users were having problems finding the right information. It was lacking functionality to provide a more cohesive and user-friendly experience and accessibility to users especially the elderly and not so tech-savvy users. They needed a visual design, discoverability, greater flexibility for their content and inquiries.

Solutions

  • Better Information Architecture strategy
  • Modern, responsive design with WCAG Compliance 
  • Effective and intuitive "Search for service" right directly on the homepage and in mobile.
  • Better accessibility options to change font size, language and providing a dark theme for the site.

*Note
In any case there are differences or changes on the actual website's design, it may be a company's decision and visual changes are out of my control. The project was delivered with the final concepts and plans.

Role

UX/UI Designer

scope

Responsive website
Visual Design
Branding
Prototyping

tools

Figma
Invision
Pen & Paper

Team

David Sakko
GM Business Systems and Analysis

Karlo Estrada
Project Manager

Parry Huang
Developer

Discover

Research

The first step of this project involves gathering as much research as possible in order to better understand the design problem. This step is necessary to deeply empathise with our target users, before jumping straight into a solution, it is crucial to understand and gather data. The scope will include desk research on other social service agency, target demographic research, analysis on needs and desires of the end-users. Within time constraints, this process could last anywhere between a couple of days to weeks.

Research goals included

methodology

Secondary Research

Statistical Research was carried out to gain insights of the target demographics of social service organizations offering their services online and to uncover opportunities within the field.

About social services in australia

The Catholic Care Tasmania Landscape

USER Demographics

Define

Turning Data into Insights

It was now time to condense our research data with empathy to understand the end-user’s common goals, needs and behaviors.

PERSONA

This is Laura, she is the amalgam of the user interview participants. Laura will guide us through the design process so our decisions along the way are aligned with the end-user’s goals and tackles the problems that need to be solved.

The Problem

Although understanding Laura’s  goals and needs is important, turning them into actionable problems statements is a crucial step to creating the right solutions for her needs:

Defining the Structure

Since the CCT categories features have been decided, I created a sitemap for the web flow to get an overview of how the stages will be prioritized, linked and labeled.

Low Fidelity Website and Mobile Prototype

In the earlier stage, during the collection of features from other similar non-governmental organizations, I've studied and referenced some of their layouts and took the best parts that worked well and implement to our wireframes. Figma was used for paper prototyping for user testing. 

Brand Guidelines and UI Kit

With sketches and wireframes, I designed this Hi-fi prototypes in Figma. Remaining true to the organization's attributes, I’ve chose the brand color to be in shades of blue. The color represents open communication and clarity of thought which was a great way of describing what Catholic Care's services can offer. Bright orange were chosen as secondary colors to express passion and happiness. I also made a simple concept for their logo, even though they will still use their own logo.

High-Fidelity Web and Mobile Prototype

From the research method, I discovered what factors were most important to users when searching for services of the organization. As this was a website redesign project, I began by collecting data through similar organization. There were surprising number of organizations that run similar projects in helping regional families on social challenges such as gambling, addiction, mental healthcare, domestic abuse, etc. 

Comparing similar organizations enabled us to understand the kind of message being communicated and what kind of users we are focused on. Doing so, it gave us a starting point in terms of aspects to consider in our design process.

Primarily, I focus on how users can easily search for specific services. This was evidently obvious on the top of the website and most especially on the landing page on mobile.

For events, I provided a calendar where they can see the whole list for a specific month. However, this can also have an option to simplify the view by providing events list aside from a calendar view.

Deliver

Usability Testing

Once the prototype was ready, I prepared for usability testing in order to determine whether the website and responsive mobile works as intended with our target demographic. The test was conducted with 5 participants where they were given scenarios to complete specific tasks.

The test objectives include:

Tasks:

Affinity Mapping

We carefully recorded all the feedback from usability testing and created an affinity map and organized related information and observations into distinct clusters. In doing so, we were able to use this data to learn what we did well and what areas to improve on for the next iteration.

Wins

observations

Key Insights:

recommendations

next steps

There are still things that can be tested and improved on, including but not limited to:

Conclusion

Working as a freelance designer with this project was quite challenging because it's a big non-profit organization compared to my past projects. But the teamwork we had created in a limited time was so worth it that we enjoyed the time collaborating and made work process easy.

What I enjoyed

As with any UX UI project, there is so much more back and forth than I have originally anticipated. I enjoyed doing the High-Fidelity Prototype revisions after the usability testing. I got a better sense through the project how to organize and prioritise, create timelines and build a content strategy.

My favorite moments 

My favourite moment would have been creating the UI theme and applying what I have been learning about laws and principles of UX. It was the best time to apply the human centered design method, as for the users of this website will be the most vulnerable in the community. I have learned so much talking to real team players, stakeholders and user testers during the research phase.

My least favorite moment

I was a bit overwhelmed with the evaluation of content due to many pages to audit but It was a rewarding experience to have learned the structure of the organization and their cause. I'm proud to be part of this project and give design solutions especially for the users who needs it most.

Room for Improvement

If I could go back and change anything, it would be deciding to take the project with much focus on the timeline and paid more attention to other priorites of the organisation. Also, this project took a little longer than expected because I did not take into account the time it takes for recruiting participants and will take this learning with me for future projects. However, I believe It was still a great project and I was very thankful to have an opportunity to experience working with Catholic Care Tasmania team.

Thank you!

Icon Complex