Harbor & Oak — Accounting Website Concept by Batholomew FrankHarbor & Oak — Accounting Website Concept by Batholomew Frank

Harbor & Oak — Accounting Website Concept

Batholomew Frank

Batholomew Frank

Homepage — a clear proposition, paired CTAs and an original SVG illustration. Self-initiated fictional concept.
A self-initiated WordPress website for a fictional accounting and bookkeeping brand. Six editable pages combine a calm visual identity, clear service pathways, responsive navigation, practical resource guides and a demonstration enquiry flow.
Role: Web Designer & WordPress Developer
Tools: WordPress · Gutenberg · PHP · HTML · CSS · JavaScript · SVG
Skills: WordPress Development · Web Design · Responsive Design · UI Design · Information Architecture · Custom Theme Development
Self-initiated fictional concept. Harbor & Oak is not a real accounting practice and was not commissioned by a client. The website does not provide professional financial or tax advice. The enquiry flow is a local demonstration; no message is delivered to a business.

Project overview

Harbor & Oak Accounting is a fictional brand created as a self-initiated portfolio project. The brief was to make an accounting and bookkeeping website feel approachable while giving visitors a clear way to understand the services, find information relevant to their business and explore a first conversation.
The result is a custom WordPress theme with six editable pages: Home, About, Services, Who We Help, Resources and Contact. A restrained green, cream and copper palette, editorial typography and an original SVG illustration establish a warm, structured identity. Clear headings, supporting panels and purposeful links carry that identity through the website.

Challenge

Accounting websites need to communicate detail without making the first visit feel overwhelming. For this concept, the challenge was to balance a professional presentation with plain language and useful routes through services, audience needs and introductory resources.
A second requirement was honesty: the website needed to demonstrate a realistic business experience while making its fictional status and the limits of its enquiry flow clear.

Approach

I organized the experience around the questions a visitor would bring: what support is available, who it is for, how the firm approaches its work and what a first conversation could involve. Dedicated service and audience sections pair explanatory content with practical supporting panels and relevant next steps.
The custom theme keeps page content editable through Gutenberg and provides responsive navigation across the six pages. Resource cards link to complete on-page guides. The contact page uses labelled fields and a local preview interaction, with explicit demo messaging rather than implying that an enquiry will reach a real accounting practice.

Results

The completed concept demonstrates a cohesive six-page WordPress website, reusable visual patterns, editable content and a responsive navigation system. Desktop QA was completed in the earlier temporary WordPress environment, and mobile QA was substantially completed there. The saved v1.0.1 theme was subsequently rendered unchanged in local WordPress to finish the presentation captures.
For this capture session, all six primary navigation destinations loaded, the mobile menu opened with all six links and its CTA, and the selected Resources card reached its intended on-page guide. The final images show the actual WordPress render; the mobile images use a 390px browser viewport and are not Android hardware captures.
Success here is the quality and completeness of the implemented concept. No client engagement, launch, traffic, leads, conversion uplift or accounting outcomes are claimed.
Complete homepage hero at a 390px responsive browser viewport.
Complete homepage hero at a 390px responsive browser viewport.
Responsive navigation with all six pages and a clear conversation CTA.
Responsive navigation with all six pages and a clear conversation CTA.
A complete service section pairs explanatory copy with a practical supporting panel and next step.
A complete service section pairs explanatory copy with a practical supporting panel and next step.
The fictional brand’s introduction and approach.
The fictional brand’s introduction and approach.
Complete Clarity, Care and Consistency principles.
Complete Clarity, Care and Consistency principles.
An audience pathway tailored to independent work, with a relevant service link.
An audience pathway tailored to independent work, with a relevant service link.
A resource card introduces a complete guide.
A resource card introduces a complete guide.
The actual guide reached after activating the card link; this is an on-page destination.
The actual guide reached after activating the card link; this is an on-page destination.
Labelled fields and explicit demo boundaries, using fictional sample information.
Labelled fields and explicit demo boundaries, using fictional sample information.
Like this project

Posted Oct 7, 2026

Self-initiated WordPress concept for a fictional accounting brand, with six editable pages, responsive navigation and a demo enquiry flow.