Fishing School | My Site

The Fishing School Website Redesigned

Redesigning The Fishing School website to improve future prospects of donations and partnership with corporate companies to join their their initiative.

UX Team:

Sanath Desai, Hailin Chen

My Contribution:

UX Research, Usabity Testing, Wire-framing & Prototyping, Visual Design

Timeline

July 2024 - August 2024 (8 Weeks)

Donation Infomation_Organization-min.jpg

The Fishing School

Fishing School DC is a dedicated educational nonprofit organization providing comprehensive after school programs for undeserved children in Washington, D.C. The organization focuses on academic enrichment, personal development, and essential life skills to empower young individuals and support their growth. Through engaging and supportive programs, Fishing School DC strives to create a nurturing environment that fosters learning, confidence, and success, helping children reach their full potential and contribute positively to their communities.

Problem Statement

Website

The Fishing school website does not have active traffic, which doesn't result in organic donation.

Strategy and Identiy

The Fishing school lacks funding and a guiding strategy to continue operations for the outreach activities.

Main web pages

The Fishing School is a non-profit organization with key web pages that drive donations, programs, and collaboration partnerships.

Home Page

Program

Admission Form

Donation Page

Challenges

The current website does not have Google Analytics implemented in the code which lead to conducting a Usability Analysis to discover obstacle and challenges.

Navigation and Accessibility

The website suffers from inconsistent header names, broken links, and non-intuitive menu interactions, especially affecting mobile users, leading to confusion and frustration.

Search Functionality

The search field leads users to irrelevant pages with lengthy, unorganized text, instead of providing relevant, concise results.

Lack of WCAG Compliance

The website is not WCAG-certified, which means it does not meet accessibility standards for users with disabilities, creating barriers for inclusive access.

Call-to-Action (CTA) Issues

Missing or poorly implemented CTAs, especially in job openings, donation sections, and volunteer applications, confuse users.

Form Design

The enrollment form is overly long and complex, requiring excessive time to complete and leading to potential user drop-offs.

Content Presentation

Excessive text, outdated visuals, and a poor content hierarchy make the website difficult to navigate and less engaging for users.

Redundancy and Irrelevant Content

Repetitive information and irrelevant content dilute key messages and decrease the effectiveness of communication on the site.

Mobile Responsiveness

The website does not follow a mobile-first design approach, with numerous issues such as broken buttons and menus that hinder usability on mobile devices.

Outdated and Misleading Information

Several sections, such as the volunteer page, contain outdated content and broken links, damaging the site’s credibility.

Current Information Architecture

The current website information architecture is inefficient in terms of accessibility to key information such as Program Details, Mission Statement, and Impact that the above-mentioned archetypes would search for.

The Fishing School Information Architechure.jpg

Designed and Prototyped by UX Team

Current User Journey

Pain Points

The vision/Mission wasn’t properly visualized, making it difficult to connect.
Outcomes are listed instead of impact, making the content look dull.
The program page has a paragraph description with no key details.
Long calls for enquiring about important yet simple details.
No proof of impact or effectiveness is provided on the programs page.
Links redirecting outside the website from the programs page.
No contact details specified on the programs page.

Opportunity

Add timetable for the program.

Add a link to download the handbook.
Add a mode of online communication.

Reduced cognitive load by breaking the form down into multiple sections.
Scale application/enrollment forms for phones.

Prioritize important questions for onboarding.
Send second set of optional questionnaire.

Pain Points

The vision/Mission wasn’t properly visualized, making it difficult to connect.
Outcomes are listed instead of impact, making the content look dull.
Wordy descriptions and mixed doation categories.
Organizational donation doesn’t work.
Doesn’t ask about the type of donation. Option to choose type of donation such as Organization and Individual donation.
Bugs in website.

Opportunity

Visualize the vision/mission on the main page and optimize the viewing flow to clarify the website information architecture.

Setting impact visualization area as a responsive design to clarify the donation impact.

The page could be simplified by placing both "Volunteer" and "Donation" options on the homepage for guidance.

Rearranging the layout of donation information and making cluster cards according to donation programs or donor types for better understanding.

Actions

Archetypes

These archetypes would interact with the website to join the Fishing school community, donate to their cause, and promote their experience.

Archetypes provided by the strategy and campaigning team for interpretation of design.

Care Giver

Active in local organizations on community development

Mission Statement
History
Board of Directors
Outreach Activities
Programs

Hero-Creator

Found afterschool program life changing for his children.

Outreach Activities
Programs
Donation

Hero-Magician

Joined community after-school program and supports STEM.

Outreach Activities
Volunteer
Programs
Donation

Ruler-Sage

Inspired by his parent's dedication to community.

Partnership
Volunteer
Programs
Donation

Avatar Vector Source:

https://www.freepik.com/free-vector/confident-people-collection-design_6543322.htm#fromView=keyword&page=1&position=4&uuid=703ff571-eb14-4a4b-94c7-0248a46e9969&query=Svg+People

New Information Architecture

The information architecture recued reduntant informationa and streamline user journeys. The new navigation derived from the information architecture reduces clicks.

Mid-Fidelity Wireframing

The mid-fidelity wireframes were built rapidly to iterate solutions to the challenges and test them. It also served as proof of concept for the client(The Fishing School).

Designed and Prototyped by UX Team

Mid-Fidelity Prototype

The mid-fidelity prototype communicated solutions proposed of the high-fidelity website's structure. The following changes were impleted.

Navigation

The navigation reduces the additional clicks for searching for key information such as About Us, Programs, and Get Involved. The changed navigation communicated categories of information accruately.

Content

The re-iterated content(Headers, CTAs, etc.) to provide appropriate action items.

Channels of Contact

The wireframes presented key contact touch points that the user can utilize for additional information queries.

User Flow

Low fidelity user flow was used alongside the prototype to present the new navigation to The Fishing School team.

View Mid Fideity Prototype

Improvement Checklist

These are the key improvements that address the pain points discovered in the Usability Analysis.

Color Palette

Function

Navigation

Content

Color Palette

The color palette is derived from the Brand Manual developed by the research team to Re-launch The Fishing School as an non profit organization.

Saffron

Ruddy Blue

Indigo Dye

Bittersweet

Lenin

Credit: Strategy and Branding Team

Color & Shades

Theme creation requires a combination of colors to communicate the brand's identity and verify WCAG 2.1 complaince for the website.

Style Iterations

The color combinations pass the WCAG 2.1 test online tester. Communicating with clients helps narrow down the desirable styles on three phases on FIGMA.