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)
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.
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.
Actions
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
Senior Manager at a Fortune 500 company
Active in local organizations on community development
Mission Statement
History
Board of Directors
Outreach Activities
Programs
Hero-Creator
Tech entrepreneur and Investor
Found afterschool program life changing for his children.
Outreach Activities
Programs
Donation
Hero-Magician
Attorney
Joined community after-school program and supports STEM.
Outreach Activities
Volunteer
Programs
Donation
Ruler-Sage
Business Leader
Inspired by his parent's dedication to community.
Partnership
Volunteer
Programs
Donation
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.
Designed and Prototyped by UX Team
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.
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
Redesigned Website
WCAG 2.1 AA Compliant
Visualization
New, consistent visuals and images improve user experience by enhancing information consumption and uplifting the existing content.
Content Simplification
The use of icons and improves readability of key information such as programs details.
New Navigation
The new header and foot adds robust and intuitive navigation to website for ideal archetypes.
User Flow
Donation process was streamlined with clear Call-to-Action buttons to reduce user drop outs(Churn Rate).
Designed by Hailin Chen