Website Redesign for City Parks Alliance

the main gist

I worked on a cross-functional team to redesign City Parks Alliance’s website. Based on user insights, we simplified the site structure and made accessing resources easy. As a result, users viewed 15% more pages each time they visited the website.

MY PROCESS

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

To kick off the project, we had discussions with the client about the goals of the site, who their users were, and what key actions they needed to take. We identified two primary user groups:

1. CPA’s 300+ member organizations who were included parks & recreation agencies, nonprofits, foundations, etc.

2. Potential members who fall into the same groups as CPA’s member organizations. 

We then conducted 3 user interviews to better understand the cases where the old site worked well and where it didn’t. User interviews allowed us to have in-depth conversations and ask probing questions. Some of the questions we asked were:

1. Why did you last visit the site? Did you find what you were looking for?

2. In what environment do you typically access the site? Are you on-the-go on your phone or at work on your desktop computer?

3. What do you like and dislike about the site?

Due to limitations in time and budget, we were not able to conduct further research, but we were able to obtain a user survey that CPA had done internally a few months prior. From all of this research, we learned that:

• About 30% of users come to the site to access resources, such as case studies and webinars. However, it was difficult to access and search this robust resource library.

• About 20% of users visited the site for upcoming events and news, but that content was buried several levels deep in the site architecture. 

• The site did not clearly convey why the work that CPA was doing was important. 

Based on our user research, we knew that resources, news, and events were buried. We also knew that there were a lot of outdated and orphaned pages, but we didn’t quite know the extent. To solve this, we conducted a content audit that helped us fully understand the breadth and depth of the pages on the site. 

The content audit also gave us the foundation for our card sorting exercise, which we conducted with the client. We chose to do an open card sort using topics from the old site to understand how CPA would reorganize their content and how they would name each category. The card sort was moderated so we could ask follow-up questions.

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

The card sort led to some interesting insights that eventually built the foundation for the new sitemap. 

• Topics like “member list,” “partners, “mission and vision,” and “staff” all went under the broad category of About CPA. The new site’s About Us section contains these pages. 

• The client grouped topics like “toolkit,” “infographics,” and “reports” under a broad category of Resources. This led us to build out the Resources section on the new site where users could filter by resource type.

After several working sessions with the client, we arrived at our new and improved sitemap. 

While the card sorting activity was useful, I would have conducted it with 10-15 real users for optimal results. We unfortunately did not have access to end users due to timing and budget constraints. 

From our research, we found that a big pain point was accessing CPA’s resources, which consisted of 130+ case studies, reports, and tools. The resources on the old site were confusingly spread out over multiple pages with little context. This made the resources hard to find, search, and filter. 

Our card sort had already identified that all resources had to live within one prominent section on the site for easy findability. However, there was an extra layer of complication because some resources were gated behind a login (only paying members had access to them). If a user wanted access to a gated resource, we would have to require them to become paying members and create accounts on the website.

To that end, we built out user flows that showed how a logged-in user and a logged-out user would access gated resources. Our user flows allowed us to map out the user’s journey, identify points that could cause system error, and prevent user dead ends. 

I worked closely with our development team to build out a user flow that would capture all of the possible scenarios of a user coming to the resources page. We addressed questions like:

• What if a non-logged in user lands on a resource that’s gated? The site should prompt them to log in or join to see the page. Once they complete either of those actions, they should get access to the resource. 

• What if the user’s membership has expired? They see a helpful error message prompting them to renew. Once they renew, they can see the resource.  

• What if a user refuses to log in or join? They don’t get access to the page (since access to all resources is an exclusive member benefit), but we remind them of the awesome perks they are missing out on.

Once we had solidified how users would move through the new site and had a solid sitemap, I created a Content Outline which listed every page that would live on the new site. In this document, I provided content strategy by:

1. Establishing the target goals and users for each page

2. Listing the sections that make up each page, their purpose, and how they function within the rest of the content on the page

3. Outlining what copy the client needed to write for each section (headers, subheaders, paragraph text, etc.) and how long it should be 

4. Identifying the taxonomies that needed to exist for feeds (like resources and events)

This was a big step in the project because content is the most critical component of a site. While designs, animations, and visuals are all also important, content is what ultimately keeps users on the site and causes conversions. For that reason, we spent a lot of time in this phase and went through several rounds of revision to get the copy just right.  

By the end of this phase, we had content for every page on the site and were ready to move into wireframes! 

For this project, our visual design team handled wireframes and page designs. However, once we saw the content laid out visually, I worked closely with the client to make copy updates to support scannability. 

During this time, I also worked with our developers to build a Technical Requirements Document and a a Content Migration plan that explained how content from the old site would transfer to the new one. 

Once the site was built, we went through two rounds of QA (Quality Assurance) Testing to ensure the site met usability and accessibility best practices. And then, it was finally time to launch!