top of page

Central Park Conservancy

Website Redesign

Central Park Conservancy

Website Redesign

What is The Central Park Conservancy?

Central Park Conservancy, located in New York City, is a non-profit who is responsible for the transformation and maintenance of Central Park. Their mission is to restore the park to its original vision. 

What is the project about?

  • Migrate the site from the current CMS (Luminate)

  • Build CMS using new content types

  • Set a new visual design baseline for a future re-skin.

Project deets

  • Initial timeline: 6 months

  • Client Team: Marketing Lead and PM

  • External Team: Content Strategist, UI/UX Designer, CMS Developer, Front-end Developer

home-2016.jpg

Screenshot of homepage at the start of the project

home-2016.jpg

Project deets

  • Initial timeline: 6 months

  • Client Team: Marketing Lead and PM

  • External Team: Content Strategist, UI/UX Designer, CMS Developer, Front-end Developer

Screenshot of homepage at the start of the project

What did I contribute?

  • Setting goals and objectives 

  • Creating scenarios 

  • Collaborating on site maps

  • Facilitating cross-team collaboration 

  • Conducting UX research

  • Conducting competitive research

  • Low-fidelity prototypes

  • High fidelity prototypes

  • High-fidelity UI design

  • Usability testing

  • Project management

Let’s walk through the process

Step 1: Building a Shared Understanding of the Project

cpc-process.png

This diagram outlines our initial understanding of the project from both a business (CPC's needs), as well as the various audiences' requirements (User needs).

Step 2: Who is the Audience?

Audience

Existing research including interviews with folks that lived within walking distance of the park. The outcome of this research was four personas and a recommendation of how to improve providing a valuable resource to these audience types:

 

  • The Wanderer (occasional park visitor)

  • The Commuter (daily park visitor)

  • The Citizen (park donor)

  • The Activist (volunteer)

cpc-persona.jpg

Persona example

What were the challenges?

Audience Challenge: "Add Some Hyphens"

How do we convert the “Citizen” into a “Citizen-Wanderer”? How do we teach donors about the history of the park? Can we convince a “Commuter” to make a donation or book a tour?

audience-venn.png

Design Challenge: "Baseline" Design

To facilitate the migration to a new CMS and a future redesign we had to provide flexible building blocks for design. The building blocks needed to serve both the new audience needs and goals as well as future technology goals. 

UI: Info 2-up Photo Copy 2.png

Solution 1: 
Navigation—Hyphenating the Audience

Site Map

The new content models required rethinking the navigation patterns of the site. The existing site was like an overstuffed laundry bag. Whenever a new page was created it was added to the “Visit” silo of the site without any thought about organizing the content in a way that would assist users to find information easily.

navigation.jpg

Example of navigation silo

Proposed Revision to the Site Map

sitemap.jpg

The proposed updated site map was prepared for user testing. This updated site map reorganized the content into a boarder set of audience needs. Each section was related to a specific need and/or persona type. For example, the "What's Happening" section organized content for site visitors who said, "I am planning to visit and I would like to see what's going on in the future so I can plan my trip." 

Prototype

At this point in the project, we had two concurrent activities moving ahead—design and content. We wanted to check in on our progress and so we created a prototype to test with users.

 

Questions we intended to answer:

  • What do users expect to find on the home page and other key landing pages?

  • Can users find information using the new navigation labels?

  • The path to conversion (donate/book a tour) easy to follow?

Home.png

Usability Testing

We recruited eight participants from CPC’s website visitors screened for moderate to high interest in Central Park, awareness of The Central Park Conservancy and their mission, and past donation history to 1 or more NYC institutions in the last 5 years.

 

The sessions tested users on three primary tasks:

  1. Becoming a member

  2. Finding a playground

  3. Booking a tour

Impact%20Detail_edited.jpg

Gathering Data from User Test Sessions

results.jpg

Task completion rate

Recorded Participant Responses to Navigation Labels

comments.jpg

Participant comments. Highlighted responses show a trend of similar findings that qualitative information that can be drawn from.

Results & Recommendations

The results of the test sessions were overall very positive. Tasks and subtasks were easily completed and we learning a bit more about some of the confusing labels in the navigation. 

 

Key takeaways:

  • Navigation updates are helping

  • Labels are confusing and/or vague

final site map.jpg

Final site map

Solution 2: Designing a "Baseline"

What Was Wrong with the Initial Design?

  • Difficult to find information

  • Out-dated UI

  • Confusing icons

  • Poor accessibility

  • Odd UI patterns

old-ui.jpg

Updating the Homepage

iterations.jpg

Homepage designs were presented to the client team and revised based on feedback.

Initial Design

  • Updated styles

  • Expressive typography

  • More space

  • Use of a grid

  • Clearer blocks of content

  • Better accessibility

homepage-final.jpg

Basic Info Block UI

UI: Info 2-up Photo Copy 2.png

What did I contribute?

  • Setting goals and objectives 

  • Creating scenarios 

  • Collaborating on site maps

  • Facilitating cross-team collaboration 

  • Conducting UX research

  • Conducting competitive research

  • Low-fidelity prototypes

  • High fidelity prototypes

  • High-fidelity UI design

  • Usability testing

  • Project management

Let’s walk through the process

Step 1: Building a Shared Understanding of the Project

cpc-process.png

This diagram outlines our initial understanding of the project from both a business (CPC's needs), as well as the various audiences' requirements (User needs).

Step 2: Who is the Audience?

Audience

Existing research including interviews with folks that lived within walking distance of the park. The outcome of this research was four personas and a recommendation of how to improve providing a valuable resource to these audience types:

 

  • The Wanderer (occasional park visitor)

  • The Commuter (daily park visitor)

  • The Citizen (park donor)

  • The Activist (volunteer)

cpc-persona.jpg

Persona example

What were the challenges?

Audience Challenge: "Add Some Hyphens"

How do we convert the “Citizen” into a “Citizen-Wanderer”? How do we teach donors about the history of the park? Can we convince a “Commuter” to make a donation or book a tour?

audience-venn.png

Design Challenge: "Baseline" Design

To facilitate the migration to a new CMS and a future redesign we had to provide flexible building blocks for design. The building blocks needed to serve both the new audience needs and goals as well as future technology goals. 

UI: Info 2-up Photo Copy 2.png

Solution 1: Navigation—Hyphenating the Audience

Site Map

The new content models required rethinking the navigation patterns of the site. The existing site was like an overstuffed laundry bag. Whenever a new page was created it was added to the “Visit” silo of the site without any thought about organizing the content in a way that would assist users to find information easily.

navigation.jpg

Example of navigation silo

Proposed Revision to the Site Map

sitemap.jpg

The proposed updated site map was prepared for user testing. This updated site map reorganized the content into a boarder set of audience needs. Each section was related to a specific need and/or persona type. For example, the "What's Happening" section organized content for site visitors who said, "I am planning to visit and I would like to see what's going on in the future so I can plan my trip." 

Prototype

At this point in the project, we had two concurrent activities moving ahead—design and content. We wanted to check in on our progress and so we created a prototype to test with users.

 

Questions we intended to answer:

  • What do users expect to find on the home page and other key landing pages?

  • Can users find information using the new navigation labels?

  • The path to conversion (donate/book a tour) easy to follow?

Home.png

Usability Testing

We recruited eight participants from CPC’s website visitors screened for moderate to high interest in Central Park, awareness of The Central Park Conservancy and their mission, and past donation history to 1 or more NYC institutions in the last 5 years.

 

The sessions tested users on three primary tasks:

  1. Becoming a member

  2. Finding a playground

  3. Booking a tour

Impact%20Detail_edited.jpg

Gathering Data from User Test Sessions

results.jpg

Task completion rate

Recorded Participant Responses to Navigation Labels

comments.jpg

Participant comments. Highlighted responses show a trend of similar findings that qualitative information that can be drawn from.

Results & Recommendations

The results of the test sessions were overall very positive. Tasks and subtasks were easily completed and we learning a bit more about some of the confusing labels in the navigation. 

 

Key takeaways:

  • Navigation updates are helping

  • Labels are confusing and/or vague

final site map.jpg

Final site map

Solution 2: Designing a "Baseline"

What Was Wrong with the Initial Design?

  • Difficult to find information

  • Out-dated UI

  • Confusing icons

  • Poor accessibility

  • Odd UI patterns

old-ui.jpg

Updating the Homepage

iterations.jpg

Homepage designs were presented to the client team and revised based on feedback.

Initial Design

  • Updated styles

  • Expressive typography

  • More space

  • Use of a grid

  • Clearer blocks of content

  • Better accessibility

homepage-final.jpg

Basic Info Block UI

UI: Info 2-up Photo Copy 2.png
UI: Info 2-up Photo Copy.png

Basic information modules were designed to maximize flexibility.

Flexible Look and Feel

UI: Info 2-up Photo.png
UI: Info 2-up Photo Copy 4.png

Flexible Functionality

functionality.png

Organizing the Design

After the initial round of design, we had a system that was flexible but needed organization. One of the biggest hazards in system design is creating a system that no one can use. We needed to create some organizing principles that would guide the team through implementation.

inventory.jpg

I created a visual inventory of modules and styles and worked with a front-end developer to organize the elements into a coded design system library. But that's a discussion for another case study…

Next Steps

Because of the length of this engagement, this is just a small part of the entire project. As the work continued, there were several more phases and deliverables.

 

I was responsible for launching a beta version of the site, as well as gathering some quantitative data related to that launch. The final part of my involvement was onboarding Happy Cog to takeover ongoing support and to manage the final launch.

bottom of page