Central Park Conservancy

Central Park Conservancy

Website Redesign

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

Screenshot of homepage at the start of the project

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

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)

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?

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.

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.

Example of navigation silo

Proposed Revision to the Site Map

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?

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:

Becoming a member
Finding a playground
Booking a tour

Gathering Data from User Test Sessions

Task completion rate

Recorded Participant Responses to Navigation Labels

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

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

Updating the Homepage

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

Basic Info Block UI

View All Projects

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

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

The Wanderer (occasional park visitor)
The Commuter (daily park visitor)
The Citizen (park donor)
The Activist (volunteer)

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?

Design Challenge: "Baseline" Design

Solution 1: Navigation—Hyphenating the Audience

Site Map

Example of navigation silo

Proposed Revision to the Site Map

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?

Usability Testing

The sessions tested users on three primary tasks:

Becoming a member
Finding a playground
Booking a tour

Gathering Data from User Test Sessions

Task completion rate

Recorded Participant Responses to Navigation Labels

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

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

Updating the Homepage

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

Basic Info Block UI

Basic information modules were designed to maximize flexibility.

Flexible Look and Feel

Flexible Functionality

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.

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.