Ad Hoc Website Redesign

As Senior Designer in the Communications team at Ad Hoc, I led a comprehensive overhaul of the company’s website infrastructure, focusing on both technical performance and user experience improvements.

The Challenge

The existing Jekyll-based website faced several critical issues:

Extremely slow build times (27 minutes) hampering rapid iterations
Legacy codebase that was difficult to maintain
Limited flexibility for content creators
Performance bottlenecks affecting user experience

The Solution

We undertook a complete platform migration, moving from Jekyll to Hugo, while implementing modern development practices and performance optimizations.

Technical Implementation

The new architecture was built with several key improvements:

Framework Migration: Transitioned from Jekyll to Hugo for improved build performance
Modern Styling: Implemented Tailwind CSS for maintainable, utility-first styling
Interactive Elements: Added Alpine.js for lightweight client-side interactions
Build Optimization: Engineered new build processes reducing deploy time by 96%
Content Management: Created an improved content workflow for the communications team

Development Process

The migration was executed in phases to ensure continuous site availability:

Initial Assessment: Analyzed existing codebase and identified optimization opportunities
Architecture Planning: Designed new Hugo-based architecture with improved build processes
Content Migration: Systematically transferred and validated existing content
Performance Optimization: Implemented lazy loading, image optimization, and caching strategies
Testing and Validation: Conducted thorough testing across devices and browsers

Custom Features

Several custom features were developed to enhance the site’s functionality:

Blog Category System: Built a custom filtering system for blog posts using vanilla JavaScript
Progressive Web App: Implemented PWA capabilities for mobile installation
Performance Monitoring: Added automated performance tracking and reporting
Build Pipeline: Aided in creating efficient CI/CD workflows for automated deployments

Additional Technical Implementation Details

Image Processing: Implemented Imgix integration for optimized image delivery and processing
Documentation: Created comprehensive documentation standards and technical guides
Content Migration Tools: Developed custom Python scripts to automate frontmatter transformation and content migration
Accessibility: Implemented automated a11y testing with pa11y-ci
CloudCannon Integration: Set up content management workflows with CloudCannon CMS

Infrastructure Improvements

Environment Management: Established production, staging, and preview environments
Automated Testing: Implemented comprehensive testing including accessibility checks
Content Validation: Created automated content validation processes

Results

The project achieved significant improvements:

Build Time: Reduced from 27 minutes to under 1 minute
Developer Experience: Improved code maintainability and deployment processes
User Experience: Enhanced site performance and mobile accessibility
Content Management: Streamlined content creation and publishing workflow

The new website serves as a modern, performant platform that better represents Ad Hoc’s commitment to technical excellence in civic technology.

Visit the live site