Jason Cook DesignStart a conversation

Rebuilding jasoncookdesign.com, Start to Finish

The process behind the redesign, from audit to launch.

designprocesscase-study

Until this fall, the first thing a visitor to jasoncookdesign.com saw was my face under a headline that read "I'll help you deliver a world-class digital product." That headline went up in December 2024 and ran until October 2026, on a Bootstrap template I first put online in April 2019. The site had a hero, eight case studies, a pricing section, and a blog. It no longer described what I do, which is build working systems for businesses with a new offering to launch or a system to fix.

Before and after: the old home page and the rebuilt one.
FIG. 1Before and after: the old home page and the rebuilt one.

Context

The old site was a customized Bootstrap template on GitHub Pages. I put it up quickly to get my contact information listed, and I was too busy working for other people to finish the thought for years. Since then, what I offer has come into focus, and the site should say so.

Audit

Before I drew anything, I captured the live site as it stood: home, case studies, blog, and booking pages, at desktop and phone width. The content was relevant, but the delivery was flat, plain-vanilla non-design. My value had also sharpened since I built the site. I could say more clearly how I can help, and I'd defined two ways to engage. A page that couldn't carry that merited a full redesign.

The catch was that some essential services ran on the legacy site, and they had to keep working through the cutover: the blog posts, my calendar integration, and the PDFs of my resumes and old portfolio. Each old link still works. The blog posts and case studies redirect to their new pages, and the three PDFs stay where they were. The calendar had to keep working too, so the new Contact page carries the same Cal.com booking as an embedded widget, and the old booking links still reach it. The new information architecture gave every section of the old site a logical home.

Reconstructed information architecture: the old static site on the left, the rebuilt site on the right, redirects between them. Mapped after launch.
FIG. 2Reconstructed information architecture: the old static site on the left, the rebuilt site on the right, redirects between them. Mapped after launch.

Design iterations

I began with the brand's characteristics and how they show up in design choices, typography first, then the basic elements of color, form, and line, and a few iterations later I hit on something surprising.

The progression, left to right: legacy site, minimal, A document, C cut-list, and the blueprint that shipped.
FIG. 3The progression, left to right: legacy site, minimal, A document, C cut-list, and the blueprint that shipped.

The first iteration was a minimal expression of the brand, with every page rendered. A minimal design is a good baseline because you can build on it, and this one reflected the new information architecture with good structure. It was ready enough that I could have launched it.

It doesn't suit Jason Cook Design because it has no opinion. It's neutral, so it can become anything, and that leaves it with no identity of its own. The site should have the opinions I'd bring to your project.

The minimal version, fully rendered before I set it aside: home and the Engagements page.
FIG. 4The minimal version, fully rendered before I set it aside: home and the Engagements page.

A, document. This is where I started adding some style. I only looked at it in light mode, and I kept going and made other iterations before I went back to it.

C, cut-list. Here I was trying out different combinations of design tokens.

Direction A, a document, and direction C, a cut-list, in light mode, with placeholder content.
FIG. 5Direction A, a document, and direction C, a cut-list, in light mode, with placeholder content.

Blueprint. When I finally flipped A to dark mode, it came out blue, and I immediately had the blueprint idea. The rule marks in the layout, thin white lines on blue, started to look like a blueprint. The metaphor holds for what I do, so I leaned into it.

Direction A in light and in dark. The dark version came out blue.
FIG. 6Direction A in light and in dark. The dark version came out blue.

That's why the "layers" button in the header exposes the structure underneath.

The layers view on the shipped home page.
FIG. 7The layers view on the shipped home page.

Identity

I set out to express the design starting with the brand exercise: what the brand was about. I still left enough room for exploration, and in doing so the UI concept emerged naturally.

I've used an isometric cube in a few logos recently, so I started there on reflex. While I was shaping the curves of the letterforms, I turned off the transform by accident and found that the letters had character on their own. They looked better flat than projected onto the face of a die.

I drew the mark on a grid. Each letter sits in an 84-by-100 cell on a grid of 21-unit modules, and the one stripe is 8 units thick, the same as the notch in the J. The construction drawing sits in the hero with its dimensions showing.

Rounds of logo exploration, with the locked set at the center.
FIG. 8Rounds of logo exploration, with the locked set at the center.

Outcome

The site went live on October 19, 2026, with 22 pages: the home page; Work, Engagements, Writing, About, Capabilities, and Contact; a legal page; the two Engagements paths, offering and operating; eight case studies; and four blog posts. Every old page either redirects to its new home or still loads where it was. The blog's RSS feed is the one thing I retired.

The palette is built to stand out against the blueprint background. Orange reads loudest against the blue, so I use it sparingly, as a marker for what matters.

The design is the visible story, but the technical one is the cutover: moving a running site to a new structure and design while it stayed up. The content and build work behind it isn't shown here. The site shipped.

A site that says it builds working systems should keep working while it's rebuilt.

The rebuilt home page at desktop and phone width.
FIG. 9The rebuilt home page at desktop and phone width.
← All writing