Rebuilding District 3’s site and design system post-rebrand
After a complete organizational rebrand, I rebuilt the website of Montreal's innovation hub from the ground up, ending years of vendor lock-in and giving the new brand a digital home meant to inspire Canadian entrepreneurship.
brand transformation
The Catalyst
District 3 had just completed a massive rebrand, redefining itself as a bold, ambitious innovation ecosystem. Its digital front door was still a decade-old WordPress site: built by an external agency, tangled in proprietary plugins, and impossible to update without a support ticket.
The vendor lock-in was a running frustration, and the strategic problem was bigger: D3 wanted to inspire the next generation of entrepreneurs while its own technology was stuck in the past. The team decided to replace the site outright rather than patch it.
before and after
The Journey: 12 Months of Transformation
Brand Transformation
Months 1-3District 3 completed a massive organizational rebrand, redefining itself from a simple incubator to a comprehensive innovation ecosystem. Paul Geiben developed the new brand identity with four key personality axes.
Research & Planning
Months 4-7Extensive user journey mapping, audience research, and technical architecture planning. We identified the vendor lock-in problems with the old WordPress site and designed integration strategies for D3's operational stack.
Design Development
Months 6-8Paul and I collaborated on translating the bold brand vision into feasible web layouts.
Development Phase
Months 8-12Built the site on Webflow with Client First framework, implemented the Podio-Zapier-Webflow automation pipeline, and created the dynamic portfolio system for 1200+ startups.
Launch & Iteration
December 2024 - PresentLaunched at D3's 10-year anniversary event. Continued refinement based on user feedback, performance optimization, and feature additions as the organization evolves.
The Design-Development Partnership
This project's success hinged on the tight collaboration between design and development. Paul's vision was ambitious and brand-driven; my role was to make it technically feasible without compromising its integrity.
The SVG Typography Solution
Paul's design featured massive, "brash and busy" typography that was central to the new brand. Standard web fonts couldn't deliver it: sizing drifted between browsers, line breaks landed in the wrong places, and the layouts fell apart at responsive breakpoints.
I treated the typography as art instead, converting each headline into a lightweight SVG that scales to any screen while keeping the exact letterforms Paul drew.
svg typography system
Complex Layouts at Scale
The design also called for full-bleed layouts with very little horizontal padding (Except on ultrawide screens), with an entirely different design for mobile and desktop, meaning every section had have two versions. To solve this without building every page from scratch, I developed a system of flexible parent components with children mobile and desktop variants, that could adapt to Paul's vision while remaining maintainable.
component diagram
component comparison
Technical Architecture
The technical goal: end the vendor lock-in and integrate the site with D3's "Zapier-glued" operational stack, using tools a future team could maintain without me.
Platform Choice: Webflow + Client First
I chose Webflow for its CMS, visual development interface, and integration options. Building on the Client-First naming convention kept the project scalable and legible for future team members, even those without deep coding knowledge.
The 1200+ Startup Portfolio Challenge
For the first time, D3 needed an online, public-facing portfolio of its 1200+ startups. Manually managing this would be impossible. I designed and built a full data pipeline to automate the process from end to end.
automation architecture
The Automation Flow
- Trigger: A startup completes a key program, and their status is updated in our Podio CRM.
- Request: An automation creates an "Information Request" and emails the startup a custom form to collect public-facing data.
- Submission: When the form is submitted, the data is linked back to the startup's profile in a "Website Database" workspace in Podio.
- Quality Control: The marketing team gets a notification to review the submitted content for quality and brand alignment.
- Publication: With one click on a "Publish to Site" button, the marketing team triggers a Zapier workflow that instantly sends the approved data to the Webflow CMS, publishing the startup's profile live.
A Site to Create Entrepreneurs
The site had to serve existing entrepreneurs and recruit new ones. Canada loses founders to the US, and D3 wants to build a startup culture that competes globally; the website is one of its main recruiting tools.
We mapped user journeys for three audiences: startups, investors, and the general public. The information architecture guides each through a tailored path with the same underlying goal, conveying the energy, ambition, and possibility of the entrepreneurial route. Content that inspires a student to start a company also serves as a proof point for a potential investor.
Launch & Impact
The new site launched at D3's 10-year anniversary event in December 2024. Engagement rose on the metrics we tracked:
Measurable Improvements
anniversary launch
Reflection: Brand-First Development
The rebrand drove the technical work from start to finish. We integrated the site with D3's operational systems and its mission rather than treating it as a standalone marketing page.
Working with Paul produced solutions neither of us would have reached alone: his brand vision pushed me into techniques like the SVG typography, and my technical constraints fed back into his layouts.
D3's mission of inspiring Canadian entrepreneurship shaped the UX decisions throughout, from the information architecture down to the automation workflows. We built the site to create entrepreneurs as much as to serve them.
