Happy Factor

The Constraint Was the Design

Sometimes a client asks for a redesign when what they actually need is clarity about their own identity.

The brief was straightforward: redesign the public-facing site, add CMS capabilities so the team could publish content independently, and improve SEO. But early in the discovery process it became clear the existing CMS migration was going to be messy, and — more importantly — the client didn't have a firm vision for what the brand should feel like.

Rather than push forward with a visual direction the client couldn't commit to, I slowed down and led a brand exploration process alongside the technical work. What does Happy Factor believe? Who are they talking to? What should someone feel when they land on the page?

Building the Brand, Then the Site

Design without direction is decoration. Direction without design is just a memo.

The exploration produced a full brand identity package — color system, typography, tone of voice, visual principles — that gave the redesign something to anchor to. More importantly, it gave the founder language to talk about her own business more clearly. That was an outcome neither of us expected going in.

With the brand defined, the site came together with a component architecture built on Lit — small, reusable web components that were easy for non-engineers to understand and extend. I applied BEM methodology throughout to keep the CSS maintainable and predictable.

Component Example

// Base card component — open for content, closed for structure
class HFCard extends LitElement {
  static properties = {
    title: { type: String },
    variant: { type: String }, // 'default' | 'featured'
  };

  static styles = css`
    :host { display: block; }
    .hf-card { padding: var(--spacing-md); }
    .hf-card--featured { border-left: 3px solid var(--color-primary); }
  `;

  render() {
    return html`
      <div class="hf-card hf-card--${this.variant}">
        <h3 class="hf-card__title">${this.title}</h3>
        <slot></slot> <!-- consumer controls the content -->
      </div>
    `;
  }
}

The CMS Migration

Every CMS migration looks simple until you're three days in and the data won't cooperate.

The existing CMS was inadequate for what the team needed — primarily the ability to publish articles with proper metadata for SEO. Migrating to Decap CMS required a full data transformation pass: restructuring content, mapping old fields to new schemas, and fixing encoding issues that the old system had silently introduced.

The end state was a publishing workflow where any employee could write, preview, and publish an article without touching code — with structured metadata fields for SEO baked into every template.

The results were measurable: page views increased by 200% after the new SEO infrastructure went live.

What I Carried Forward

Happy Factor was a reminder that frontend work is never purely technical. The most impactful thing I did wasn't writing a component or migrating a database — it was helping a founder see her own business more clearly. That shaped how I approach client work: the stated problem is a starting point, not the whole picture.

• HTML5
• SCSS
• JavaScript
• Lit
• Decap CMS
• Moodle