TGR — Help Center & Payment Center Redesign

TGR Help Center homepage — category grid with icons for payments, taxes, fines, certificates and more Click to view full image

Project Overview

Following the initial usability assessment (2020-2021), TGR engaged our team for a deeper engagement: completely redesigning two critical citizen-facing platforms — the Help Center (Centro de Ayuda) and the Payment Center (Centro de Pagos). This project ran as two parallel workstreams across three milestones each, from research through implementation.

The Challenge

TGR's existing platforms presented distinct but interconnected problems:

  1. Help Center Chaos: Hundreds of support articles with no coherent organization — users couldn't find answers and defaulted to phone calls
  2. Payment Opacity: The payment center lacked transparency in transaction status, making it difficult for users to track their obligations
  3. Inconsistent Content: No content governance model, leading to outdated, duplicated, and contradictory information
  4. No Self-Service Path: Users were forced to contact support for tasks that should be self-service

Workstream 1: Help Center Redesign

Phase 1: Research & Discovery

We began with a comprehensive current state analysis that included:

  • Stakeholder Interviews: With TGR team members to understand operational challenges and support patterns
  • Current State Analysis: Detailed review of the existing help center structure, content inventory, and user flows
  • User Journey Mapping: Visualizing the complete support-seeking experience from initial question to resolution
  • Google Analytics Review: Identifying most-visited articles, search patterns, and drop-off points
  • Content Inventory: Cataloging all existing help articles and assessing their accuracy, relevance, and findability

Card Sorting: 3 Rounds of Iteration

A critical part of the information architecture redesign involved three progressively refined card sorting sessions:

  • Round 1 (V.1): Open card sort with external users to understand their mental models for help content
  • Round 2 (V.2): Refined categories tested with a second group of users
  • Round 3 (TGR Staff): Validation session with internal TGR staff, producing similarity matrices that confirmed the new structure worked for both audiences

Phase 2: Content Strategy & UX Writing

  • Menu Reorganization: Complete restructuring of the help center navigation based on card sorting results
  • Article Selection & Prioritization: Curated 50 key articles from the existing content base
  • UX Writing Guide: Created a comprehensive writing guide establishing tone, structure, and formatting standards for all help content
  • Governance Model: Defined roles, processes, and quality standards for ongoing content management
  • User Testing: Validated the new structure and content through usability testing sessions

Phase 3: Implementation

The final milestone delivered production-ready assets:

  • HTML/CSS/JS Front-End: Fully coded help center template ready for integration
  • Zendesk Theme: Custom theme implementing the new design within TGR's Zendesk platform
  • Accordion-based Content System: Interactive component for organizing FAQ-style content, with an auxiliary tool for content authors to create new accordions

Workstream 2: Payment Center Redesign

Phase 1: Research & Stakeholder Interviews

The Payment Center research phase focused on understanding both internal operations and user needs:

  • 6 Stakeholder Interviews: In-depth sessions with TGR payment operations team members to map internal processes and pain points
  • Benchmark Analysis: Comprehensive study of leading online payment platforms and government transaction systems
  • Content Inventory: Detailed audit of existing payment center content, flows, and user touchpoints

Phase 2: Design & User Testing

Based on research findings, we designed and validated an improved payment experience:

  • Redesigned Payment Flows: Simplified transaction processes with clear status indicators
  • User Testing: Usability testing sessions with 5 users validating the proposed improvements
  • Iterative Refinement: Design adjustments based on testing feedback

Phase 3: Roadmap & Delivery

The final phase delivered a comprehensive implementation plan:

  • Final Report: Consolidated findings, designs, and specifications
  • Launch Plan & Roadmap: Phased feature rollout strategy with prioritized functionality

Key Deliverables

  1. User Journey Map documenting the complete support-seeking experience
  2. Information Architecture validated through 3 rounds of card sorting
  3. UX Writing Guide establishing content standards for TGR
  4. Content Governance Model for sustainable content management
  5. Production-Ready Front-End (HTML/CSS/JS + Zendesk theme)
  6. Payment Center Benchmark with competitive analysis
  7. Implementation Roadmap for phased rollout

Project Artifacts

A sanitized sample of the front-end templates delivered for the Zendesk Help Center:

  • Front-end template sample (GitHub) — HTML/CSS/JS prototype for the Help Center article layout, homepage, and navigation components

Note: This repository contains a sanitized front-end prototype/template set with no sensitive data.

Impact

The redesigned Help Center transformed TGR's support experience from an unstructured repository into a user-tested, well-organized knowledge base. The UX Writing Guide and Content Governance Model ensured the improvements would be sustainable over time. These changes, combined with the Payment Center roadmap, laid the groundwork for the subsequent Municipal Portal redesign in 2023-2024.

Tools Used

  • Card Sorting 1
  • Zendesk 1
  • UX Writing 1
  • User Testing 1
  • HTML/CSS/JS 1