Marine Park Alliance
Redesigned
As a part of “The Park Rangers” team,
Information Architecture/Interaction Design,
Fall 2023, School of Information, Pratt Institute.
Introduction.
The Marine Park Alliance:
The Marine Park Alliance is a non-profit group in Brooklyn that focuses on making Marine Park more beautiful and engaging for everyone. They do this by organizing cultural events, volunteer programs, and environmental education. They also focus on preserving the ecology of the park, so it thrives for all New Yorkers.
A Green Haven
Cultural Events
Volunteer Programs
Problem Statement:
Marine Park's online presence (marineparkalliance.org), was questionable, users tended to feel unengaged by the content of the website, it also failed to convey the story of the park, this in turn might be affecting the number of people signing up to donate and volunteer online.
Questions for thought:
How can the Marine park’s website be changed to make it more captivating to the users.?
What changes can make it easier to access, and use key pages such as Volunteer opportunities, donation pathways, and event information?
What changes can make it easier to access, and use key pages such as Volunteer opportunities, donation pathways, and event information?
Approach
Why Stakeholder Interviews?
Interviews with people involved with parks serve as an important first step to help in gaining a better understanding of our user base. Overall, the interview questions aim to paint a complete picture of park users and their online behavior, allowing the Marine Park Alliance to tailor their website and outreach efforts for maximum impact.
Why Card Sorting?
From the findings from User Interviews, and Competitive Analysis points towards the importance of tailoring the site’s information architecture according to the user, Card Sorting was conducted to help us create appropriate labels for content within the website with the user.
Why Tree Testing?
Tree Testing is the second and final step to structure information, It is necessary to help identify problems with the changed Information architecture, this step is the closest to the site’s real navigation. The insights from this step help improvise the structure to use the updated navigation within the wireframe.
Stakeholder Interviews
Before The Interview
From Team discussions the Identified Audiences were:
- New York City locals interested in parks
- Potential park volunteers
- People from similar organizations
Read More
Diversification of Target Audiences and Questions:
- Venkat: Walk in interviews with Two interviewees from different age groups, with questions based on context.
- Sami: Two Potential park volunteers, with questions both based on context and website navigation.
- Michelle: NYC locals both interested in NYC parks and who are potential park volunteers, with questions both based on context and website navigation.
Within the Interview
It was made sure that the interviewees had enough space to freely express, and let the interviewer gain general perspective towards NYC park goers, including their knowledge on park websites, mission , volunteering activities, and events.
Link to the Interview transcripts
After the Interview
Tree Testing is the second and final step to structure information, It is necessary to help identify problems with the changed Information architecture, this step is the closest to the site’s real navigation. The insights from this step help improvise the structure to use the updated navigation within the wireframe.
User Persona
Competitive Analysis
Methodology:
“Dimensions” such as Home page, and navigation system were chosen to compare elements of a website, based on evaluating gathered information through interviews of the target audiences .
“Competitors” include Parks that were mentioned in the user interviews and by geographical location, to better compare with the Marine Park.
This critical analysis of competitors regarding metrics that its target users are most interested in allowed us to compare and draw insights from other parks
Within the team, work was divided by metrics.
Venkat: Menu, Home, and About Page.
Sami and Michelle: other metrics.
“Competitors” include Parks that were mentioned in the user interviews and by geographical location, to better compare with the Marine Park.
This critical analysis of competitors regarding metrics that its target users are most interested in allowed us to compare and draw insights from other parks
Within the team, work was divided by metrics.
Venkat: Menu, Home, and About Page.
Sami and Michelle: other metrics.
Diversification of Target Audiences and Questions:
- Venkat: Walk in interviews with Two interviewees from different age groups, with questions based on context.
- Sami: Two Potential park volunteers, with questions both based on context and website navigation.
- Michelle: NYC locals both interested in NYC parks and who are potential park volunteers, with questions both based on context and website navigation.
Dimensions:
Menu
Determines the user's ease of navigation and access to important content.
Determines the user's ease of navigation and access to important content.
Home
Serves as the first impression and can significantly impact user engagement and retention.
Serves as the first impression and can significantly impact user engagement and retention.
About Page/Section
Provides insights into a park’s mission, values, and history, helping to rally further interest.
Provides insights into a park’s mission, values, and history, helping to rally further interest.
Volunteer Pathway
Volunteering is an essential part of mobilizing the community. Since there are many barriers, the digital pathway should not be one.
Volunteering is an essential part of mobilizing the community. Since there are many barriers, the digital pathway should not be one.
More Dimension Descriptions
Donation Pathway
Donations also play a large role in mobilizing the community in an intangible way. Thus the pathway is critical.
Donations also play a large role in mobilizing the community in an intangible way. Thus the pathway is critical.
Readability
How well is the site communication with the user strategizing the text content to maximize readability.
How well is the site communication with the user strategizing the text content to maximize readability.
Mobile Compatibility
Most of the interviewees reported they use mobile phones the most to access websites, a fully functional mobile website is hence an important metric.
Most of the interviewees reported they use mobile phones the most to access websites, a fully functional mobile website is hence an important metric.
SocialOutreach
Community building, and visibility serve an important role in maintaining a healthy digital landscape. Hence this dimension.
Community building, and visibility serve an important role in maintaining a healthy digital landscape. Hence this dimension.
Visual Design
Helps to elevate or atleast reinforce the park’s mission and values in a nontextual way.
Helps to elevate or atleast reinforce the park’s mission and values in a nontextual way.
Menu
Determines the user's ease of navigation and access to important content.
Determines the user's ease of navigation and access to important content.
Chosen Competitors:
- Central ParkFort Greene Park
- Prospect Park
- NYC Parks
- Brooklyn Bridge Park
- Fort Greene Park
- Bryant Park
- Jamaica Bay Wildlife Refuge
- Shirley Chisholm State Park
- Riverside Park Conservancy
Rating Criteria:
Home Page
Menu
About Page
Final Results:
Key Insights:
- The structure of information within parks such as Central Park and Riverside Park is very clear, they have a very functional Menu system, creating a consistent user experience for the user. Information Architecture should be heavily corrected within Marine park.
- Volunteer and Donation pathways in well-thought out websites are much easier to reach and fill out, information on these sites are curated and easy to follow these key pathways can be focused on for Marine Park.
- People from similar organizations
Diversification of Target Audiences and Questions:
- Venkat: Walk in interviews with Two interviewees from different age groups, with questions based on context.
- Sami: Two Potential park volunteers, with questions both based on context and website navigation.
- Michelle: NYC locals both interested in NYC parks and who are potential park volunteers, with questions both based on context and website navigation.
View key snapshots of all the website comparisions
Structuring Content
Existing Site Map:
Methodology:
- Identifying the existing content
- Card sorting
- Tree testing
- Finalizing the new site map
Card Sorting
Before the Activity
A list of existing content cards based on our audit of the Marine Park Alliance’s current website and the results of our competitive analysis were drafted
- Make a donation
- Why you should donate
- How to volunteer
- Volunteer opportunities
- Make a corporate donation
- Employment opportunities
- About Marine Park
- About the Marine Park Alliance
- About Marine Park’s mission
View full list
- Information about Marine Park’s values
- Community events
- Events for kids and families
- Things to do
- Facilities
- Maps
- Park policies
- Frequently Asked Questions
- Information about Board of Directors and Park Leadership
- Partners of Marine Park
- Contact Information
- Marine Park’s Blog
- History of the park
- Press
- Biodiversity at the park.
- Sign up for email newsletter
- Alerts: Facility Updates
- Dedicate a gift
- Park Hours
- Connect on social media
- Special Event Permits
- Sports Permits
- Film Permits
- Picnic Permits
- Wedding Permits
- Contribute to a fundraiser
- Host a fundraiser
Within the Activity
A card sorting study was conducted using Optimal Workshop with 6 participants between the ages of 18 and 70 years old.
Users were given a list of items and asked to organize them into groups that make sense to them. There are no right or wrong answers, and users are encouraged to do what comes naturally by dragging an item from the left into the designated area to create their first group.
Link to the Card Sorting Study
Donation Pathway
Donations also play a large role in mobilizing the community in an intangible way. Thus the pathway is critical.
Donations also play a large role in mobilizing the community in an intangible way. Thus the pathway is critical.
Readability
How well is the site communication with the user strategizing the text content to maximize readability.
How well is the site communication with the user strategizing the text content to maximize readability.
Mobile Compatibility
Most of the interviewees reported they use mobile phones the most to access websites, a fully functional mobile website is hence an important metric.
Most of the interviewees reported they use mobile phones the most to access websites, a fully functional mobile website is hence an important metric.
SocialOutreach
Community building, and visibility serve an important role in maintaining a healthy digital landscape. Hence this dimension.
Community building, and visibility serve an important role in maintaining a healthy digital landscape. Hence this dimension.
Visual Design
Helps to elevate or atleast reinforce the park’s mission and values in a nontextual way.
Helps to elevate or atleast reinforce the park’s mission and values in a nontextual way.
Menu
Determines the user's ease of navigation and access to important content.
Determines the user's ease of navigation and access to important content.
After the Activity
Top-level Headers: Based on card sort results, headers the following headers were chosen:
- About
- Visit the Park
- Events
- Support the Park
- Connect
- Careers
- Shirley Chisholm State Park
Tree testing
Methodology:
Tasks were given to the users to navigate through the site map , the following points were kept in mind to create tasks for the tree test:
- None of the tasks had the same terminology.
- The tasks were mostly scenarios that the user can emulate.
- Some items such as permits were repeated at places where users can go such as events as well as help , to improve accessibility
- Information about Marine Park’s values
- Community events
- Events for kids and families
- Things to do
- Facilities
- Maps
- Park policies
- Frequently Asked Questions
- Information about Board of Directors and Park Leadership
- Partners of Marine Park
- Contact Information
- Marine Park’s Blog
- History of the park
- Press
- Biodiversity at the park.
- Sign up for email newsletter
- Alerts: Facility Updates
- Dedicate a gift
- Park Hours
- Connect on social media
- Special Event Permits
- Sports Permits
- Film Permits
- Picnic Permits
- Wedding Permits
- Contribute to a fundraiser
- Host a fundraiser
Link to View all Tasks
Link to Tree Testing Study
Insights
Insight one: Donate
To test our donation pathways, we asked users to find the “dedicate a gift” section of the website. Because users struggled with this task, we moved the correct information to Support the Park > Donate, where participants expected to find it.
Multiple User’s attempts in finding Dedicate a gift
Insight two: The Park’s Mission
Close to 50% of users navigated incorrectly to the Park’s Mission. There was a portion that either navigated to the Park’s about page or the Alliance’s about page. We opted to include the Park’s Mission in the general about page to settle the difference.
Multiple User’s attempts in finding the Park’s Mission
Insight three: Alerts
Users disagreed about where to find time sensitive alerts like holiday hours or weather updates. With such variety, we removed it as a stand alone label. This information will be held on the multiple pages where users expected to find it instead.
Multiple User’s attempts in finding Alerts
Finalized Site Map
Existing Site Map:
Changes:
- The About section was decided to have a seperate menu containing pages related to the Allaince.
- Permits were accessed in multiple location hence were made to be accessed in both the most checked locations.
- Support the Park has two main options which makes donating clearer and easier.
Initial Wireframes & Testing
Methodology:
- Two tasks were focused on to create wireframes for, Donate and Sign up for an event were chosen as they are the most common tasks performed by a user visiting a park site.
- These tasks also serve as a great example to redesign other pages.
- A Total of four prototypes, Donate mobile, Donate desktop, Events Mobile, Events desktop were made.
- The wireframes were tested by interviewing a total of six people.Each member from the team conducted a usability test for two people based on each task on both mobile and desktop. No two tasks for the user were on the same task or the same platform.
- Listed below are our tasks:
Donate with your bank card to the Marine Park alliance
Check out and register to the Coffee Meet on November 12th
Diversification of Target Audiences and Questions:
- Venkat: Walk in interviews with Two interviewees from different age groups, with questions based on context.
- Sami: Two Potential park volunteers, with questions both based on context and website navigation.
- Michelle: NYC locals both interested in NYC parks and who are potential park volunteers, with questions both based on context and website navigation.
Design Guidelines
To streamline our design work, we established basic guidelines to create the wireframes, this is a snapshot of the same.
Events Desktop Wireframe:
Donate Mobile Wireframe:
Insights:
- The payment process should be simplified by restructuring the page to make PayPal more prominent and donating by mail less prominent.
- The number of steps it takes to find and register for an event can be reduced, users should be able to see all upcoming events together and register immediately.
- Users found the scroll by week menu confusing, since there was no indication near the numbers which said week, hence could not scroll through the events.
- Separately from these tasks, we received user feedback that some text was too small in some places and too large in others. We should re-evaluate our type system.
Diversification of Target Audiences and Questions:
- Venkat: Walk in interviews with Two interviewees from different age groups, with questions based on context.
- Sami: Two Potential park volunteers, with questions both based on context and website navigation.
- Michelle: NYC locals both interested in NYC parks and who are potential park volunteers, with questions both based on context and website navigation.
Final Wireframes
Home Page
- Alert Banners
This change was implemented after a competitive analysis revealed that pop-ups can be disruptive and take up valuable screen real estate.
- Separate Careers and Contact
After testing the website, it was observed that users were getting distracted by the "Careers," "Connect," and "Help" links in the main menu, since they were not essential for navigation they have been moved down.
Diversification of Target Audiences and Questions:
- Venkat: Walk in interviews with Two interviewees from different age groups, with questions based on context.
- Sami: Two Potential park volunteers, with questions both based on context and website navigation.
- Michelle: NYC locals both interested in NYC parks and who are potential park volunteers, with questions both based on context and website navigation.
Events page
- Dual Views - Monthly Calendar and Weekly
Panel
After User Interviews it users were confused by the “dead” interaction of the Monthly Calendar View, hence they were integrated to this dual-view system allows users to seamlessly switch between the comprehensive overview provided by the Monthly Calendar and the detailed information available in the Weekly Panel. Now, users have the freedom to explore and interact with events seamlessly, whether through the visual appeal of the calendar or the efficiency of the weekly list.
Diversification of Target Audiences and Questions:
- Venkat: Walk in interviews with Two interviewees from different age groups, with questions based on context.
- Sami: Two Potential park volunteers, with questions both based on context and website navigation.
- Michelle: NYC locals both interested in NYC parks and who are potential park volunteers, with questions both based on context and website navigation.
- Loading Screen
A progress bar has been added to the Marine Park Alliance website. During user testing, one user mentioned that indicating the progress of page loading would be helpful.
- Payment Confirmation
The website has added a Payment Confirmation page to enhance the user experience. This change was made after a competitive analysis revealed that many parks incorporate specialized "thank you" pages for donations.
Diversification of Target Audiences and Questions:
- Venkat: Walk in interviews with Two interviewees from different age groups, with questions based on context.
- Sami: Two Potential park volunteers, with questions both based on context and website navigation.
- Michelle: NYC locals both interested in NYC parks and who are potential park volunteers, with questions both based on context and website navigation.
Copyright © 2024