Website Redesign for Public Welfare Foundation

the main gist

I worked on a small team to redesign Public Welfare Foundation’s website. Based on user interviews, we dramatically simplified the main navigation and guided the client to write clear, precise copy. As a result, people spent 20% more time on the website.

MY PROCESS

Jump to: User Research | Information Architecture |
Content Strategy | Handoff to Design & Development |
Launch | Results & Takeaways

We began the project by leading discussions with the client around the old site and why it wasn’t effective. The client believed that users struggled with applying for a grant because of the site's outdated design and content.

To gain more insight into these pain points, we conducted 6 one-on-one user interviews with members of PWF’s main user groups. Interviews were preferable to other research methods because we could get an in-depth understanding of the issues that users were facing and ask follow-up questions.

Some of the questions I asked were:

1. When was the last time you visited the PWF site? What did you do?

2. What are some issues that frustrate you when you use the site?

3. What is the top thing you take away about PWF when you visit the site?

Some key insights from these interviews were:

• Many users were nonprofits coming to the site to find out if they were eligible for a grant and how to apply. However, the application process was described across 3 different pages, causing confusion and increasing cognitive load.

• Almost all users wanted the latest news about issues PWF funded, but the site did not have any of this content.

• A majority of PWF’s users came to the site to find out which nonprofits PWF was funding, but that information was buried.

While we were conducting user interviews, we also did a content audit to see what pages were on the old site and analyze whether they needed to be on the new one as well.

From the content audit, I discovered many outdated pages that reflected work that PWF no longer focused on. It was also missing key information about their latest work and beautiful event space. We realized that we’d need to heavily rethink the information architecture of the site.

Using the content audit and the client’s feedback, I created a draft sitemap with a brand new site structure. Some key changes that we made were:

• Making it very apparent which nonprofits PWF was funding throughout the Our Work sections of the site, as well as the interactive grants table.

• Simplifying the grants application process by consolidating it all onto one page and breaking it up into easy steps for the user.

• Revamping the resources page (including the ability to filter by latest news and press releases) and adding a blog.

Due to limitations in budget and timeline, we were unfortunately not able to conduct thorough usability testing of the new sitemap. However, we did send it to the participants in our user interviews, who agreed that it “made sense” and “sounded much better.”

Once we had finalized the sitemap, it was time for the client to start writing! We use a content-first design approach because we believe that solid content is the foundation of a good site.

To provide structure to the content writing process, I created a Content Outline: a 76-page document that listed every page that was going to be on the site, as well as the target goals and users for each page.

For each section within a page, I provided content strategy that outlined what copy the client needed to write, how it would fit within the rest of the elements on that page, and how long it should be.

Click or tap on any of the images below to enlarge.

Once the client wrote their first draft of content (in the screenshot above, that’s the words in red), I provided suggestions on how to make the copy clearer and more concise. The initial copy was very technical and text-heavy, so I worked with them to simplify and shorten it to support scannability.

At the end of this process, we had a really strong content foundation that the designers could use to build wireframes. Our content-first approach allowed us to design with context and minimized the number of design iterations we had to do.

Once the copy was in a good spot, I handed it off to our designers, who turned it into wireframes and full page designs. 

During that time, I helped define the technical requirements for the new site by creating an Technical Requirements Document with our developers. It listed the client’s requirements for launch and included documentation for CRM integrations, form fields, analytics tracking, and content types.

I also put together a Content Migration Plan for our developers that outlined how content was transferring from the old site to the new one. 

During this process, I had to ensure that the requirements in the technical document and content migration plan were within the project budget and timeline. If a requirement was out of scope, I worked with the client and project manager to come up with creative workarounds. 

After our developers built the site, we conducted an extensive, cross-browser and cross-device QA check. I was responsible for QAing the site from a UX, content, and technical perspective. I ensured that the site was following UX best practices, made sure all of the content had been migrated correctly, and assured the technical requirements were met. 

TOP TAKEAWAYS