QualityAssuredUX
DarkHeart Project
DarkHeart Brewing is a craft taproom in Citrus Heights, CA with a strong brand identity and a public website that had serious, measurable usability failures — a live lorem ipsum block on a key conversion page, a tap list that linked to a completely empty page, and hours that contradicted across three separate sources. This project is a complete, independent UX audit and redesign.
The audit covered every public-facing page across desktop. Two frameworks were applied in full: Nielsen Norman Group's 10 Usability Heuristics — 60 checklist items, each scored on Nielsen's 0–4 severity scale — and WCAG 2.2 Level AA — all 56 success criteria evaluated against the POUR model.
The DarkHeart UX Ecosystem
Slide Deck Presentation
DarkHeart Brewing — Unified UX Design Review
A comprehensive UX audit of a Sacramento craft brewery's public-facing website.
Scope: Home, About Us, Brewery, Menu / Beers on Tap, Events, and Shop — reviewed across desktop.
Frameworks applied:
-
Nielsen Norman Group's 10 Usability Heuristics — 60 checklist items, severity-scored
-
WCAG 2.2 Level AA — all 56 success criteria evaluated across POUR
Key findings: 3 high-severity issues, 14 WCAG violations, 20 heuristic failures, and 4 broken user journeys — including a missing tap list, contradictory hours across three sources, and live placeholder copy published on a key conversion page.
The deck delivers a clear remediation roadmap organized by effort and impact, with the fastest fixes requiring no redesign — only content corrections.
View Slide Deck
Design System
A unified brand token and component reference designed to ensure visual consistency across every touchpoint — from the web redesign through future marketing and product work.
What's documented:
-
Color — Named palette with hex values: Grass Gold, Dark Arbor, Warm Stone, Bitte Border, White, True Black
-
Typography — EB Garamond display scale (46px → 24px) paired with a structured body type system:**
-
Color — Named palette with hex values: Grass Gold, Dark Arbor, Warm Stone, Bitte Border, White, True Black
-
Typography — EB Garamond display scale for paragraphs, captions, labels, and UI text
-
Spacing & radii — Token-based spacing scale and four corner radius steps (4px · 6px · 8px · 100px)
-
**Components (46px → 24px) paired with a structured body type system for paragraphs, captions, labels, and UI text
-
Spacing & radii — Token-based spacing scale and four corner radius steps (4px · 6px · 8px · 100px)
-
Components — Primary button states, card layouts, and global navigation pattern
-
Iconography — Size guidelines (16×16 · 24×24) with state-based color rules
-
Accessibility — WCAG AA compliance checklist with verified contrast ratios for every** — Primary button states, card layouts, and global navigation pattern
-
Iconography — Size guidelines (16×16 · 24×24) with state-based color rules
-
Accessibility — WCAG AA compliance checklist with verified color pair, minimum touch target sizing (44×44px), and UI control contrast requirements
Hi-Fi Prototype
Role: UX Designer · Scope: Full-site audit & redesign
The Problem
Dark Heart Brewing's website had strong brand identity but critical usability gaps. A UX audit applying WCAG 2.2 AA and NN/g heuristics revealed a 36% heuristic pass rate, 14 WCAG issues (4 critical), and 4 broken user journeys — the tap list linked to an empty page, hours contradicted across three sources, lorem ipsum was live on the Menu page, and every membership sign-up path was a dead end.
The Redesign
7-page interactive website addressing every critical finding:
Home — Hero CTA, visible hours strip, featured beers, and Keg Club callout replacing the original's "no guided next step" landing
Beers on Tap — Merged two competing pages into one unified 18-beer tap list with categories, pricing, and a "Last Updated" date
Visit (new) — Consolidated hours, address, parking, and food info into a single destination — previously scattered across three pages
Events — Real event listings on-site (Game Night, Trivia, Live Music) instead of Instagram-only
About — Unique brewery story and brewer profiles, replacing copy-pasted text across 4 pages
Shop — Surfaced in primary nav (was footer-only) with a full product grid
Join (new) — Unified membership hub with 3-tier comparison and direct sign-up CTAs, closing the conversion dead end