Website Redesign &
Deep Dive Demo

Discovery & Strategy: In-depth stakeholder interviews, competitive analysis, user research, and technical audit to understand organization goals and constraints.

Design System Development: Create reusable component library aligned with brand, accessibility standards, and business objectives. Prototype interactions and review with stakeholders.

WordPress Architecture: Modular plugin approach, custom post types for content structure, role-based access controls, and performance optimization from the ground up.

Build & Integration: Hand-coded components, third-party integrations with proper error handling, comprehensive testing on real devices and browsers.

Launch & Optimization: Performance audits, SEO implementation, analytics setup, and post-launch monitoring with optimization recommendations.

Training & Handoff: Detailed documentation, staff training on CMS workflows, and clear escalation paths for ongoing support.

Compliance Understanding: Deep experience working with regulated financial institutions. Understanding of FCRA, GLBA, FHA, ADA/WCAG requirements, and regulatory communication standards.

Sensitive Data Handling: PCI-DSS awareness for payment integrations, secure form handling, encryption protocols, and audit trail requirements.

Disclosure Management: Building systems to manage required legal disclosures, APR/rate disclaimers, product comparisons, and regulatory notices without creating friction in user experience.

Audit & Governance: Creating documented processes for content approval, change management, and access controls that satisfy internal audit requirements and regulatory expectations.

Trust & Brand: Understanding how financial services institutions build and maintain member trust through transparent communication, security indicators, and professional presentation.

43%+ of all websites run on WordPress, including major brands like TechCrunch, Sony Music, Mercedes Benz, and countless financial services institutions.

Millions of active installations across all verticals—from small blogs to enterprise corporations. This scale means:

• Constant real-world testing and security hardening
• Massive community solving problems and sharing solutions
• Abundant plugins, themes, and frameworks battle-tested by millions
• Active core development with quarterly releases and security patches

Enterprise adoption is growing. WordPress.com VIP runs WordPress for Fortune 500 companies, media outlets, and high-traffic sites. The platform has matured far beyond "blogging software."

Performance & Security: Modern WordPress with proper hosting, caching, and optimization can outperform proprietary platforms. Security is continuously improved and audited.

PSCU Owns Everything: The WordPress core, all code, all customizations, all data—this is PSCU's intellectual property. Not rented, not licensed, not dependent on any vendor.

Can Transition Anytime: If Clarity were ever unable to support the site or if needs changed, PSCU can hire another agency, bring development in-house, or switch to a different provider without losing the website or data.

Massive Community: Tens of thousands of WordPress developers worldwide. Security patches are community-reviewed and transparent. Vulnerabilities are fixed quickly.

Innovation at No Cost: New WordPress core features, plugin innovations, and best practices benefit PSCU without licensing fees or platform upgrades.

Avoid Vendor Lock-In: Many proprietary platforms create dependencies that make switching vendors expensive or impossible. WordPress eliminates this risk entirely.

The Situation: CoServe Credit Union was running on proprietary DNN (DotNetNuke) platform. DNN is an older .NET-based CMS with declining community support, limited modern features, and expensive hosting/development costs.

Why They Switched: CoServe wanted modern design, mobile responsiveness, marketing self-service, and integration capabilities that DNN couldn't provide without significant custom development expense.

The WordPress Move: Clarity migrated CoServe to WordPress with a modern design system, Beaver Builder for content management, Advanced Custom Fields for structured data, and integrated third-party services.

The Result: CoServe is thrilled. They now have:

• Full control over content updates without vendor tickets
• Marketing team can create landing pages and campaigns independently
• Modern, fast website that converts members
• Significantly lower platform and development costs
• Flexibility to add features and integrations as needed

Lesson for PSCU: Other credit unions have successfully made this transition. WordPress is proven for financial services and member-focused institutions.

Craig's Approach: While WordPress has 58,000+ plugins available, Clarity is extremely selective. We only recommend and implement plugins that meet strict criteria:

Quality Standards:

• Lightweight: No plugin bloat that impacts performance or creates technical debt
• Accessible: Follows WCAG standards for keyboard navigation, screen readers, and semantic HTML
• Well-Supported: Active maintenance, responsive support team, regular security updates
• No Vendor Lock-In: Plugin data is stored in standard WordPress formats (post types, custom fields, taxonomies)—not proprietary databases that create switching costs
• Battle-Tested: Hundreds of thousands of active installations, community feedback, and proven reliability

Custom Code When Needed: For functionality that doesn't meet these criteria, Clarity writes clean, documented custom code that integrates seamlessly with WordPress.

Future-Proofing: This selective approach ensures the PSCU website remains fast, secure, and flexible for years to come without being hamstrung by poor plugin choices.

Clarity can demonstrate Beaver Builder in action on live client websites. You'll see how editors create pages, how guardrails keep design consistent, and how quickly content creators can produce professional marketing pages without developers.

This hands-on experience is invaluable for PSCU staff to envision their own marketing independence.

Design Once, Use Everywhere: Designers build each component to PSCU brand standards (fonts, colors, spacing, animations). Editors don't design—they fill in content.

Impossible to Break: Components can't be styled incorrectly because styling is built into the component. An editor can't accidentally use a non-brand color or wrong font size.

Global Updates Cascade: Change the button color in the component definition, and every CTA button on the site updates automatically. No hunting through hundreds of pages.

A/B Testing & Iteration: Update a component's design once, see the impact across the whole site. Easy to test variations and measure effectiveness.

Start by Reusing: Before creating a new component, check if an existing component can be adapted. Why create "Related Products" when "Related Content" exists and just needs a different taxonomy?

New Component Triggers: A truly unique design need emerges, or performance/accessibility requires a different approach, or the same pattern will be used on 3+ pages.

Process: Designer creates component, developer codes it with Beaver Builder compatibility, tested for accessibility and responsiveness, documented, and added to the library. Then editors can use it.

Library Growth: The component library will grow over time, but thoughtfully. Start with 9 core components, add 2-3 per year as needs emerge. This keeps the system manageable.

CSS Class Lockdown: Developers create CSS classes for every allowed font size, weight, and color combination. Editors can only apply these predefined classes.

Example: `.text-body-regular`, `.text-heading-large`, `.text-accent-small` for fonts. `.btn-primary`, `.btn-secondary` for buttons. `.text-navy`, `.text-orange` for text colors.

Beaver Builder Restrictions: Page builder is configured to only show allowed colors and font options. Dropdown menus show 5 colors (brand palette), not "any color you want."

Impossible to Break: An editor can't manually enter a hex color code or choose an unlicensed font. The system prevents non-brand choices at the source.

Change Once, Update Everywhere: If PSCU's brand colors evolve, developers update the CSS color definitions. Every page using `.btn-primary` updates automatically.

Zero Manual Work: No hunting through 200+ pages to change button colors. No risk of inconsistency (some buttons old color, some new). One change cascades globally.

Future Rebrand Support: When PSCU rebrands in 5 years, color changes take hours instead of weeks of manual page updates.

Automated Checks: Before a page can be published, automated tools verify that only brand-approved colors and fonts are used. Flag any deviations.

Human Review: Brand-compliance team reviews high-traffic pages (homepage, product pages, campaign landings) before publication for visual consistency and tone alignment.

Edge Case Handling: Occasionally a new design pattern emerges that doesn't fit existing classes. Flag it, review with designer, add new component if needed.

Built for Evolution: The design system is designed to evolve. New brand colors? Update CSS variables. New font? Update font stacks. New logo? Replace the SVG.

No Code Changes Required: Because everything is driven by CSS and content fields (not hard-coded), most rebrand changes don't touch page structure.

Scalability: As the PSCU website grows from 100 pages to 1,000+, the design system ensures all pages reflect current brand standards without fragmentation.

Template Selection: Marketing manager goes to WordPress, clicks "New Page," and selects "Campaign Landing Page" template. This is a pre-built Beaver Builder layout.

Content Entry: Marketing fills in the template fields: headline, subheading, hero image, benefits list, testimonials, form fields, CTA button text, and destination URL.

Layout Customization: Beaver Builder lets marketing rearrange components (add more testimonials, move form earlier, add calculators) without changing design. It stays on-brand.

Review & Publish: Content manager reviews through PublishPress. Once approved, marketing publishes immediately. No waiting for developers.

This is Self-Service: Marketing can launch campaigns in hours, not weeks. Respond to market opportunities quickly. Test messaging variations.

Responsive Srcsets: Serve different image sizes for different screen sizes. Desktop gets a 1200px wide image. Mobile gets 400px. Saves bandwidth and improves load time on mobile networks.

WebP Format: Modern image format that's 25-35% smaller than JPEG without quality loss. Served to modern browsers. JPEG fallback for older devices.

Lazy Loading: Images below the fold don't load until user scrolls. Improves initial page load speed. Especially important on mobile with variable connection speeds.

SVG for Icons: Icons are rendered as SVG (scalable vector), not raster images. Tiny file sizes, infinitely scalable, can be animated or recolored with CSS.

Hero Images Smart Cropping: Hero image crops differently on mobile vs desktop. Desktop shows wide landscape, mobile shows taller portrait crop focused on key content.

Background Video Fallback: Desktop might have an auto-playing background video (hero section). Mobile replaces it with a high-quality still image. Video files are large; mobile data is slow.

Embedded Video Players: YouTube/Vimeo embeds are responsive and mobile-optimized. Players are touch-friendly. Captions provided (accessibility + sound-off viewing on public transit).

Video Autoplay Policy: Browsers now require muted autoplay video. PSCU videos are muted by default (or don't autoplay on mobile). Users can manually play with sound if interested.

Fallback Content: Video unavailable or unsupported? Show a poster image and text description. No user sees a broken video player.

Real Device Testing: Chrome DevTools emulation is helpful, but not sufficient. PSCU QA tests on real iPhone, real Android devices, not just browser emulation.

iOS & Android Variety: Test on recent iPhones (12, 13, 14, 15) and Android phones (Samsung, Google Pixel). Include older models to ensure backward compatibility.

Network Conditions: Test on 4G/LTE and 5G networks. Test on slow WiFi (simulates coffee shop conditions). Test on high-speed fiber. Page should be usable across all speeds.

Browser Coverage: Chrome, Safari (iOS), Firefox, Samsung Browser. Each browser renders slightly differently and has unique quirks.

Form Submission Testing: Test form entry on mobile keyboards. Test that form validation works. Test that success pages display correctly. Mobile forms are a common source of bugs.

Continuous Monitoring: Post-launch, monitor real-user mobile metrics via analytics. Identify and fix issues affecting actual users.

Current Situation: Segmint is installed on PSCU's current website for dynamic advertising and personalization.

Integration Approach: Segmint loads via Google Tag Manager (GTM) script tag. Async loading means it doesn't block page load. Segmint syncs with user behavior and serves targeted ads/content.

Complexity: Low. GTM handles the integration. Clarity configures GTM container to load Segmint with appropriate parameters. PSCU maintains Segmint account and dashboard.

Data Continuity: PSCU can maintain historical Segmint data and insights. Segmint tracking continues uninterrupted across platform migration.

Current Situation: Lumin is used for document management and digital signature workflows in loan applications and account openings.

Integration Approach: Two options: (1) Link to Lumin-hosted documents from WordPress pages, or (2) Use Lumin API to embed document viewers within WordPress.

Complexity: Low-Medium. Linking is simple (copy/paste). API integration requires more development but enables embedded workflows.

Rate Sheets & FAQs: PSCU rate sheets, application forms, and disclosures can be hosted as PDFs on WordPress with proper accessibility (OCR, alt text, bookmarks).

Current Situation: Origence is PSCU's loan origination platform. Members click "Apply for Personal Loan" and are taken to Origence application.

Integration Approach: External link from WordPress to Origence with UTM parameters for tracking. Link is tracked in GA4 to measure click volume and downstream conversions.

Complexity: Low. The website provides the "door" to Origence; Origence handles the application experience.

Handoff Optimization: Use Origence deep linking to pre-fill user info if available (email, phone) to reduce re-entry friction.

Analytics: Track "Origence clicks" and if possible, link GA4 user IDs to Origence conversions to measure end-to-end application funnel.

Current Situation: OpenClose handles mortgage applications and refinancing.

Integration Approach: Similar to Origence—external link with UTM tracking and deep linking to pre-fill user data.

Complexity: Low. PSCU provides a clear mortgage application entry point. OpenClose handles the application workflow.

Landing Pages: Dedicated mortgage product pages on WordPress (rates, features, testimonials) with prominent "Apply Now" button linking to OpenClose.

Current Situation: Wave2 provides branch and ATM locator functionality with maps, hours, and service information.

Integration Approach: Embedded iframe or JavaScript widget on WordPress "Find a Branch" page. Maps PSCU locations, shows hours, services, and phone numbers. Mobile-responsive and geolocation-aware.

Complexity: Low-Medium. Wave2 provides embed code; Clarity integrates into WordPress page template. Some styling adjustments may be needed for brand consistency.

Data Syncing: Wave2 maintains branch/ATM data. WordPress doesn't duplicate this data—it references the live Wave2 widget, so updates are automatic.

Current Situation: DialPad or LivePerson provides live chat and agent support on the website.

Integration Approach: JavaScript widget embedded globally (header or footer). Widget loads asynchronously so doesn't block page performance. Chat icon appears in sticky position.

Complexity: Low. Vendor provides embed code; Clarity adds to WordPress theme. Configuration (hours, offline message, routing rules) managed in vendor dashboard.

Mobile Optimization: Chat widget is mobile-responsive. On small screens, takes minimal space. Easy to open/close. Notifications alert member to new messages.

Current Situation: Glide or Banno provides account opening, mobile banking, and account management.

Integration Approach: External link from WordPress to Glide/Banno application or login page. Uses deep linking to preserve user context and pre-fill data when possible.

Complexity: Medium. Account opening workflows involve data handoffs, security (HTTPS, CSRF tokens), and potentially OAuth authentication. Clarity works with Glide/Banno team to implement secure, user-friendly integration.

Mobile App Deep Linking: If user has Glide/Banno mobile app installed, WordPress can detect it and deep link to app instead of web version. Improves user experience for existing members.

Analytics: GA4 tracks "account opening starts" and if possible, links to application completion in Glide backend. Measures full-funnel conversion.

Current Situation: PSCU wants a rate comparison tool on the website (savings vs checking, fixed vs variable loan rates, PSCU vs competitor rates).

Integration Approach: Vendor not yet determined. Likely a white-label calculator tool embedded as iframe or widget. Could be custom-built if PSCU wants full control.

Complexity: Medium. Rate tool must pull live rate data from PSCU systems and display in compelling, easy-to-understand format. May require API integration with Origence/OpenClose to show current rates.

Data Currency: Rates update frequently. Tool must pull live data, not static HTML. Automated processes ensure rates are always current.

• ⚡
  Async Loading - Loaded after page interactive, no blocking
• 📊
  GTM Container Management - Widget instantiation via Google Tag Manager for flexibility
• 🎯
  No Page Lag - Target 0ms blocking time from widget initialization

Vendor TBD, but we can embed any widget or iframe securely. If it's a custom tool, we build as WordPress shortcode. If third-party, we load asynchronously with CSP allowlist. Full analytics integration to track rate comparison usage and selections.

All campaigns documented in shared UTM tracking sheet for consistency and auditability.

Challenge: We can't directly track conversions happening on Origence, Glide, or other third-party platforms.
Solutions:

• Request partner data feeds for application/account open events
• Implement return URL parameters to track successful completions
• Use GA4 event export to BI system for enhanced analysis
• Partner APIs may provide webhook callbacks for account opens

GA4 multi-touch attribution models show which channels and campaigns drive conversions. First-click, last-click, and data-driven attribution all visible in Looker dashboards. Helps optimize spend and messaging across channels.

Custom channel grouping rules ensure paid search, organic search, paid social, organic social, email, and direct are consistently bucketed. Partner and referral sources grouped separately for performance analysis.

PSCU's brand palette meets WCAG AA for primary combinations, but we'll audit secondary/accent colors. If a color falls short, we offer two options: (1) use a darker/lighter shade of the same hue for better contrast, or (2) add a border/icon to ensure non-color-dependent communication. All decisions documented in the design system.

• Every form field has a label (not placeholder text alone)
• Required fields marked with aria-required="true"
• Error messages announce with role="alert" so screen readers catch them
• Validation happens on blur, not just submit, giving users time to correct
• All disclosures (APY, fees, terms) are in text form, not image only

All interactive elements (buttons, links, form inputs) are operable via Tab and Enter. Proper semantic HTML (nav, main, article, heading hierarchy) helps screen readers understand page structure. ARIA attributes (aria-label, aria-describedby, aria-current) provide context where semantics alone aren't enough. We test with NVDA (Windows) and VoiceOver (Mac/iOS).

WCAG standards evolve, and so does best practice. We run automated accessibility scans (axe DevTools, WAVE) monthly on critical pages. Annual manual audit with accessibility specialist. New plugin additions are vetted for accessibility. Content editors trained to add alt text to images and captions to videos. Accessibility roadmap shared with PSCU team.

• Map all old URLs to new equivalents
• Implement 301 redirects for all old URLs
• Create XML sitemap for new site structure
• Update internal links throughout content
• Submit new sitemap to Google Search Console
• Check Search Console for crawl errors post-launch
• Monitor rankings for key terms week-by-week post-launch
• Update external links where you control them (partner sites, directories)

Enterprise plan includes priority support, advanced caching (page cache + object cache), bot detection, custom staging, and dedicated infrastructure. Cost is typically $350-1000+ monthly depending on traffic tier. For PSCU's anticipated traffic (medium-to-high for a regional credit union), enterprise tier is appropriate.

If going Azure route: App Service for WordPress application, separate Azure Database for MySQL (or Azure SQL), Azure Blob Storage for media files with CDN, Traffic Manager for DR and load balancing, Key Vault for secrets management. Separate resource groups for prod/staging. Auto-scaling based on CPU/memory thresholds. Clarity manages infrastructure, PSCU manages content.

WordPress is a target because it powers 45%+ of the web and has a large plugin ecosystem. But that also means the security community is massive. We follow these practices: (1) Keep core, plugins, and themes updated, (2) Use HTTPS everywhere, (3) Limit login attempts with security plugins, (4) Hide WordPress version, (5) Disable XML-RPC, (6) Regular security scanning, (7) Strong admin user management. WordPress.com and WP Engine handle much of this automatically.

Craig evaluates every plugin for: (1) Active maintenance (updated within last 6 months), (2) Large user base (100k+ active installs = community vetting), (3) Good security track record (check Plugin Security Handbook), (4) Minimal code footprint (no unnecessary dependencies), (5) Reputable author (known agency or developer), (6) Capability scope (does one thing well). Plugins for core functionality only — cosmetic plugins avoided. All additions documented with rationale.

Segmint, chat widget, GA4, and other third-party scripts are loaded asynchronously via Google Tag Manager. They don't block page load or interaction. We monitor Script timing in PageSpeed Insights and adjust load order if needed. Inline critical fonts to avoid render-blocking font loading.

• 📄
  Page Cache - Full HTML pages cached for 24-48 hours (user-specific pages bypass)
• 📦
  Object Cache - WordPress queries cached in Redis, ~5 min TTL
• 🌐
  Browser Cache - CSS/JS files cached locally, long expiration (1 year)
• 🌍
  CDN Cache - Images/assets cached at CDN edge, purged on updates

Standard event names: page_view, click, form_submit, file_download, video_play, video_complete, outbound_click, search, etc. Parameters: page_title, button_label, form_name, file_name, video_title. All events documented in shared spreadsheet so reporting is consistent and interpretable.

Every campaign tagged with source, medium, campaign, content, term. GA4 multi-touch attribution models show first-click, last-click, and data-driven attribution for each conversion. Channel grouping rules bucket traffic consistently. Attribution dashboard shows which touchpoints lead to account opens and loan applications.

Automated checks for event volume anomalies, conversion rate drops, 404 spike detection, and traffic drops. Alerts fire if event volume drops >20% YoY or conversions miss forecast. Daily data quality report emailed to analytics team. Helps catch tracking issues and broken functionality early.

If PSCU members in California, CCPA applies: right to access personal data, right to delete, right to opt-out of sale. We'll implement: (1) Privacy policy disclosure of data collection, (2) Data deletion workflow in WordPress admin, (3) Do-Not-Track handling, (4) Third-party vendor audit. Similar considerations for GDPR if serving EU members. Consent management platform (OneTrust, Cookiebot) can handle complexity at scale.

Each cookie documented with vendor, purpose, duration, and data handling notes.

Every frequent task gets a playbook: adding a page, editing product listings, updating rates, publishing news articles, configuring forms, adding images with alt text, managing redirects, updating menus, creating a landing page. Include screenshots and common mistakes to avoid. Update playbooks after each major feature change.

Two weeks before launch, team edits and publishes content in staging environment. Mistakes are harmless and learning is direct. Final week includes a mock launch scenario: update product pages, publish a news article, add a landing page, test form submissions. By launch day, team is confident and ready.

All training materials, playbooks, and documentation are in plain language and portable. WordPress talent is available worldwide at all skill levels. We don't hide how things work or use proprietary frameworks. PSCU team can hire a freelancer or bring on a full-time developer and they'll understand the system immediately.

• 👥
  Stakeholder Interviews - Understand PSCU goals, member journeys, success metrics
• 📋
  Content Audit - Catalog existing pages, identify what migrates vs. what's new
• 🔌
  Integration Inventory - Document all APIs, widgets, external links on current site
• 📊
  Analytics Baseline - Current traffic, conversion rates, top performing pages
• 🗂️
  IA Planning - Information architecture for new site, URL structure, navigation
• 🎨
  Brand System Review - Colors, fonts, imagery, tone, brand guidelines analysis

Deliverables: Discovery summary, content audit spreadsheet, integration catalog, IA wireframe, brand system documentation.

• 📐
  Key Page Wireframes - Homepage, product pages, rate/apply pages, support pages
• 🎨
  Design Concepts - Visual direction, component exploration, interaction patterns
• 📱
  Mobile Mockups - Responsive design for tablet and mobile devices
• ♿
  Accessibility Review - Color contrast, keyboard navigation, screen reader testing
• 🧩
  Component Library - Buttons, cards, forms, navigation, modals, defined and reusable
• 👁️
  Client Review Cycles - Feedback, iteration, design refinement (2-3 rounds typical)

Deliverables: Design system, high-fidelity mockups, component library, accessibility audit report.

• 🎨
  Custom WP Theme - Tailored theme matching design system exactly
• 🔨
  Beaver Builder Config - Page templates, global elements, custom modules
• 🧩
  Component Buildout - All design system components coded and tested
• 🔌
  Integrations - APIs, widgets, external links wired and tested
• 📊
  Analytics Setup - GTM container, GA4 events, tracking implementation
• 🗜️
  Staging Environment - Parallel copy of production for testing before go-live

Deliverables: Complete WordPress site in staging, all integrations functional, analytics tracking live.

• 📝
  Content Migration - Copy from old site, adapt for new design, optimize for SEO
• 🧪
  Cross-Device Testing - Chrome, Safari, Firefox on desktop, mobile, tablet
• ♿
  Accessibility Testing - axe scan, WAVE validation, screen reader testing, keyboard nav
• ⚡
  Performance Optimization - Image optimization, caching config, Core Web Vitals tuning
• ✅
  UAT - PSCU team tests all functionality, makes final tweaks, sign-off

Deliverables: Production-ready site with full content, all QA issues resolved, PSCU UAT sign-off.

• 📚
  Role-Based Training - Live sessions for admins, editors, marketing, brand reviewers
• 📖
  Documentation - Playbooks, FAQ, video tutorials, support resources
• 🎯
  Go-Live Readiness - Final checklist, DNS cutover plan, rollback procedure
• 🚀
  Launch Day - DNS cutover, 301 redirects activate, monitoring begin
• 📊
  Post-Launch Monitoring - First week intensive monitoring, bug fixes, performance tuning

Deliverables: Trained team, full documentation, successful launch, post-launch monitoring.

Ongoing monthly audits include: broken link detection, accessibility scan, security update verification, plugin health check, performance benchmarking, WAF rule effectiveness. Issues logged and prioritized for PSCU team to address or for Clarity to handle under support SLA.