Ascenzi & Associates

From a founder-built first site to a branded, editable WordPress build

Branding Design System WordPress AI-assisted

Role

UI/UX Designer & Front-End Developer, including branding

Timeline

July 2026 – present

Team

PM, WordPress developer, marketing, BD team, founder (client)

Status

In pre-launch testing

Tools

Claude Code Figma HTML/CSS/JS WordPress (custom PHP theme) GitHub Pages Rive

TL;DR

Ascenzi & Associates (A&A) is a semiconductor-construction consultancy. Its founder-built first site had stopped opening and couldn't capture inquiries.

My role

I designed the brand and design system, then directed Claude Code to build a bilingual (English and Traditional Chinese) WordPress theme the team can edit without code.

Editable fields

0

in WordPress meta boxes

Interactions

0

audited in the theme

Languages

EN + 中文

bilingual theme

Service packages

0

one shared template

01 · Challenge & Audit

A first site that did its early job, then needed more

The founder's first site, built on Base44, had stopped opening by mid-July. The new one had to read as an authority, capture every inquiry in a CRM, and let him publish without a developer.

This is critique of the old site, not the person: he built it without a design team.

Home

No clear path

Eight navigation items, many competing actions.

The new homepage uses a client-journey roadmap and two actions.

New A&A homepage (drag to compare with the original)

Before Drag the white bar After

Contact

Nothing was captured

The form only opened the visitor's email client, so nothing was stored.

A step-by-step survey now feeds the CRM. Teammates built the connection.

New enquiry survey (drag to compare with the original)

Before Drag the white bar After

02 · Branding

Choosing a logo that works small

The mark had to survive a favicon, not just a presentation slide.

Two directions, designed from scratch.

  • The old serif wordmark was tiny in the navigation, and the AI logo references on my mood board were too detailed to survive that size.
  • On July 23 I presented two designs: a double-A with angular construction lines, and a circular badge following the founder's direction that looked like a car brand.
  • The double-A won: cleaner small, better in print, easier to extend.
Pen sketches of A-shaped logo marks built from construction and building forms
Early sketches of A-shaped marks.
A&A logo: blue double-A mark with Ascenzi & Associates wordmark
A&A white logo on Primary Blue

03 · Design System

Two one-page guides, both v1.0.0

Two one-page guides that feed the whole site.

Color & typography

Two brand colors and one single-weight typeface.

  • Color: Primary Blue (#0028FF) and Pure Black (#000000), each with a nine-step scale plus semantic and surface colors.
  • Type: Questrial has one weight, so hierarchy comes from size, tracking, and muted secondary text.
  • #0028FF
  • #000000
Color system: brand colors, blue and neutral scales, semantic and surface colors
Color system v1.0.0.
Questrial type scale from display to overline
Typography spec v1.0.0.

Contrast, calculated from the tokens. Contrast is calculated from the tokens. Failures became rules, such as gray 400 for decoration only and warning yellow only behind black text.

04 · Decisions & Priorities

What we chose, and what we cut

Five decisions, then a MoSCoW pass.

  • A survey, not a plain email box. The business team wanted email only. I argued that means re-asking everything on a call. The founder approved the survey in the first demo.
  • A globe, not a map. No data to filter, and a map needs upkeep.
  • WordPress, not Framer. Framer charged monthly for a custom domain. WordPress fits CRM and two languages better.
  • One action per page. A Contact button in the navigation, floating on mobile, and no direct email address.
  • Privacy and CRM. I flagged a privacy policy for every form. HubSpot's free plan handles contacts and auto-replies.

Several "must haves" were cut: the map became a globe, partner logos became a call to action, and the AI assistant and client login stayed out of scope.

MoSCoW board: must, should, could, won't
MoSCoW board: must, should, could, won't.

05 · Final Design

One system across pages and screen sizes

The homepage, blog, and enquiry survey, on desktop and mobile.

New A&A homepage on desktop
Homepage, desktop.
New A&A homepage on mobile
Homepage, mobile.

Blog: filters, keyword search, and article template

Insight page with category filters, keyword search, and article cards
Insight listing.
Insight article page template
Article template.

Enquiry survey

Survey step 1: which best describes your organization
Role first.
Survey step 2
Then need.
Survey step 3
Answers go into the CRM.

06 · Build with Claude Code

From prototype to a bilingual WordPress theme

Claude Code wrote most of the code. I wrote the requirements, made the design calls, and tested in the browser and in WordPress.

  1. Interactive prototypePublished on GitHub Pages to click through.
  2. Figma importImported into Figma so teammates could comment.
  3. WordPress theme81 editable fields, in English and Traditional Chinese.

One of my calls: the nav and footer had drifted into three versions each, so I chose one for all eight pages.

September 21

The blank-site problem

The installed theme showed only a header and footer. An audit showed the code was complete: no page template was assigned and the meta boxes were empty. Claude Code wrote two scripts to fill them from the prototype's copy. I kept it off my WordPress account and worked only with files I uploaded.

Testing the live site against the prototype caught the rest, such as a carousel that never advanced and a language switcher wired up only once.

07 · Status & Reflection

What I owned, and what's still moving

What I owned

The brand, design system, prototype, and WordPress theme, plus a back-end walkthrough so the team can publish articles.

What teammates owned

Requirements, the CRM connection, domain, test cases, and Chinese translation. The founder wrote most of the copy.

In progress

Pre-launch testing, site animations, and a domain decision. I'll add SEO results after a one-month test.

Reflection

Content was the bottleneck for over a month, so I built the homepage from the company summary and fixed the structure while the words changed. The hard part was the last stretch: knowing why WordPress showed an empty page, and testing the live site instead of trusting the prototype.

Let's build something
that ships.