Custom Woodworks Ltd — Unofficial Commercial Web Redesign

Role: Lead UI/UX Designer & Web Developer Scope: UI/UX Redesign, B2B Visual Strategy, Performance Optimization, Content Architecture Tech Stack: React, Tailwind CSS, Vite, GSAP, Vercel

Disclaimer: This project is an unofficial concept redesign created for portfolio and demonstration purposes only. It is not affiliated with, sponsored by, or endorsed by Custom Woodworks Ltd.

---

1. Project Title & Overview

The objective of this exploratory case study was to bridge the gap between high-end offline craftsmanship and digital execution. Custom Woodworks Ltd. is a premium specialty contractor based out of Sioux City, Iowa, specializing in high-value ($50k–$250k+) architectural millwork, bank fixtures, and institutional cabinetry.

The goal of this redesign was to transform an underperforming digital presence into an enterprise-grade B2B acquisition platform that immediately establishes credibility with general contractors, commercial architects, and project managers.

---

2. The Challenge & Context

Business Background

Custom Woodworks Ltd. operates in a high-stakes B2B market. Their clientele consists of commercial general contractors, corporate executives, and architects seeking custom millwork, executive conference spaces, and high-security financial fixtures (such as teller lines and reception desks).

Original Site Analysis & Shortcomings

• Critical Technical Routing Issue: The existing live web address presented an active "Coming Soon" screen, completely masking the underlying internal pages (About, Projects, Contact). Potential clients and search engine crawlers were completely blocked from viewing their track record.
• Outdated Visual Hierarchy: The legacy internal layouts lacked modern typography, strong visual hierarchy, and high-resolution spatial presentation required to justify six-figure contract pricing.
• Friction in the B2B Conversion Flow: The original contact structure treated all incoming leads the same. High-value general contractors looking to submit large blueprint packets (PDFs, CAD drawings) were forced through a basic, unoptimized general inquiry form.
• Unstructured Service Presentation: Services were presented as an unorganized list without clear categories, making it difficult for commercial visitors to instantly verify code compliance, durability standards, or ADA accessibility features.

---

3. Design Strategy & UX Solutions

Layout Rationale & Information Architecture

Commercial contractors do not browse web pages like retail consumers; they need immediate verification of capability, scale, and compliance. The redesign organizes their services into three core pillars: Architectural Millwork & Specialty Finishes, Commercial & Financial Fixtures, and Institutional & Hospitality Cabinetry.

Color Palette & Typography

• Palette: Built upon a warm, elevated cream background paired with deep charcoal, dark woods, and rich muted accents to reflect fine architectural craftsmanship, longevity, and structural precision.
• Typography: A combination of a clean, authoritative serif for section headings (evoking heritage and fine detail) paired with a high-legibility sans-serif for body specs and technical copy.

B2B Conversion Strategy

To streamline incoming leads, the architecture splits client routing into two distinct paths:

1. General Contact: Accessible via standard navigation for basic inquiries, vendor outreach, and recruitment.
2. Dedicated RFQ / Bidding Engine: A prominent call-to-action in the primary navigation directing contractors straight to a dedicated blueprint submission interface capable of handling heavy CAD and spec files.

---

4. Key Highlights & Improvements

• Interactive Capabilities Grid: Transformed a flat list of 10+ services into a multi-column modular system paired directly with enterprise value propositions (Code Compliance, ADA Accessibility, Security Integration, and High-Traffic Durability).
• High-Performance Portfolio Viewer: Built an ultra-fast light-box showcase optimized for heavy detail rendering without impacting core web vitals or mobile performance.
• Architectural Blueprint Portal UI: Designed an interactive Request for Quote component engineered specifically for commercial project managers needing to attach project specifications and timeline requirements.
• Fluid Animation & Micro-Interactions: Utilized GSAP animations to create subtle scroll-triggered motion effects that emphasize precision craftsmanship without distracting from content scannability.
• Local SEO Schema Structure: Optimized the layout hierarchy and metadata targeting regional commercial millwork searches across Sioux City and the broader Midwest.

---

5. Project Takeaways

This concept redesign highlights the core of my approach to web development and design: identifying real business friction points and solving them through intentional user experience.

By recognizing that Custom Woodworks Ltd. was operating with hidden pages behind a technical wall, this project transformed an invisible digital asset into a strategic sales tool. It demonstrates my ability to take complex B2B requirements—such as architectural specs, commercial compliance, and enterprise bidding—and translate them into a clean, modern, and high-converting web platform.