DSA Website Redesign — TheSprinters
A redesign pitch for the Deputy Sheriffs' Association of San Diego County — fixing broken search, non-functional login, and cluttered navigation with a modern full-stack portal.
Your Website Deserves an Upgrade
We rebuilt dsasd.org from the ground up. Same mission, same content, same brand — but faster, cleaner, and built for the way deputies actually use the site. Here are the 3 biggest problems we fixed and what the new portal looks like.
1 Search That Members Can Actually Find
On dsasd.org, the search bar is buried in a WordPress sidebar that doesn't even render on most pages. On mobile, it's completely invisible. Members who want to find a form, a contact number, or a benefit detail have to click through 4+ pages and guess which menu it's under.
- Search hidden in a sidebar widget
- Not visible on mobile at all
- No autocomplete or live results
- Members gave up and called the office
- Search in the sticky header — always visible
- Live results after 2 characters, no Enter needed
- Indexes every page: benefits, events, store, FAQ
- Click a result to jump directly to that section
The new sticky header with live search — results appear instantly as members type.
2 A Login System That Actually Works
The current dsasd.org has a "Member Login" link that leads to a broken WordPress form — no backend, no sessions, no member area. Members click it and get a 404 or a blank page. We built real authentication from scratch.
- Login form submitted into a void — 404/500 errors
- No user accounts, no sessions
- No member-only content or personalization
- No way to manage member profiles
- Full signup/login with secure JWT authentication
- Passwords hashed — never stored in plain text
- Auto-fills name, badge, station across all pages
- Admin panel for managing member records
Left: dsasd.org's broken login. Right: our working auth with session persistence and auto-fill.
3 One Clean Homepage Instead of 9+ Menu Items
dsasd.org forces members to navigate through 9+ top-level menu items across multiple page reloads to find basic resources like benefits info, event tickets, or the store. Our redesign puts everything on a single, organized homepage — 3 clear menus, zero reloads, and only ~2 scrolls to the bottom.
- 9+ menu items with confusing sub-dropdowns
- Every click = full page reload
- News section showed only 2 static cards
- Store redirected to an external website
- Not mobile-friendly — menus break on small screens
- 3 organized menus: Services, Community, Career
- Single-page app — smooth scroll, no reloads
- Live news feed, event calendar with RSVP
- In-page store with cart and checkout
- Mobile-first with responsive overlay menu
The Strength Behind the Badge
Benefits, legal defense, events — all in one place.
The polished DSA Portal — every resource organized into 3 menus, ~2 scrolls total.
Everything Else We Built
Beyond the 3 headline fixes, here's every feature and page included in the redesign:
AI Chatbot
- 18+ preset responses for common DSA questions
- Keyword-matching fallback (no API key needed for demo)
- GPT-4o-mini backend for open-ended questions
Gamification Hub
- Net Patrol — canvas game teaching network security
- Robbery Response — 5-scene tactical decision simulator
- Target Range — reaction-time shooting trainer
- Badges, leaderboard, and score tracking
Events Calendar
- Interactive monthly calendar with event dots
- RSVP functionality and filter tabs
- Create Event form for authorized users
DSA Store
- 6 products with category tabs
- Add-to-cart, quantity controls, checkout modal
- Member discount display when logged in
Member Auto-Fill
- Contact form pre-fills name, badge, station
- Personalized greetings on every sub-page
- Rank pathway highlights current rank
Sub-Pages (All ≤ 2 Scrolls)
- News, FAQ, Contact, Store, Events
- Rank Pathway, About/Info, Gamification
- Each condensed with toggles and compact layouts
Backend API
- Flask + SQLAlchemy with 6 database tables
- 7 REST endpoints (auth, CRUD, chat)
- JWT cookies with cross-subdomain support
Deployment
- Jekyll frontend on GitHub Pages
- Flask backend on AWS EC2 + Docker
- NGINX reverse proxy with Let's Encrypt SSL
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.
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.
What We Built
Three focused upgrades that address the biggest friction points on dsasd.org today.
Interactive Member Dashboard
One Dashboard. Every Resource. Zero Clicks Wasted.
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
Smart FAQ Hub
Find Answers Instantly — Or Chat With Us
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
Mega Menu Navigation
Every Page Visible at a Glance
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
Why Go With Our Redesign
About the Organization
The Deputy Sheriffs' Association of San Diego County (DSA) is the labor union for the San Diego Sheriff's Department — 70 years of service and 4,229+ members strong. Our redesign keeps every existing resource but reorganizes the experience around how members actually use it.