Information Architecture & Interaction Design LIS-643 | Fall 2020

[ FINAL – Design story]

December 8th, 2020

Redesigning NYC Park Website

About the project: https://www.nycgovparks.org/

The New York City Department of Parks & Recreation has an urgent need to make its website more user-centered and user friendly responding to the COVID-19 pandemic. The project goal is to relaunch sections of the NYC Park website in terms of finding a park.

Team Members

Ellen Connell, Xiujie Bi, Jiyoung Lee

*In this design story, “We” means Ellen, Xiujie and Myself (Jiyoung).

My Role

Tech Manager

My role was tech/product manager and I worked on several tasks; user interviews, user testing, tree testing, and comparative analysis, wireframe connection.

Tools used: Optimal Workshop, Voice Recorder, Google Hangout, PowerPoint and Figma

The Challenge

Current Website

The current website's sitemap

Too many categories

Complicated labels

Overlapped contents

NYC Park’s website nycparks.org serves as the online space for all New Yorkers to access information for every park’s facilities, features and attractions. With COVID-19 restrictions limiting indoor social and recreational activities, New Yorkers are reliant on NYC parks to support a variety of user needs and user activities. The challenge was to redesign the NYC park’s homepage and Find a Park page to improve the find-ability and presentation of relevant content to support user engagement with NYC Parks.

Navigation

How do we define new navigation and organizational structure for the park's website for both web and mobile?

Find A Park

How can we reimagine the Find A Park Tool so that it is more user-centered?

Website Redesign

How can we make the experience of the NYC parks homepage and the Find A Park Page more user friendly?

User Interview & Insight

To define a new navigation and organizational structure for the park's website and optimize it for both desktop and mobile, we interviewed park goers and observed their behaviors to interact with information regarding the park. We conducted 6 in-depth, semi-structured interviews, 3 pure observations and 3 condensed in-situ interviews.

We wanted to know:

The purpose of users’ visits to parks

To understand the purpose of users’ visits to parks and how they are aware of available information on parks

How they access/interact with the information

To examine how visitors get to the park and how they access/interact with the information

what kind of information they need

To develop a baseline of not only understanding the reason why users go to the park but also what kind of information they need

From the interviews, we were able to figure out the problems, challenges and opportunities.

We found out:

People choose parks according to their types of activities.
People demand a better information system both digitally and in parks for Covid regulations in order to stay safe and enjoy their time at the parks.
Users use various channels to seek different kinds of information about parks during their decision making and navigation process. No single channel includes all of their needs.

And Opportunities:

Therefore, our opportunities were:

The first key insight is that proximity to a user’s location is a driving factor in determining which park a user will visit.
We found that parks serve a dual purpose for users as both points of escape, or respite, and a connection to community for visitors.

Additionally, users think the park is a safe place to socialize during the Covid-19

Also, we identified that a park’s built-environment, or features, facilitates a visitor’s activities or within the park.

Lastly, one of the challenges was not to create a completely new website, but to transform and develop from an existing website.

Explorer: “I like to explore new parks” with a plan
Experiencer: “I go to the park spontaneously” and, of course, without plan
Balancer: “I like to go to the parks in my neighborhood” with a plan
Community Lover”: “I like to go to the parks in my neighborhood” without a plan

Mindset

Based on our user research and insights, we designed four mindsets to explore the different types of behaviors of a user deciding to go to the park.

Re-design Process

User Research
Competitive Analysis
Prototyping
Sitemaps
Testing Time
Wireframes

Discover User Journey

Through the user's Journey drawing time, I considered the process of the user’s interaction with finding park information. I drew too freely without a frame, but I was able to imagine a person going to the park with my drawing while comparing the user's Journey Drawings of other team members.

Competitive Analysis | to gain a deeper understanding of what you are designing for by conducting a comparative analysis.

We set up common research keywords and started comparative analysis of other sites. I researched Map, Personalized Experience (Filter) and Accessibility. I chose three sites.

#CITIBIKE

Bike-share system

- Map, Accessibility

It's fun, efficient and affordable

#findyourpark.com

Find Your Park is designed to encourage people to find their personal connections to our national parks.

Map, Personalized Experience(Filter), Accessibility

#UBEREAT

“Uber Eats is the easy way to get the food you love delivered.”

- Personalized Experience (Filter), Accessibility

Findings

These results I got from the comparative analysis such as “Developing a function that shows how crowded the park is and whether there are toilets available in real time” or “Displaying a content for accessibility using a map: Introducing ADA accessible parks, parks with wheelchair ramps”. As time passed and I thought about these results again, it seems that the result was not derived from the context of UX (User Experience) or information architecture(IA). I should have understood better about what IA stands for.

*Thought*

My field I used to work for was public relations, I guess that’s why instead of continually organizing the information specifically, I tried to expand the information and focused more on what would be the advantage or strength for users. It was difficult to concentrate on the process of composing information itself than focusing on the appearance of the final product. Thankfully, my team members majored in design, information, and data, so I learned a lot from them about designing processes in detail.

Prototyping

After identifying a mindset and user journey, we prioritize features for the final product. Our prioritized features are:

Filtered search
personalized recommendations
in-map search and navigation

Based on that, we created a prototype and tested users again!

I recruited a regular park visitor and my classmate who is interested in UX/UI for three rounds of testing with a low fidelity prototype we created. I watched the user's journey while the user was sharing their screen on Google Hangouts with me. After completing the three tasks, the user briefly talked about the experience. The feedback was categorized into three themes: layout, architecture and visual aspects.

Feedbacks from users

The button is too small more than two times / switching apps is not appreciated. / There is a gap between the filter function and the information which the user actually wanted. / The task of users going to 'detailed information' by clicking on 'Prospect Park' was not a good flow. / Since there is only an 'x' button on the top of the pop-up box, the user didn't know that there was other information...etc.

*Thought* My classmates were also taking Usability classes or Information Architecture classes, so I participated as users in their assignment tests, and the problems with their prototypes were very noticeable. In our prototype, it was difficult to find a problem, but other people's prototype problems were well visible. This irony made me realize the importance of many numbers of testing with different groups.

Final Sitemap

On Figma, my teammates and I reordered the contents after listing the sitemap of the current website(https://www.nycgovparks.org/). We narrowed down the category centering on the same content, that is, overlapping content in each different menu.

Testing Time: Card Sorts & Tree Tests

After conducting card sorting & tree testing we found:

For some users, “Plan Your Visit” can be overwhelming, There are so many random contents under the “Resources” menu. Confused labels were removed or renamed in the final sitemap:

Final Sitemap

What we learned

It is important what information is put in and left out. And some words (ex. "Plan Your Visit") can be read differently. I thought Plan Your Visit was a very plain sentence, but for some users, it read as "What do I have to plan?" It was interesting that it could be taken to mean different things by different users Testing is a really important process for developing features since the NYC parks serve for everyone.

Design & Conclusion

Back to Current Website and 'Find a Park' Page

Users need to type 'name' or 'zip code' and then additional 'filter' page comes up.

I finally designed a wireframe for mobile, desktop, and iPad versions based on what I learned so far. I designed it by focusing on "Find A Park" and Filter functions. Menu and essential function information are placed at the bottom of the screen, and the filter is placed in the center of the mobile screen so that the filter function can be used in a straight forward manner. This feature is compatible with Visit' ->'find a park' in the desktop menu. However, I still think it was designed by a person who is used to working from a ‘public relations’ field perspective. There are a lot of things to make progress in on this wireframe!

Conclusion

Every time we test users, we find a different challenge. I was even able to find a new problem in the test the day after setting up the test. I learned that 99% of information architects on a website and designing for the product is all about a test. A good quality test. 1% is a visualization of the result. In the process of creating mindsets and prototypes to set standards for better testing, I learned a lot from my team members in terms of organizing information in a detailed manner. Meanwhile, I realized that the way I design is too results-driven. Of course, it wasn't a class to study my personality or attitude, but I realized that user experience design and information architecture is a long-term project that requires more attention to detail and is responsible for the process itself. Finally, I created an individual wire frame focusing on the 'Find A Park' function. I wanted to put in only the information that users most often desired when trying to find a park. But in the end, I don't think this wireframe is made with an information architecture mind-set since I simplified information and used a lot of visual icon for the frame. This part is a challenge that I need to continue to develop.

Page updated

Report abuse