Helmets to Hardhats Canada
A national non-profit helping veterans transition to construction careers needed more than a facelift. We rebuilt their entire digital presence from the ground up — accessible, bilingual, and built to serve.
A Vital Mission Held Back by Its Own Website
Helmets to Hardhats does life-changing work — connecting veterans to stable construction careers. But their website was actively working against them. An outdated design, a confusing splash screen, broken accessibility, and buried content meant veterans who needed help the most couldn't find it.
A Splash Screen Blocking the Door
Before visitors could see anything, they hit a full-page language selector. No content, no context — just a choice between English and French before they even knew what the site was about. On mobile, it was a dead end for many.
Navigation That Worked Against Veterans
Key information about the program, how to apply, and career resources was buried under confusing menus. Veterans looking for help were getting lost — and leaving. The site structure hadn't been rethought since it was first built.
Outdated Code, Slow Performance
The site was built on aging technology that made updates painful and page loads slow. Mobile users — the majority of visitors — were hit hardest, with load times that drove bounce rates through the roof.
Accessibility Was an Afterthought
For an organization serving veterans — including those with disabilities — the site failed basic accessibility standards. Screen readers couldn't parse the layout, keyboard navigation was broken, and contrast ratios were inconsistent.
Same Mission. Completely New Experience.
Rebuilt From Scratch. Every Page.
This wasn't a refresh — it was a complete ground-up rebuild. New information architecture, new visual design, strategic CTAs placed throughout, and accessibility baked in from the first line of code. Every decision was made with veterans in mind.
Navigation Rebuilt for Flow
We rethought the entire site structure around how people actually use it — veterans looking for career paths, employers looking for talent, and union partners looking for program details. Every menu, every page hierarchy, and every call-to-action was redesigned with the best possible user flow in mind. Career resources were organized into 9 clear categories, and the application process was shortened from 7 clicks to 2.
- Site structure redesigned around user intent
- Strategic CTAs placed throughout every page
- Application process reduced from 7 clicks to 2
- Separate pathways for veterans, employers, and partners
Modern, Responsive Redesign
Every page was redesigned from scratch with modern HTML5 and CSS3, built on Bootstrap for a responsive grid that works on any device. The visual design reflects the professionalism of the organization — clean typography, structured layouts, and a cohesive navy and red colour palette that carries through every page.
- Fully responsive Bootstrap grid system
- Modern HTML5 and CSS3 throughout
- Cohesive navy and crimson colour palette
- Mobile-first design approach
Bilingual Done Right
The site was already bilingual — but the old implementation forced users through a splash screen before they could see anything. We moved the language toggle into the navigation where it belongs, eliminated the dead-end entry page, and ensured both English and French versions have clean parallel URL structures and consistent layouts throughout.
- Splash screen eliminated — language toggle in nav
- Clean parallel URL structure for EN/FR
- Consistent layouts across both languages
- No dead-end language selection page
Accessibility & Performance
Accessibility was a priority from the first line of code — not retrofitted after the fact. Screen readers, keyboard navigation, colour contrast, and semantic HTML were considered at every step. Combined with optimized assets and clean code, the site loads 80% faster than its predecessor.
See It All Together
Clean Code. Modern Standards.
Built with proven, accessible technologies — no bloat, no lock-in.
6 Weeks to a Complete Rebuild
Full redesign, bilingual build, accessibility compliance, content migration, and staff training — all delivered and live.
Discovery & Content Audit
Team interviews, full content inventory, navigation analysis, accessibility audit of existing site
Information Architecture & Design
Site structure redesign, wireframes, visual design system, bilingual navigation planning
Development & Accessibility
Responsive build, bilingual implementation, DataTables integration, accessibility best practices
Testing & Launch
Cross-browser testing, accessibility verification, content migration, staff training, go-live
Real Impact for Veterans
Program applications doubled after launch. More veterans are finding their path to meaningful construction careers.
Improved navigation, SEO, and mobile experience drove a significant increase in organic search traffic.
Clean code, optimized assets, and modern standards cut page load times by 80% — especially on mobile.
Built with accessibility as a core priority — ensuring every veteran can access the information and resources they need.
"Our new website has been working great for us and we've been receiving lots of positive feedback from our clients and industry. Our website traffic has gone way up — I think that's a testament to how much more user-friendly the site is now."
Have a Mission-Driven Project?
We love working with non-profits and organizations making a difference. Let's talk about how a better website can amplify your impact.