NYC Parks Website

Web+ App Design

Redesign an Intuitive Information Architecture & Engaging Responsive Web Experience for NYC Parks.

Client

NYC Parks - New York City Department of Parks & Recreation

Responsibilities

Our team worked together on conducting research, synthesizing findings, ideation, prototyping, and user testing.
Individually, I was responsible for the user interview, storyboard, Event page wireframing, Hi-fi Prototype visual and interaction design and finalizing filter system.

Duration

12 Weeks

Teammates

Bhavna, Cici, Sneh, Xinru

About

NYC Parks Website is the official Website of the New York City Department of Parks & Recreation, whose guiding principles include increased greening, improved access to recreational and fitness opportunities, and using parks as a vehicle for community and economic development.

The website is a powerful means to fulfill their vision. Our client approached us to help rejuvenate their current website to help increase user engagement and connectivity.

Solution

Design a minimalist UI that prioritizes increased information clarity and access for users.
Streamline the search process by prioritizing the search bar, clarifying filters, and revamping card design.
Employ a clean, consistent, and approachable style identity.
Use responsive design for the mobile experience.

Home Page After & Before:

Process

01

Research

Fieldwork
User Interviews
Survey

02

Strategy

Card Sorting
Tree Testing
Competitive analysis
Sitemap

03

Design

User Flows
Wireframing
Style & UI Design

04

Iteration

User Testing
Hi-Fi Prototype

Research

Initially, their ask was quite broad, we decided to create a research plan which was exploratory - starting off with a preliminary fieldwork and user interviews, to understand who the website should be designed for.

Fieldwork & User Interviews

For our research we took a funnel approach to our interviews. We started with a broad group of visitors and then narrowed our focus to a single user group. We conducted 20 user interviews in the Central park and Prospect Park in NYC.

The focus group we chose to delve deeper into is “People who visit parks with/for kids“. This group of people accounts for a considerable proportion of park visitors, and also has a stronger demand for using the park website to find information.
Probing into the needs of this group also helped us understand a primary and secondary user context within a single unit. For parents and grandparents, their primary motivation is finding activities for kids and some had a secondary one of their own interest which could also involve kids. Nannies and teachers in parks had a different set of emotions and motivations as they were in parks as a part of their jobs, hence kids were the only decision making factor for their choices.

Storyboard

User journey map

Key Research Insights

1. People are looking for a low effort and highly intuitive platform
People usually search google for parks before visit. Social media groups and websites such as mommypoppins and timeout are also used.

2. Kids’ age is a big factor influencing a park visit
Parents or nannies visiting with kids take into consideration the play area, nature of swings and installations in the play area before getting their children. If a play area is better suited for older children they just leave.

3. Parks can be a social place for kids
People conduct activities for their kids, for example, birthday parties, group classes, school events etc. Small communities are formed and lots of playdates also happen.

4. Safety and activity go together
Safety for the children remains a motivational factor for visiting parks for both parents and nannies of children, including installations and visiting population.

5. Location, Location, Location
Park location is the most dominant factor when people choose which to visit. For those with kids, some parks near home are regularly visited. They are also willing to explore new parks after considering proximity and transportation.

Painpoints & Opportunities

With storyboard, user jouney map and persona created from observations, interviews, and questions of multiple participants and insights concluded, we defined users' painpoints and opportunities with the current NYC Park Website.

Strategy

Firstly, we conducted competitive review of 5 websites (nps, brooklynbridge, japannationalparks, findyourpark and nparks), to establish guidelines for our design by analyzing the pros and cons of each website, especially the way their navigation, organization, and labeling system.

Using Optimal Workshop, we designed and ran a card sorting study and developed a new Information Architecture and evaluated it through a tree testing study.

Card Sorting Study

Using Optimal Workshop, we created 43 cards and 5 main categories including "About", "Events", "Facilities", "Help", and "Parks" for card sorting. Participants could add categories if they found something missing. This allowed us to get deeper insights into how the users were expecting a park website to function.

Similarity in categorisation leads to condensed main navigation
Similar categorisation of information into different buckets. Eg: we had cards like ‘Dog runs’ being put equally under ‘Facilities’ and ‘Parks’. We observed a similar pattern in ‘Help’ and ‘About’ and used it to combine these two categories.

Expectation of a filter or map communicated through participant labels
Participants created labels like 'Get Involved' for volunteering and 'Nearby' for anything that they thought should have a map. This helped us see the contexts that participants came with from their previous browsing experiences. This further reinforces the need for filters and maps.

Tree Testing

From the card sort and competitor analysis we built a new sitemap. Then we performed a tree testing exercise to revise the proposed navigation and labeling system. We developed 5 tasks, with 41 participants completing the study.

Analyze the data and refine information architecture
Out of all the tasks completed by participants, 35% ended up at a "correct" answer, 48% of answers were chosen without backtracking. The accuracy rate was not surprising since most tasks are set for ambiguous situations that we wondered about users’ preference. We carefully read each user's paths. We moved “Community” categorisation from “Parks” to “Events” ; rename “SOS” to “Report a problem” and put it under “Contact Us”; put “volunteer” under both “Jobs & Opportunities” and “Community”.

Site Map

We created and designed a site map reflecting our revised Information Architecture.

Design

Wireframing

1. Choosing tasks was the starting point of our wireframing . We took inspiration from our tree-test and the tasks hence were:

   a) Find an event to attend with your kid
   b) Find a park to take your dog for a walk
   c) Find an ice skating rink location within a park that you are visiting

2. Sketching the wireframes was the next task at hand. We first sketch paper prototype individually and then brainstorm with group to proceed with a final wireframe design. We made sure to hear out the design thought process of each member of our group.

3. Creating low-fi prototye. We used the wireframes we sketched and inspiration from a few websites to build out the final wireframes for the user flows. We built our wireframes on Figma.

Desktop Version

Mobile Version

User Testing & Iteration

We used the in-person and remote “think aloud” method with 10 users for testing. According to our observations and feedback, we further created 4 improvenments before closing on the final design.

How did we iterate?

1. In the filter design of EVENT page, because of the multitude of classifications, we set a hybrid filter A (horizontal for date, location and type, as well as a vertical one for detailed filtering). Filter B is another totally horizontal version.

Filter A is preferred by more users, with the only concern that the vertical part made people neglect the horizontal one. This can be solved by hi-fi color design.

3. When being asked to “Find a park to take your dog for a walk”, few participants tended to get confused a little at the get go, due to the closeness of functionality of “Parks” and “Facilities”. We implemented changes including clarifying the meaning of “Facilities” and making the park finding process intuive from Facilities Page entry.

4. In the task to find an event, one participant got confused about the events shown when not applying any attributes. So we added “All” checkboxes which are being selected by default.

Style Guide

Keeping colors vibrant, accessible for our main users (People with kids & Kids).

Using colors to replicate colors of leaves.

Sans-serif font to keep the content playful and in-line with the theme of parks.
Rounded buttons to address the secondary audience and give a minimalist and calming effect.

High Fidelity Prototype

Home Page

Event Page

Filter System

According to user testing, we found that people prefer filters over search. They prefer using filtering systems, especially if they are clear. The final prototype emphasizes the design of the filtering system. 3 filters varied in forms according to different functions and contents they provided.