New York City parks are some of the most beloved and visited landmarks in the city, and Marine Park is considered to be the gem of south Brooklyn. Marine Park Alliance is a website created to offer Marine Park’s visitors essential information about the park and the various events it organizes. This project redesigns the website with a goal to streamline information access, increase visitor engagement, and encourage donations.
Information Architecture
UX Design
Content Strategy
Usability Testing
Figma
FigJam
Google Workspace
Optimal Workshop (Card Sorting & Tree Testing)
Indrani Thool
DURATION12 weeks
New York City parks are some of the most beloved and visited landmarks in the city. Most parks have some kind of an online presence. Despite their popularity, many park websites are often criticized for being user-unfriendly or poorly maintained.
This case study explores the redesigning of the Marine Park Alliance website, a prominent park in south Brooklyn. The redesign focuses on the following needs of the Marine Park Alliance:
Create more interest and engagement surrounding park events and volunteering through the website
Based on insights from client needs and user research, we established goals to enhance the website's UI/UX by reorganizing and streamlining information, promoting park donations, and boosting visitor engagement with park events. This approach aims to improve user interaction, exploration, and overall experience on the Marine Park Alliance website. Our process is outlined below.
STEP 01: STRATEGIZE
- Understand client needs & goals
- Identify important workflows on the website
- Develop a targeted questionnaire aligned with research goals
- Recruit participants
- Conduct semi-structured interviews, competitive analyses, and site analyses for detailed insights into the website
- Develop solutions for identified problems
- Create high-fidelity prototypes for demonstration
- Communicate process, findings, and recommendations to client
- Compile relevant key insights from research
- Identify, record, and prioritize common issues
- Evaluate the best way to implement potential solutions
Through strategizing, user research, and analysis, we identified 5 key areas of improvement for the Marine Park Alliance website. There areas were prioritized based on their impact on user experience and feasibility
Homepage & Navigation Bar
Navigation links in the Menu bar and Homepage content are unclear and cluttered, impacting users’ ability to efficiently access content.
Events Page
Users found the Events page unengaging and uninformative. The design does not align with modern competitive standards, and is in need of an update.
Navigation Label Landing Pages
Landing pages for navigational categories are lacking in informative value and were unable to effectively redirect users to relevant information.
Users are struggling to engage with and track recurring weekly activities because they are presented alongside one-time events without clear distinction.
Donation Pathway
The current donation pathway relies on externalizing the payment process. A modern, internal payment pathway would encourage users to donate.
To achieve our set goals by the end of our design process, we created medium-fidelity prototypes to demonstrate our proposed solutions to problems identified through the research process.
01. REDESIGNING THE NAVIGATION BAR
A key focus of the website redesign was improving navigation. Using insights from Card Sorting and Tree Testing, we streamlined the main navigation into four clear categories with dropdown menus for sub-navigation.
Additionally, a prominent "Donate" CTA button was introduced, providing users with a straightforward way to support the park.
02. THE ‘HOMEPAGE’ LAYOUT
The Homepage was structured with prioritized content sections to create a clean, user-friendly design that avoids overwhelming visitors. The goal was to guide users toward various ways they can engage with the Marine Park community.
The design allows flexibility, offering multiple pathways to explore key website content right from the landing page, encouraging deeper user engagement and exploration.
03. THE ‘GET INVOLVED’ PAGE
The Get Involved page was designed to present all available resources for supporting the park in a structured hierarchy. It begins with a focus on donating, followed by a section on volunteering, with clear links to dedicated pages. Additional ways to contribute, such as Become a Sponsor or Give a Commemorative Gift, are featured further down.
A separate section for Job Opportunities, highlighted with a distinct background, includes a brief description and a link to detailed information, encouraging users to explore potential roles.
04. THE ‘DONATION’ PAGE
User feedback revealed that displaying the payment prompt immediately after clicking the donation CTA aligned better with their mental models.
Instead of encountering additional donation content and needing to click a second "Donate" button, users preferred a more direct path to initiate the payment process, streamlining their experience.
05. HOW CAN ONE DONATE?
The competitive analysis revealed that most nonprofits offer flexible payment options, including credit/debit cards, bank transfers, and popular mobile payment platforms.
While electronic payments remained the primary focus, the team also included instructions for donating via physical check in the FAQ section. This decision ensured clarity without disrupting the streamlined flow of the main payment options.
06. THE ‘VISIT THE PARK’ PAGE
The Visit the Park page was structured to prioritize essential information for park visitors. It begins with a park map and general details, followed by brief sections on facilities, ecology, and permits—arranged in order of importance to park-goers.
Since Weekly Activities and Events are covered on other pages, they are positioned at the bottom as an introduction for new visitors, encouraging further exploration of the park's offerings.
The Events page was designed to present park events in a clear date and day format, accompanied by brief descriptions for context. Drawing from competitor research, a calendar dropdown was introduced to simplify event searches. Pagination allows users to easily load more events, helping them plan future visits.
Additionally, a disclaimer note was added above the event list to improve the user experience and demonstrate the organization's commitment to transparency and user care.
08. SIGNING UP FOR AN EVENT
The event-specific page offers comprehensive details about each event, including features like a ‘share’ option for promoting the event or inviting friends and family, an ‘add to calendar’ icon for easy reminders, and a ‘back’ icon to return to previous search results.
The registration flow is designed with sufficient details to assist users throughout the process.
09. THE ‘ACTIVITIES’ PAGE
The Activities page presents information in an easy-to-digest format using icons and clear layout composition. It maintains a design similar to the Events page but is adapted for scalability.
Time information is placed before days to ensure a stable layout, accommodating varying day formats (e.g., Mon-Fri). Additionally, users have the option to explore the events calendar for further details.
Throughout the design process, we placed an emphasis on creating responsive designs that work seamlessly across both desktop and mobile platforms. This approach ensures consistent user experiences on the Marine Park Alliance website regardless of screen size to optimize functionality and aesthetics. Some comparisons of desktop vs. mobile layouts can be seen below:
The Marine Park Alliance website has 3 groups of target users: park visitors, park volunteers, and organizations looking to partner with the park Alliance. In our case study, we focus on understand and designing for park visitors and park volunteers. Through our user research, we understand and define the needs of our target users to tailor the design effectively.
PARK VISITORS
PARK VOLUNTEERS
Motivations
- Values a connection with nature
- Likes to explore different areas of the park
- Uses parks to relax, exercise, and socialize
Challenges
- Navigating a big park for trails or events
- Lack of amenities in public parks
- Increased litter and reduced maintenance in parks
Needs
- Real-time information and updates about park conditions
- Clear physical and virtual navigation of parks
- Activity & community based spaces
Motivations
- Passionate about nature and conservation
- Wants to give back to the community
- Build community through volunteering
Challenges
Needs
- Lack of information and ambiguity about volunteer events and detials
- Time constraints due to busy lifestyle
- Limited individual resources for volunteering
- Flexible scheduling to align with a busy lifestyle
- Clear communication and expectations for volunteer activities
- Training and guidance for volunteers
Research interviews were conducted to understand more about New York City public parks and their web presence and explores user needs and behaviors. Key insights gained were categorized and are outlined belo.
VOLUNTEER MOTIVATIONUsers mentioned a need to connect with nature within the city, and give back to their community
PARK HISTORY & BACKGROUNDUsers want to understand the park’s history, background, origins, and missions
WEBSITE CONTENT & STRUCTURE Emphasis on a clear, concise, and easily navigable layout
EVENT PLANNING & DETAILS Better organization and clear steps to register would encourage potential volunteers to sign up for events
PARK COMMUNITYUsers want to see the park actively fostering a community
SOCIAL MEDIA PRESENCE Users mentioned enjoying regular social media updates about the park
Competitive Analysis for the Marine Park Alliance website involved evaluating similar park websites and nonprofit platforms to identify best practices and areas for improvement. We assessed 7 key features across 8 different direct and indirect competitors of Marine Park Alliance. The chosen features were: mobile display, navigation, organization, content (donation and volunteering), content (storytelling), content (events), and visuals. By benchmarking against these competitors, we gained valuable insights into user expectations and industry standards, which informed our design strategy and helped us create a more user-centric and effective website for the Marine Park Alliance.
We employed tree testing to assess the effectiveness of the site’s navigation structure and card sorting to better understand user expectations and categorize content intuitively. User flows were analyzed to streamline task completion and improve overall user experience.
Additionally, a detailed map of the site was created to visualize and refine the information architecture. These methods collectively informed a redesign that reorganized content, simplified navigation, and improved efficiency, ultimately resulting in a more user-friendly and effective website for Marine Park Alliance.
Through the process outlined above, we brainstormed, analyzed, developed, and refined designs for the Marine Park Alliance website. The final deliverable was a funcation, medium-fidelity prototype that effectively represented the changes proposed.
By implementing our proposed solutions into medium-fidelity mock-ups, we created the final prototype seen below as a reference for Marine Park Alliance to visualize the recommended changes.
Our findings, recommendations, and prototypes were met with positive feedback when presented to our professor and classmates.
A feature that stood out was the decision to split Upcoming Events and Weekly Activities. Our professor appreciated that it creates a solution that allows visitors to quickly find information for those recurring events they may have attended in the past without having to scroll through all the upcoming events. “It removes, potentially several, unnecessary clicks in the visitors journey - and a simplified journey is always a good journey.”
We were gratefule for the detailed feedback, and want to incorporate it into the prototype. Our team also hopes to transform our latest medium-fidelity prototype into a high-fidelity, functioning prototype moving forward.
Learning to use Optimal Workshop has been a valuable experience in understanding user behavior and improving site usability. The platform’s tools provided novel insights into how users categorize information and navigate through content. This hands-on experience with has enhanced my ability to design user-centered interfaces and create more effective, user-friendly website layouts based on real user feedback and behavior.
Designing & Prototyping
Throughout the design and prototyping phase of this project, I gained a deeper understanding of balancing creativity with functionality. Developing prototypes allowed me to translate abstract ideas into tangible, interactive designs, providing clarity on how users would interact with key features. Additionally, I learned the importance of embracing collaborative design, and trusting each other to tackle the design challenge together.
Managing Team Conflicts
Our team had to work through major conflicts and confrontation. While we were able to push through and make the deadline with a satisfactory project, this experience taught me the importance of clear and prompt communication. It underscored the value of building trust within the team and finding constructive solutions to ensure project progress and cohesion.
As part of the project, our team created a presentation that details complete Competitive Analysis for Marine Park Alliance, key insights, and recommendations for redesign.
VIEW PRESENTATION
As part of the project, our team created a presentation on the process of using User Research, Card Sorting, and Tree Testing as analytical tools to restructure the content and information architecture of the website
VIEW PRESENTATION