Non-profit Website Redesign

Increasing mobile app download rate through an easy-to-use, responsive website with a modern look

Overview

Client

Persica is a Toronto-based nonprofit association that works as a hub for professionals and leaders to build capacity within the Canadian community through networking and training.

Project

The project aimed to bring a fresh, modern look to the site and increase the app download rate.

Industry

Professional development & networking

My role

UX Designer

Timeline

4 Months

Tools

Figma

Team

I collaborated with the graphic designer, developer and the board of directors representative.

Solution

I redesigned the information architecture and the user interface, creating an informative, modern-looking site design that is easy to navigate and aligned with the organization’s values, goals, and services.

View it here.

My Process

Brief: Representation & engagement

The board of directors at Persica believes the Persica website is outdated and doesn’t clearly convey the mission of the organization and the services it provides.They wanted the website to:

look modern and professional
represent the organization and its members
not need frequent updates due to resource limitation
lead to a higher app download rate

Understanding the users

Survey

To learn about the frustrations and needs of the current members of the Persica services, I decided to conduct a survey. The survey questions focused on their needs and goals and their frustrations with the current website.

The survey results revealed that:

Users want to:

find information about future events

40%

learn about volunteer positions

20%

know more about members and services

50%

see job vacancies shared by members

20%

Users are unhappy because they:

can't find information they need

60%

have trouble navigating the website

40%

have a poor experience on mobile

40%

Interview

By now, I had information on the current user pain points. But would there be other needs and demands of the target audience that we might not have faced in the survey? To find out, I interviewed four potential users of Persica’s services. I used the 5W+H questions to dig deeper into their needs and motivations. The insights were as follows:

Users need to know more about the organization, its directors, and its services to trust them
They want to have access to reliable information about the organization’s events
They are usually on their phones and would prefer a site that is responsive and usable on the mobile browser
They would like to have access to learning resources

Insight-driven persona

Usability audit: What’s hindering engagement?

The site had multiple major usability issues that led to a poor user experience. I analyzed the site by comparing it to Nielsen heuristic principles to find issues and document them. Here are the problems I observed:

No feedback on the selected page, no clear CTA for conversion
Confusing navigation, inconsistent buttons, and card styles
Repetitive content with typos, no information on how to access the services
Out-dated, poor quality logo and event photos, incomplete content
Low-quality images, misaligned elements, and low colour contrast and accessibility
Faulty information architecture that hinders usability

How are the competitors doing it?

I analyzed the content, features, and navigation of seven non-profit websites to evaluate Persica’s standing among the other non-profit websites and find its weaknesses and strengths.

The key findings:

All the competitors highlight their services, history, and vision. This insight is in line with the client’s primary need, which emerged from surveys and interviews.
Most competitors have an online form for users to reach out to inquire about volunteer positions or other questions they might have.

How might we

How might we build a website that looks professional and clean and users can find what they are looking for easily?

Challenges

Creating a minimal, organized, and appealing site
Building trust and aligning the online presence of Persica with the organization’s values
Bridging the app and the website gap for new and power users

Solutions

Providing information about the history, impact, and achievements of Persica
Using photos of the events and activities along with information about the board of directors and their professional accounts

Highlighting the app download on the home page and services page, making it easy to find and download

Restructuring the information architecture

So far, the information I have gathered from my observation and analysis has helped me determine the information we need to offer the user. Now, it’s time to decide what goes where!

Based on the data from competitive analysis and the client’s and user’s needs, I devised a hypothesis for the site map. I conducted five closed card sorting tests to ensure the site map aligned with the users’ mental model.

After the tests, I iteratively refined the site map to ensure alignment with the users’ mental model. Here is the final site map:

Next, I sketched for the page layout design:

An organized new look

I re-designed the current Persica website to offer the visitors more recent and useful information about Persica (who they are, what they do, and what their mission is). The new design will help establish trust and confidence in Persica, increase findability, and, ultimately, encourage individuals to get involved.

Test time: Does the new design make sense to volunteers?

I conducted usability test sessions with both current users of the website and users who didn’t know about Persica.

Tasks: Learning about the services and choosing one to access.

Goal: Assessing the user’s interaction with the website, way-finding and completing the task.

Users didn’t have a problem with:

Navigation to the services page
Finding the app download link
Finding information about volunteering

The users failed to understand:

that the nature of the organization is non-profit
the necessity of downloading the app for accessing the services
the non-specific meaning of ‘Training’ as a service

Final Design

Iterating to add clarity & delight

I iterated the design process to address these issues. My goal was to provide clear communication and deliver a more intuitive experience for the users. I also tried to make the design more delightful by using illustrations.

Click to see the prototype.

Next steps: Consistency & growth

Moving forward with this project, I’d like to work on delivering a more consistent experience across every touchpoint, specifically the mobile app experience.

Given that a large percentage of our users are multilingual, delivering content in different languages is a step towards a more accessible experience for them.

Adventures in non-profit project constraints!

Balancing the competing project constraints of scope, budget, and resources was a real challenge in this project. I guess designing for non-profits is a great way to build up “working around project constraints” muscles!

More Projects

fitBowl mobile app

MyKidSafe mobile app

SchoolFinder school directory redesign