The Mod Squad Team — The Mod Squad Team, LLC case study

The Mod Squad Team is a modular construction consulting firm with a strong track record across North America. Despite the depth of their expertise, their website didn't reflect the level of work they were doing. I led the full end-to-end redesign ,from a new visual identity and design system in Figma, to designing all the pages, building the site in Astro, and delivering complete brand collateral including business cards and HTML email signatures for the whole team. I used Claude Code as a technical partner to move fast without cutting corners. The entire project design and build was delivered in 2 weeks

The Problem

The old site had good content, but it was buried.

No Visual Identity: No set colors or fonts meant the brand felt disconnected.
Bad Hierarchy: Text was just dropped in blocks, making it hard to find key info.
Confusing Structure: They were mixing services and portfolio projects on the same page.
Missing Pieces: No dedicated place for investors or a structured way to showcase their work.

The Process

1. Logo & Identity

The new logo is a direct nod to modular building. I designed a geometric mark that looks like construction modules coming together. It's clean, precise, and works perfectly on everything from a dark-themed website to a business card.

2. Design System First

I didn't start with pages; I started with tokens. I defined my colors (deep navies for trust), typography (Inter for clarity), and an 8px spacing grid directly in Figma.

This made the development process much smoother. When the client sent content updates midway through, I didn't have to redesign anything — I just updated the components.

Color Palette

CSS Variables & Design Tokens

Typography Scale

View Figma File →

3. Fixing the Flow

I broke the content into 6 clear pages so each one has a specific job:

Home: Grabs attention with an interactive 3D model and quick stats.
Services: A deep dive into their 5-step process.
Projects: I turned the "Factory Design" section into a real portfolio. It now shows proof of their work with a clear layout that's easy to scroll.
Investors: A brand new page designed to speak directly to capital partners.
About: Team bios and company story, with a proper Meet the Team section.
Contact: A two-column layout — form on the left, info card on the right.

Projects Page Layout

4. The Build (Astro + Claude Code)

I used Astro for the development to keep the site fast and lightweight. Using Claude Code as my technical partner, I was able to translate my Figma components into clean code quickly.

I also built custom HTML email signatures and business cards with QR codes, making sure the brand felt the same whether you were looking at an email or a printed card.

Services Page Detail

Results

Clarity: It's now easy to tell what they do and see the factories they've actually built.
Scalable: The site is built with a component mindset, so adding new projects in the future is simple.
Professional: The brand finally matches the scale of their work.