Logan Together is a not-for-profit organisation that helps service providers, community members, and professionals work together to improve the development of kids in Logan, Queensland.
Lucas and I were contracted to deliver a website that was more organised, easier to manage, and accessible to an audience spanning multiple roles, levels of education, and levels of engagement with the organisation.
4 months, full-time
My research objectives were to:
I wanted to find out more about the different roles in the organisation, the backbone team’s day-to-day responsibilities, and how the website affected their work.
I conducted individual and group interviews with 11 of the backbone team members. This gave me insight into each department’s needs and pain points with the website.
“We sell ourselves short because we can't demonstrate what we're doing and people can't find what we're doing."
The range of people which Logan Together works with was extremely diverse, ranging from interstate investors through to local parents. We decided to focus our research on two groups of people who Logan Together felt could really benefit from the website: community sector workers and members of the local community who were new to or interested in Logan Together.
I spoke with 7 sector workers and community members to find out more about their involvement with Logan Together (if any), what they understood about the organisation so far, and their experience using the website.
"I still don't know who this website’s entirely for."
The Logan Together website had been built 5 years earlier to mostly acommodate static content. However, over the years, the organisation had outgrown this and was now using it to post information about events, opportunities to get involved, and updates on the movement.
To do this, the team had tacked on pages haphazardly all across the site without any clear structure.
I took the opportunity to create an inventory of every piece of content on the site. I also asked website users to group the different types of content together in a card sorting activity. This helped me understand where users would expect to find different pieces of information and informed the new sitemap.
Analysing data on which pages were the most accessed, how users navigated through the site, and the websites which users originated from helped me to understand what users were trying to accomplish.
Lucas also used Google PageSpeed to uncover a number of technical concerns with the website which was making it slow to load.
I created personas to represent the needs of the different audiences I interviewed. Working with Lucas to reduce my own bias, we analysed the interviews in Dovetail, tagging and grouping key phrases which highlighted:
This allowed me to focus on adding the most value to community members and sector workers in the new designs.
I catalogued every piece of content present on the site with a content audit to help me create a new, more coherent information architecture. In addition to duplicated and hard-to-find content, many pages had simply been forgotten about and were several years out of date.
I also asked 6 sector workers and community members to complete a card sorting activity. This gave me insight into how these personas grouped content together in a way that made sense to them.
These two artefacts allowed me to create a new sitemap which:
Almost all of the content on Logan Together’s website was formatted as a single block of text.
We decided to lay out each page using reusable components to help users scan through a page’s content, with the aim of making it more structured and less overwhelming. We also hoped this would help users find what they were looking for more easily and reduce the effort required in development.
To make the backend easier to manage, we built it as a series of reusable components to break up the different options available into logical sections.
This made the backend more flexible, as content editors could add, remove, and rearrange blocks within pages to accomodate for the organisation’s changing needs.
To reduce the amount of duplicate content, we took a relational approach to managing the data, ensuring that if a piece of information was shown in multiple places, it came from one single source. This would make the website less prone to becoming out of date because content no longer had to be updated in multiple places.
Lastly, to make the website more accessible for all user groups, Lucas took measures to increase the page load speed on mobile and desktop in the new website build.
I produced two low-fidlelity prototypes - one for desktop-based sector workers, and one for mobile-based community members - which aimed to:
I then conducted remote moderated usability testing sessions to measure how effectively it met these goals and to uncover further issues. I tested with 20 participants over 4 iterations.
Our first round of testing revealed that community members were confused by the indirect language and jargon which Logan Together used in their copy.
I worked with the client to iterate on the key pieces of copy which describe what Logan Together is and the work which they do, testing each iteration until it was more widely understood.
I also produced a copy guide with detailed feedback from testers for Logan Together to use when writing content about their projects, to help them produce copy which was easier to understand for users.
"I’d go contact? I would look there... I couldn't find them. I'm stuck now."
During testing, sector workers struggled to work out how to contact a specific person on the backbone team. They would often go to the “Contact” page and get stuck.
To alleviate the problem, I added a component on the "Contact" page which linked to the “About > Governance > Backbone team” page containing information on each member of the team.
"Oh, staff directory. Yeah. I guess I could click… oh that's cool. And then I can find Karen there. Yeah. That's good."
During testing, we discovered that sector workers work more effectively when they can connect with others who are working in a similar area to them.
For each organisation on the "Partners" page, we added a bio, contact details, and a link to their website to help sector workers discover and connect with each other.
"Being able to see who's who and have a one-on-one conversation with them is really valuable."
By the fourth iteration of copy, testers successfully understood that Logan Together was an organisation which brings together professionals and the local community to help improve the development of Logan kids.
"It's like a one stop shop for all of those people to come together and help the children of Logan."
The best way to explain what Logan Together does was to show the projects they’re involved with.
We gave each project a simple, goal-oriented title to communicate the impact it has. We found that the projects appealed to both community members and sector workers alike.
"I feel like this shows a really nice example of what makes Logan Together."
To showcase the projects Logan Together support, we gave each project its own dedicated page. These pages were designed to explain what each project is about, show updates on how it’s going, and provide links to find out more or to contact the person in charge of the project.
"See, this is really good. I would use this for some of the stuff that I do in my job. That's really handy to me. And I would probably visit the health hub website."
Logan Together wanted to make the movement more accessible for community members to join. We created a “Get involved” page which shows how community members can help Logan Together with their current initiatives.
"There's all the different ways you can get involved, which is really cool. There's not just one way of being involved in it."
The old Logan Together website listed resources under 15 different arbitrary categories, which sat unsorted on the page, and without any way to filter them.
Our research showed that sector workers wanted to be able to see the most recently uploaded resources, so I created a “Latest resources” section which sorted all resources by date, with the option to filter by category and search through the list for specific items.
On top of that, sector workers said there two key documents which they would refer to time and again. I put these at the top of the page in a “Featured resources” tabbed component, giving Logan Together the opportunity to build this out as the movement progresses.
“That’s exactly the kind of thing I would be looking for in the Resources section."
Logan Together measures their progress towards improving child development through a series of defined metrics. Government bodies and funders need visibility of these metrics so that they can monitor the movement’s impact.
To meet this need, we designed a “Data” page that shows:
“The pictures are more reflective of the community of Logan. So I'm very happy about that.”
“It's much cleaner, less cluttered than the current one. It seems to be much simpler.”
“It looks very inviting.”
“It's much easier to find pieces of information. They’ve obviously put a lot of work into thinking about how it’s organised”
"I really enjoyed working with Chris. He was knowledgable and made the whole process very easy. His research helped me 'sell in' concepts to my organisation, making the final product exactly right for the audience!"
After presenting the prototype and testing feedback to the stakeholders, they were excited to proceed with the project build.
Lucas developed the website in WordPress and we provided Logan Together with a guide on how to add, remove, and manage content in the backend. We produced video walkthroughs and written steps, and organised all the content in a Notion microsite.
We also helped migrate old content over, and Logan Together is currently content populating the website with information on the projects they are involved in before launching it.