See It Live

Our Redesign Is Deployed and Working

Click either link below to interact with the proposed site. The frontend is fully hosted, connected to a working backend API.

Proposed Website

dsasd.opencodingsociety.com

Live member-facing frontend ↗

Backend API

sheriff.opencodingsociety.com

Powers dashboard, FAQ, and search ↗

Why a Redesign — and Why Now

Your members today navigate 9+ menu items and multiple pages to find benefits, forms, meeting minutes, and event tickets. The Latest News section shows only 2 static cards. The FAQ has no search. On mobile, the dropdowns are hard to use. We rebuilt the site around what members actually do — find resources, stay informed, and get answers — so the DSA's digital presence matches the prestige of the organization.

1-click access to benefits, forms, events, and the store — down from 3–4 pages of hunting

Instant answers with smart FAQ search, so members self-serve before calling

Mobile-first experience for the 50%+ of members browsing from their phones

Modern, professional look reflecting 70 years of service and 4,229+ members

Live news feed and calendar so announcements, meetings, and events never get buried

What We Built

Three focused upgrades that address the biggest friction points on dsasd.org today.

View on Live Site

Main Feature

Interactive Member Dashboard

One Dashboard. Every Resource. Zero Clicks Wasted.

Quick-access tiles for benefits, forms, events, and store

Live filterable news feed with newsletters, minutes, and announcements

Upcoming events calendar with RSVP functionality

Searchable document center with categorized downloads

Personalized notifications for new releases and updates

Mobile-responsive design for on-the-go access

WordPress REST API React Dashboard UI Authentication Integration Calendar Widget Fuzzy Search (Fuse.js) Push Notifications

What Changes

Currently, DSA members navigate through 9+ menu items and multiple pages to find benefits, forms, meeting minutes, and event tickets. The Latest News section only shows 2 static cards. This dashboard consolidates everything into a single personalized hub — quick-access tiles, filterable news, events calendar, and document center — reducing the average user journey from 4 pages to 1 click.

Member Impact

Members find resources in 1 click vs. navigating 3-4 pages

Increased engagement with news, events, and benefits

Reduced support inquiries through self-service design

Modern professional look reflecting DSA's prestige

Mobile-first ensures 50%+ of users on phones have great UX

Try It Live ↗

View on Live Site

Small Feature

Smart FAQ Hub

Find Answers Instantly — Or Chat With Us

Instant fuzzy search filtering questions as user types

Categorized sections: Membership, Benefits, Store, Events, Legal

Rich expandable answers with links and embedded forms

Live chat fallback button for unanswered questions

Category icons for visual browsing

Fuse.js Fuzzy Search CSS Animations Live Chat Widget Content Management

What Changes

The current FAQ has 5 static accordion questions with no search, no categories, and no way to ask new questions. The Smart FAQ Hub adds instant fuzzy search via Fuse.js, organized categories with icons, rich formatting in answers, and a 'Didn't find your answer?' live chat button that routes to support email or chatbot.

Member Impact

Instant answers via search vs. scanning all questions

Categorized browsing for different member needs

Live chat ensures no question goes unanswered

Richer formatting with embedded links and forms

Try It Live ↗

View on Live Site

Small Feature

Mega Menu Navigation

Every Page Visible at a Glance

Grouped sub-navigation panels with descriptions and icons

Prominent search bar with autocomplete suggestions

Mobile-first hamburger menu with full-screen slide-out

Sticky header that compresses on scroll

WCAG 2.1 AA keyboard navigation compliance

CSS Grid Mega Menu Autocomplete Search Mobile Slide-Out Panel Sticky Header JS WCAG 2.1 AA

What Changes

The current nav bar has 9+ top-level items with basic hover dropdowns that are hard to use on mobile. The mega menu shows all sub-pages at a glance with grouped panels, icons, and descriptions. A prominent search with autocomplete replaces the tiny icon. Mobile users get a full-screen slide-out with large touch targets.

Member Impact

All sub-pages visible without hunting through dropdowns

Mobile users navigate the full site with ease

Search autocomplete finds exactly what members need

Sticky header keeps navigation always accessible

Meets modern accessibility standards

Try It Live ↗

Why Go With Our Redesign

It's already built. Not a mockup — a live, hosted site with a working backend you can click through right now.

Zero risk to evaluate. Deployed on our infrastructure; no commitment, no takedown pressure, no cost to try.

Built on industry standards. WordPress REST API, React, and WCAG 2.1 AA accessibility — maintainable by any modern web team.

Focused on your members. Every feature maps to a real pain point on the current site, not cosmetic changes.

Designed to grow with you. Dashboard tiles, FAQ categories, and news feeds can all be expanded without a re-launch.

About the Current Webpage

The Deputy Sheriffs' Association of San Diego County (DSA) is the labor union representing the officers of the San Diego Sheriff's Department — 70 years of service and over 4,229 members strong. Its website at dsasd.org is the primary digital hub for member resources, news, the DSA store, and community engagement.

Today the site surfaces information through a long top navigation, a static news section, and a short accordion FAQ. Members report difficulty locating benefits, forms, and meeting minutes — especially on mobile. Our redesign keeps every existing resource but reorganizes the experience around how members actually use it.

📍 13881 Danielson Street, Poway, CA 92064 📞 (858) 486-9009 📧 info@dsasd.org

View Current Website ↗