Redesign of NYC Parks COVID-19 Toolkit

Rethinking NYC Park’s COVID Toolkit to increase awareness while preserving a sense of normalcy

A Mobile-first Design Challenge

2-minute read

OVERVIEW

Our team of 2 grad students embarked on a design-thinking challenge to reimagine the NYC Parks COVID-19 toolkit and overall information architecture to be mobile-first.

Key takeaways:

In the discovery phase, we conducted a mix of interviews and contextual inquiries that helped us understand park-goers in their context. This provided us with the insight that park-goers find parks to be a reprieve from the shut-ins of the pandemic, and posed the main question: how can we still relay important pandemic-related information while making users feel that parks are a place of normalcy during these times?
In the defining phase, we conducted a comparative analysis and developed user journey maps to help us define opportunities for COVID-19 alert banners, operating status banners, topic-specific COVID-19 pages, and a comments feature. We did some rapid prototyping and tested this first prototype with users early.
In our constructing phase, we developed a revised sitemap based on findings from cart sorting and tree testing exercises which helped us refine the global navigation from 9 categories to 5 in an effort to optimize for mobile.
In the last evolve phase, I returned to our prototypes and iterated on the insights from our earlier testing sessions. As a final deliverable, high-fi mockups were created to imagine the toolkit across 3 different break points.

7-minute read

BACKGROUND

How can we relay important pandemic information when people want parks to feel like a place of normalcy?

The NYC Parks COVID-19 toolkit relays important announcements and park service changes to park goers during the pandemic. It also informs park goers about critical health and safety guidance in both NYC and abroad.

This was a semester-long project with a hypothetical client conducted for an Information Architecture & Interaction Design course at the Pratt Institute. In the fall of 2020, the coronavirus pandemic has altered people’s lives in unimaginable ways. And as social isolation continues, people and park goers are grappling with this new normal. Understanding this reality, our primary goal was to:

Discover the attitudes and behaviors of park goers and how these may have shifted during the pandemic.
Define the problems that park goers face along their journey and establish opportunities for solutions.
Construct an information hierarchy that allows for easier information access.

Timeline:

16 weeks (August 30th - December 20th, 2020)

Tools:

Figma; Optimal Workshop

Our Team & Roles:

Wuke Zhou and myself

I conducted 1:1 interviews and contextual inquires; performed comparative analysis; developed prototype screens in Figma; conducted card sorting/tree testing; presented results

Deliverables:

Research brief ; Comparative analysis; Prototype evaluation; Mid-point presentation

Our Design Process

DISCOVERY

Understanding the Problem.

As part of our user research, we focused on understanding park goers in their context by conducting a mix of 1:1 interviews and 1:1 contextual inquiries in parks of their choosing. Each team member was responsible for recruiting and interviewing and/or observing four participants. From this research, we formed 4 key insights that were central to our redesign:

Parks as a place of normalcy. People saw parks as a safe(r) place during the pandemic. They felt some level of normalcy while at a park and felt free to take their mask off and socialize in an open space outside. Some people were going to the park more than they were pre-pandemic, indicating the park as a place of amnesty during these difficult times.

Time sensitivity. Park goers are often known-item seeking for information on parks. Their search usually started with Google, and users want to get relevant and specific information quickly and easily, often times while en route to a park.

Relevant COVID-19 information. People's interest in COVID-19 information and updates was narrow in scope. The information they sought about the pandemic was usually within the confines of their community and was centered around reopening phases and the operating statuses of places they frequented.

Distrust. There was an observed skepticism with how people reacted to the accuracy of pandemic information.

Using these key insights, we were able to frame a core problem to solve in our redesign —

For park goers who come to parks to find a reprieve from the shut-ins of the pandemic, how can we still relay important pandemic related information while making users feel that parks are a place of normalcy during these times? And how do we make this information relevant to the users context?

DEFINE

What are our opportunities for relaying information?

After establishing the core problem to solve in our redesign, I conducted a comparative analysis and worked with Wuke to develop a user journey map to help us define opportunities to solve our framed problem.

Comparative Analysis

My comparative analysis research demonstrated the synonymous use of alert banners for COVID-19 updates. It also revealed the value of categorizing pandemic related topics into separate pages and the importance of keeping pandemic information up to date.

User Journey Map

Through user journey mapping, we envisioned park goers throughout their journey and were able to identify the opportunity to include operating status banners and a comments function for staying up-to-date.

From these exercises, we established the following opportunities to focus on in our redesign:

COVID-19 Alert Banner. This alert banner will be included throughout the website, and will give users quick and easy access to pandemic information to satisfy the time sensitivity of users.

Operating Status Banners. These banners will be included on the individual page level for things that might be effected by the pandemic, keeping the time sensitivity of users in mind by giving a quick update on their operating statuses. These banners are also aimed at keeping pandemic information around the context of what’s open (i.e. what is ‘normal’).

Topic-specific pages for COVID-19 information. From the landing page, we envisioned creating separate pages to categorize pandemic information to avoid information overload of pandemic related updates. Our goal is to not overwhelm users with too much pandemic information if they’re not seeking it. The separate pages we established were: Open/Closed Facilities, Service Updates, Health Guidelines/Measures, News, and hyperlinks to NYCHealth.gov, and NYCSchools.gov.

Comments Feature. By giving users the ability to comment on their experience at NYC parks, our goal is to combat distrust of pandemic information by keeping information up to date.

Putting our designs to the test.

We developed a rapid prototype to test our defined opportunities. Each team member was responsible for recruiting and testing with two participants each. The results from this prototype test further proved a similar insight we had gleaned from our user research: Users searched for pandemic information in relation to their context. For users looking to see what the pandemic protocols were for high contact sports like basketball, we anticipated users to navigate to the ‘COVID-19 Updates’ alert banner. Instead, they first navigated to the NYC Parks basketball courts page to find this information.

Our prototype test also revealed problems with the site’s content structuring, specifically around the category of ‘Facilities’. The NYC Parks website categorized ‘Facilities’ as beaches, pools, golf courses, basketball courts and tennis courts (to name a few), while our prototype test participants didn’t associate these pages as being categorized under ‘Facilities’. With this discovery in mind, our next phase focused on refining the information hierarchy.

CONSTRUCTING

Improving the information retrieval process.

Changing courses a bit, next we tackled some of the information architecture problems identified during our prototype tests. To aid in constructing new labeling and categorization systems, we engaged users in an open card sort to understand their way of thinking. After creating a new site map from the card sort, we tested this new information hierarchy on users through task based tree tests. From the findings of these tree tests, we ideated to develop a revised site map.

The Original Site Map

Our goal was to restructure the site’s content to optimize for easier information retrieval by refining the information hierarchy and reducing the categories included in the global navigation menu. We also wanted to address the confusion around ‘Facilities’ and establish a new category for these pages.

The Revised Site Map

From our card sorting and tree testing activities, we developed 4 key changes to the site map.

These new categories were: Parks, Activities, Permits, Opportunities and Information. We also wanted to make the language of these labels more inviting and relabeled them as: 1). ‘Explore our Parks’, 2). ‘Discover Activities’, 3). ‘Obtain a Permit’, 4). ‘Opportunities With Us’, 5). General Information
We created a new category for ‘Activities’ as this was the most common category created in the card sort and was associated with things to do. So we moved the pages under Events, Programs, and Facilities that involved things to do under this new ‘Activities’ category. ‘Activities’ was still kept separate from the category ‘Parks’, which was seen by participants as places to be.
We dropped the label ‘Facilities’ all-together, as this label caused the most confusion among participants. Participants thought ’Facilities' would be associated with restroom areas and visitor centers - rather than basketball courts, beaches, playgrounds, etc. We restructured those pages under ‘Find an Activity’.
The categories for ‘Trees’ and ‘Kids’ were removed from the global nav. Those pages for tree related services would be included under General Information > Services — and any kids related programs were restructured under Discover Activities > Programs. The ‘COVID Updates’ main landing page was also brought up a level to be included as a secondary category under ‘General Information’.

EVOLVE

Iterating our designs

In the last phase of the design process, our teams were instructed to iterate on our final design solutions independently, so that we each came up with our own unique design solutions. Going back to our earlier prototype, I iterated on some of the earlier design problems that were identified throughout our process:

*Figure 6. COVID-19 Alert Banner Prototype Redesign*

The COVID-19 alert banner was redesigned closer to the users view point near the global navigation bar. Our original prototype test demonstrated that the earlier banner design was met with some confusion and overlooked by users.

*Figure 7. COVID-19 Landing Page Prototype Redesign*

The COVID-19 landing page was restructured into new categories, largely based on the new labels established in our revised site map. Open/Closed Facilities was changed to ‘Operating Statuses’. Our earlier prototype test revealed confusion around Service Updates and so this was changed to ‘Activities and Permits Changes’, and more pandemic safety related information was added.

*Figure 8. Operating Statuses Page Prototype Redesign*

As mentioned, the Open/Closed Facilities page included under the COVID-19 landing page was relabeled and designed to be the Operating Statuses page. In redesigning this, the emphasis is to keep the focus around ‘parks as a place of normalcy’ by showing that parks and activities operate on a spectrum of openness (v.s. just open or closed). Users can search and filter for information about what is operating as normal, under limited capacity, with reservations required, etc.

*Figure 9. ‘Is this information accurate?’ Prototype Redesign*

The comments feature was reimagined as a ‘Is this information accurate?’ feature. Users can ‘like’ if pandemic information is accurate, or send a message if information is incorrect. These ‘likes’ help show that information has been approved by others, while the messaging allows users to give feedback when information is incorrect. By dropping the open comments forum, this alleviates the need for moderation of this forum.

Establishing new user flows that prioritize context.

Using the revisions from the earlier prototype and restructured information hierarchy, new user flow wireframes were developed. This user flow applied our understanding that park goers search for information in context. Wireframes were created to follow the journey of a park goer going through the process of finding the operating status of a local golf course. The flow seen below shows a user bypassing the COVID-19 alert banner, but still getting to relevant pandemic related information through integration of the COVID-19 toolkit with other areas of the site.

An exercise in responsive Hi-Fi mockups

As a final deliverable, the redesigned COVID-19 landing page was mocked up to show responsiveness in high-fidelity. This redesign was imagined across 3 different breakpoints: desktop, tablet and mobile. The landing page uses cards for categorizing the separate pages we identified. Brief summaries were included on these cards to describe page content, and thoughtful icons were applied while being careful not to cross the line into ‘playful’ when surrounding a serious topic.

*Figure 11. High Fidelity COVID-19 Landing Page: Desktop*

*Figure 12. High Fidelity COVID-19 Landing Page: Tablet*

*Figure 13. High Fidelity COVID-19 Landing Page: Mobile*

To further highlight these design changes on mobile, included below is a mobile redesign comparison (left: original COVID-19 landing page, right: revised COVID-19 landing page)

REFLECTIONS

What I learned.

While this was a relatively quick 16-week project, we were able to go through the full user-centered design process. Through this process, I’ve learned the importance of making informed choices to design. Design choices cannot often be surmised by hard, quantitative data. Rather, these choices are often informed through insights and qualitative forms of research. And more importantly, design direction is informed by failing, by getting it ‘wrong’, in order to get closer to getting it ‘right’.

I’ve put ‘right’ and ‘wrong’ in quotations for a reason, as these terms aren’t so straightforward in design. ‘Right’ design choices for some could have ‘wrong’ effects on others. I grappled with this notion when constructing the user flows. I constructed a flow that purposely looped the user through the COVID-19 landing page (even if they were trying to avoid it), in an effort to *nudge users towards important pandemic information. Knowing this might be the ‘right’ design choice for NYC Parks and their aims, it could also be the ‘wrong’ design choice for users as it adds extra steps to their process.

Design is about making choices — having the confidence to back those choices, but also having the humility to modify those choices.

I like to end each case study with a section on what I’d do differently if I had to do it over:

While this was a creative hypothetical design challenge, our recommendation to add an ‘operating status banner’ would be a large undertaking, as it would require consistent updating to a database of NYC parks. While this is a helpful solution to the user, this might not be an ideal solution to a potential client.
This was my first time using Figma and my lack of experience in the tool was evident in hindsight. I didn’t know how to create scrollable frames at the time and therefore my high-fidelity mockups cut off below the fold. If I could do this again, I would build out the complete COVID-19 landing page to include elements below the fold.