INTRODUCTION
As a new UX designer, I wanted to find a way to expand my portfolio. Through a UX group I found Catchafire, a service that pairs nonprofits who need services with talented professionals who can perform those services. And from there, I was paired up with CAPCO, who was seeking someone to audit their website.
CAPCO is an organization that provides services (such as housing assistance, medical casework, medical assistance, and transportation assistance) to those living with HIV/AIDS and other STIs.
CAPCO is an awesome nonprofit doing awesome things, but that impact wasn't quite clear from their website. My point of contact told me they didn't really advertise the website to their clients because they wanted to fix it up a bit first. So we discussed some goals and came up with an action plan.
Our main goals were:
-- Put CAPCO's impact and mission statement front and center to attract donors
-- Make the website bilingual
-- Make an online application process to pre-qualify their clients for services
I quickly set to work on these goals.
CAPCO's current website design: homepage (left) and overview page (right.)
THE RESEARCH
My point of contact pointed out two main types of people using the website:
1. People signing up for services (low-income, 45+, often unemployed/underemployed) and
2. Donors (30-50, corporate, financially well-off.)
I found people who fit these categories and did usability tests.
-----------------------------
My "services person" was tasked with finding out what CAPCO services covered, finding out how to sign up, and making an intake appointment. My "donation person" was tasked with finding out what CAPCO did, what its impact was, and making an online donation.
At this time, anyone who's interested in CAPCO services will have to call and make an intake appointment. My "services person" made it clear that she didn't really see a point to scrolling through the website, picking through paragraphs of text, if she had to call to make an appointment anyway. She could just ask her questions on the phone. I asked her how she found doctors or got medical advice, and she said she would talk about medical services with friends or talk to doctors on the phone.
Since we had decided to make an intake appointment questionnaire on the website, I thought about how to make the website have the same friendly, casual feel.
So I came up with the idea for a plain-English FAQ page: quick, clear answers.
I also resolved to make the copy on the website more clear and friendly. I broke the paragraphs of medical information up into short sentences, perfect for skimming and quick answers.
-----------------------------
My "donation person" was able to find out what CAPCO was and what the organization did, but she didn't make it onto the "Overview" page that showed CAPCO's impact.
I decided to put CAPCO's impact front and center on the homepage, plus an "Our Impact" page with even more figures, client stories, and pie charts about funding and diversity.
I also did a heuristic analysis on CAPCO's site. My main finding, which I also found in the usability tests, is that the navigation could be organized more clearly. Both of my subjects would go back and forth trying to find the right pages. There were also quite a few links that appeared in more than one place, so I decided to clean that up a bit. I also got the all-clear to remove the ads from the homepage-- the original CAPCO homepage had four of them.
CAPCO's current overview page (left) and donate and volunteer page (right.)
THE WIREFRAMES
The first thing I designed was the Nav + Footer to provide structure for the website. I had never before designed a bilingual website, so I browsed a bunch of websites I knew had different language options. I looked at hotels and travel agencies, but the design I liked the best was the top drop down menu from Amazon, since it was front and center and easy to find. I wanted to streamline the look of the homepage, so I moved the address, phone, and social media to the footer. The usability subjects had found the navigation a little vague and confusing, so I cleaned it up, adding more categories and renaming pages.
My navigation + footer redesign. Post-it notes with commentary on the right.
The current homepage had no images, so I decided to add a large hero image to add emotional depth, and a call-to-action button for visitors to easily donate. I added icons to represent CAPCO's services, to make the information easy to digest. I was given the all-clear to include testimonials on the CAPCO homepage. I kept the video and the Twitter feed, since my usability test subjects liked those.
Homepage redesign. Commentary on the right.
Next, I got to work creating the FAQ page. I scoured the website coming up with a list of questions that people interested in CAPCO services would ask (I included the questions that came up during the usability tests), and my point of contact at CAPCO provided the answers. I kept the questions in question format, so they would be easy to interpret. I grouped the questions into categories and added large icons to make it easier to tell the category at a glance.
FAQ page design. Commentary on the right.
I used the same layout with the large icons on the Our Services page to break up the monotony of the page and increase comprehension. I sifted through the content on the original services page, turning the paragrahs of medical information into clear, scannable bullet points. I also included links to each program website if someone wanted to learn more.
Services page redesign. Commentary on the right.
My point of contact and I came up with the idea of an online assessment to pre-qualify users for specific CAPCO programs. I designed it with 1-2 questions per page, inspired by online assessments like Nurx and TurboTax, so the client didn't feel overwhelmed by a long list of questions.
I made the process as easy as possible in my microcopy, explaining what the appointment was for, sending a confirmation email with a list of documents, and providing links to answer the client's questions.
Assessment page design. Commentary on the right.
Finally, since my donor test subject did not find the overview page with all the statistics, I decided to create an Our Impact page with more information about how CAPCO has impacted their community. I wanted these numbers front and center so donors could see the real-world impact of what CAPCO was doing and how many people they were helping.
Since this page would be text heavy, I added icons. The timeline and funding pie chart would add to CAPCO's credibility as a nonprofit. One of the most important things I added to the page were two pie charts, a side-by-side comparison of the diversity of CAPCO's staff vs. CAPCO's clients. I felt it would show potential CAPCO clients see that they would be helped by someone just like them, who would understand their situation.
Impact page design. Commentary on the right.
WHAT'S NEXT?
Now that I'm done sketching out these wireframes, CAPCO will bring on a web developer. The developer and I will work together to update the CAPCO website with my designs. I don't want to make full web mockups in Figma just in case the developer catches something that I don't, and I don't want to overwhelm the developer with a long list of images, fonts, colors, specifications for all the pages, to be done all at once. I'd like for us to co-create it, a little at a time.
We'll be working off of a brand guide that a previous Catchafire volunteer made for CAPCO, so the fonts, colors, and logo have already been designed. But inside those guidelines, there is still so much room to play.
