Case Study · DDSGN 215

PNW Floor Design Website Build.

Planning, building, and launching the PNW Floor Design business website. Design system, platform decision, SEO structure, and responsive strategy, with the brand as the visual source of truth.

View the Live Website
Role

Brand strategy, UX/UI design, website planning, content strategy, SEO structure

Tools

Figma, Framer, HTML, CSS, JavaScript, Claude, UX research and process

Course

Pierce College DDSGN 215, Professor Min Pak

Live deliverable

pnwfloordesign.com

Problem

No live site, and a fragile handoff.

PNW Floor Design had a brand and a service offering, but no live website homeowners could find, trust, and act on. A paid Figma design existed, yet a reliable Figma to Framer transfer was not achievable. Imports were inconsistent and assets did not move cleanly.

No-code tools added recurring cost and friction for the things that mattered most: forms, SEO control, and ownership. The site also needed strong on-page SEO and fast mobile performance on a small budget, and it had to read as premium on first impression.

Solution

Rebuild in clean code, brand as the source of truth.

I set the failed Figma to Framer path aside and rebuilt the website in hand-authored HTML, CSS, and JavaScript, using the brand as the visual source of truth. The result is a fast, fully owned marketing site with one clear purpose: turn visitors into booked design consultations.

A reusable design system, six focused pages, a backend-free contact form that emails the owner, and real indexable pages with full SEO metadata, hosted at no monthly cost.

Goals

What the site had to do.

Launch a clean, premium marketing site on the existing domain, pnwfloordesign.com.

Drive one clear action: book a design consultation.

Keep cost low and ownership high. Avoid lock-in and recurring platform fees.

Achieve strong on-page SEO, full mobile responsiveness, and easy updates.

Target Audience

Who the site speaks to.

Washington homeowners planning a flooring, tile, kitchen, bathroom, or remodel project who feel overwhelmed by material and design decisions. Secondary: contractors seeking a design partner for material and color coordination.

Their mindset values trust, clarity, and a calm, expert hand. They decide quickly based on how professional and confident the brand feels, so presentation carries real weight.

Design System

One palette, one type pairing, repeated.

Every page inherits the same tokens. One button system, one card system, one section rhythm. The palette is warm and grounded, drawn from the brand.

Brand palette
Cream · #F6F2EA
Sage · #7C9384
Deep Green · #3E5247
Terracotta · #C8795A
Soft Pink · #E7A6A0
Charcoal · #2C2B27

Typography

A serif for elegant, trustworthy headlines, and a clean sans for readable body and interface text. Two typefaces, each with a clear job.

Components

Reusable buttons, service and portfolio cards, navigation, and form fields keep the experience consistent and the build fast.

Platform Decision

Framer vs. code.

This was a business decision, not only a technical one. After the Figma to Framer transfer proved unreliable, I evaluated the real options against cost, ownership, SEO, and maintainability for a small business.

OptionCostTrade-off
Framerabout $5 to $15 per monthEasy self-editing, but recurring cost, friction on forms and SEO, and an unreliable design transfer.
Webflowabout $14 to $23 per monthStrong SEO and visual editing, but the priciest path.
WordPressabout $5 to $12 per monthFlexible, but ongoing maintenance and security overhead.
Next.js and Vercel$0 to $20 per monthPowerful and scalable, but more tooling than a marketing site needs today.
Static site and Cloudflare$0 per monthFastest, fully owned, excellent SEO. Larger layout edits go through a designer.
Decision: a hand-built static site on free Cloudflare Pages. Premium quality, full ownership, top performance, and no monthly hosting cost.
SEO and Content

Built to be found, by search and by voice.

Real multi-page architecture. Each page is its own indexable URL with a unique title, meta description, and canonical tag.

LocalBusiness and FAQ structured data, plus a voice-search FAQ, so the site can answer flooring questions on Google, Siri, and Alexa.

Open Graph tags, a sitemap, and a robots file, ready for Google Search Console.

Performance as SEO: a lightweight build, system-loaded fonts, and SVG graphics for fast load and strong Core Web Vitals.

Responsive Strategy

One layout, every screen.

A fluid, max-width layout that scales from large desktop down to phone. Multi-column grids collapse to a single column, a mobile menu replaces the desktop navigation, and type sizes scale with the viewport.

No horizontal scroll, no overlapping text, no hidden calls to action on mobile.

Business Impact

A launch-ready presence that earns trust.

A professional web presence on the business domain at zero monthly hosting cost.

A clear path from first visit to consultation request, focused on one conversion.

Full ownership of the files and the brand, with no platform lock-in.

An SEO-ready structure built to be found by local homeowners from day one.

Reflection

The right platform is a business decision.

Matching the solution to real constraints, budget, ownership, and how often content changes, produced a stronger result than defaulting to a no-code subscription. When the design handoff broke, I protected momentum by treating the brand as the source of truth and rebuilding cleanly in code. Disciplined UX strategy, not decoration, is what makes a small-business site perform.

View the Live Website See the Brand Case Study