Overnight Design Scan — Dodek / Crate Engines Site

03 Debugging Findings

Visual

Major

Three product names, zero coherence

The header says "KINJIA", the Cloudflare URL says "crate-engines", overview/library say "CRATE ENGINES", and the product is called "Dodek" in all documentation. A visitor to the live site has no way to know what "Dodek" is or that this is it. The brand identity exists only in docs, not in the product.

Major

Two active versions linked inconsistently

index.html redirects to kinjia-taste-map.html (v3). The overview.html nav links to kinjia-taste-map-v4.html. Both versions are deployed and accessible. Users who click "Taste Map" from the overview get v4; users hitting the root URL get v3. No version indicator exists in either UI.

Minor

Autoplay panel uses JetBrains Mono, breaking font coherence

The main app uses SF Mono / Fira Code / Cascadia Code. The .autoplay-drop, .ap-intent, and queue panel all reference JetBrains Mono as primary — a remnant of a different design iteration. Will render with fallback but creates visual inconsistency if JetBrains Mono happens to be installed.

Minor

Autoplay accent color (#ff6b35) is outside the design system

The autoplay active state uses an orange-red (#ff6b35) that doesn't exist in the CSS variable palette. The system has --heat: #ff6b6b and --orange: #ff922b. The autoplay color sits between them — appears to be a one-off.

Minor

Filter panel CSS variable mismatch

CSS declares --filter-w: 220px but the filter panel width is set to 280px and the CSS class is .filter-panel.mobile-open — suggesting the panel was redesigned but the variable wasn't updated. The variable is unused.

Accessibility (WCAG AA)

Major

Canvas visualization has no accessibility layer

The scatter canvas (#scatter-canvas, #density-canvas) has no ARIA role, no aria-label, no fallback text, and no keyboard navigation to data points. Screen readers encounter an inert canvas element. For a product whose core value is in the visualization, this is a complete accessibility failure. WCAG 1.1.1 (non-text content) requires a text alternative.

Minor

Type scale is extremely small throughout

The predominant type sizes are 9–11px. While monospace UIs can pull this off, the 9px range used for labels, section headers, and filter counts is below comfortable reading size at standard screen distances. WCAG 1.4.4 (resize text) applies — verify the app doesn't disable zoom (user-scalable=no not found, which is correct).

Note

Conviction ring SVG uses white text on data-driven backgrounds

The conviction ring renders a percentage text inside an SVG with fill="#fff". The ring arc color is data-driven — some color values may not provide 4.5:1 contrast with white text for WCAG AA compliance on smaller rings.

Performance

Major

321KB JSON payload (viz_compact.json) loaded synchronously at startup

The taste map fetches viz_compact.json (321KB) before any visualization can render. On mobile 3G this is ~2.5s additional load time. No loading skeleton or progress indicator was found in the CSS — the canvas just stays blank. Adding a loading state with progress feedback would significantly improve perceived performance.

Minor

4,275-line single HTML file — no code splitting

The entire app (CSS, HTML, JS including Canvas rendering, audio preview, transition modal, autoplay engine, filter logic) lives in one file. This is fine for Cloudflare Pages but makes incremental loading and caching of unchanged code impossible. A minor performance concern, mostly a maintainability issue.

Note

Service worker cache key kinjia-v1 is not versioned

Cache busting requires manually updating the CACHE_NAME in sw.js. If viz_compact.json is updated without bumping the cache key, users with a cached service worker will serve stale data indefinitely until they force-clear or the browser evicts. Consider appending a build hash or using a cache-busting URL strategy.

Mobile / Responsive

Minor

Canvas scatter plot not optimized for mobile interaction

The taste map is an interactive Canvas viz with hover tooltips. On mobile, hover is unavailable — the tooltip system appears to use mouse events. Touch tap likely works for point selection, but hover-to-preview requires mouse. The sidebar drawer uses a .mobile-open class but there's no explicit mobile breakpoint ensuring the filter panel is usable on small screens.

Note

PWA manifest is installed but secondary pages aren't cached

The service worker only caches /, /kinjia-taste-map.html, /viz_compact.json, and /manifest.json. overview.html, library.html, and kinjia-taste-map-v4.html are not pre-cached. Navigating to these pages while offline fails silently.

Content Design

Major

The conviction gap (yellow vs teal) is never explained in the UI

The entire product concept — "stated vs. revealed preference" — is encoded in dot color. Yellow = curated, teal = played. This is the core insight. But there is no legend, no callout, no tooltip explaining this to first-time visitors. Power users figure it out; everyone else sees a pretty scatter plot with no "so what."

Major

Overview and Library pages contain hardcoded mockup data

overview.html shows "78" readiness score, "1,247 tracks", "42 playlists", "2h since sync" — all static. library.html shows 9 hardcoded tracks. These are linked from the taste map's Engines dropdown. Any external visitor will assume this is live data and form false expectations. Pages should be clearly labeled as "preview" or removed until connected to real data.

Minor

No OG/Twitter meta tags — sharing produces blank previews

The product vision explicitly includes social sharing (v2). Currently, sharing the URL produces a blank link card (no title image, no description). Even for v1, adding <meta property="og:title">, og:description, and og:image costs 5 minutes and makes every shared link dramatically more compelling.

Note

identity.html is a redirect stub — missed identity layer

identity.html says "REDIRECTING TO TASTE MAP" and immediately redirects. This page should be where a user sees their Dodek type profile — the twelve-face polygon, their type name, conviction score. It's the most important page in the product and it's a stub redirect.

04 UX Gap Analysis

The Type Reveal Is Missing

Highest Impact Gap

Dodek's core value proposition is "Your taste is a twelve-faced object. Here is your shape. Here is your type name." The current UI shows a scatter plot. Nowhere in the product does it say "You are The Cartographer" or show a twelve-face polygon. The insight is computed (it's in the data model) but never surfaced. This is the difference between data visualization and product identity. Until the type reveal exists, Dodek is a cool data viz — not a taste identity platform.

Cold-Start: No Path In For New Users

High Impact

The taste map currently renders Patrick's personal library data (1,601 tracks from viz_compact.json). There is no import flow, no upload button, no "Connect your Serato" path, no empty state showing what the product looks like with no data. Any visitor who isn't Patrick sees someone else's taste map. The product can't be used by anyone else in its current state — which is fine for a private tool, but contradicts the social sharing vision and makes the site unintelligible to outsiders.

Navigation Brand Confusion

Medium Impact

Three names are active simultaneously: header says "KINJIA", domain is "crate-engines.wherewithal.studio", and the product is called "Dodek" everywhere in documentation. Two taste map versions (v3 and v4) are both live. The overview/library nav points to v4; the root URL serves v3. Someone visiting the live site has no way to understand the product name, version, or canonical URL. This blocks word-of-mouth sharing ("check out this thing called… what was it?").

The "So What" Moment

Medium Impact

After exploring the scatter plot — filtering by genre, hovering tracks, playing previews — there is no synthesis moment. The product doesn't say: "Based on your Dodek profile, here are 3 things you should know about your taste" or "Your conviction gap is widest in Deep House — you curate it but rarely play it." The data exists; the interpretation is absent. A user can explore indefinitely with no destination.

Shareability Is Architecturally Ready But Functionally Absent

Medium Impact

The vision doc explicitly describes sharing your Dodek type. The technical pieces exist (type names, conviction scores, twelve-face data). But there is no share button, no generated profile URL, no copyable "I am The Architect, conviction score 73" card. Even without v2 social features, a simple static "share your type" card generator (screenshot-friendly modal with your type name and polygon) would activate the social flywheel today.

Mockup Pages Harm Trust

Medium Impact

overview.html and library.html are linked from the live product's navigation dropdown. They contain fake data (hardcoded track titles, static readiness scores). A visitor who clicks "Overview" or "Library" sees convincingly formatted data that is entirely fictional. This creates false impressions about product capabilities and erodes trust when the deception is noticed. These pages should be removed from production nav or clearly labeled as previews.

05 Research References

Taste Identity & Data Visualization

Spotify Wrapped

Best-in-class personal data identity reveal. The "year in music" as a shareable identity card. Study: how it sequences reveal moments, delays gratification, and makes stats feel emotional rather than statistical.

Pudding — Judge My Spotify (The Pudding)

Interactive music taste visualization with personality typing. Shares DNA with Dodek's conviction gap concept. Notable for making data feel personal and slightly self-deprecating.

Observable — D3 Gallery

Reference for force-directed layouts, radial charts, and conviction-gap visualizations. Radar/spider charts for twelve-face polygon inspiration.

MusicMap

Genre map visualization. Interesting reference for how genre relationships can be visualized spatially. Dodek's scatter approach is denser and more personal but MusicMap shows clear cluster labeling patterns.

Identity Reveal & Type Systems (non-music)

16Personalities

The gold standard for computed personality reveals. Study: the reveal sequence, the type name ("The Architect"), the trait bars, the shareable card. Dodek's type system maps 1:1 to this structure — The Cartographer, The Tunneler, etc.

Co-Star Astrology

Personality-as-shape visual vocabulary. Dark aesthetic, computed identity, shareable results. Direct aesthetic and conceptual precedent for Dodek's twelve-face polygon.

NYT — What Kind of Music Listener Are You?

Music typology quiz with reveal. Useful for studying how music personality types are explained and presented to general audiences.

Award-Winning Data Viz & Music Aesthetics

Awwwards — Music category

Curated music site designs. Filter for dark/minimal aesthetics. Notable recent winners use large type reveals, full-screen visualization backgrounds, and audio-reactive elements.

Godly.website

Curated collection of highly animated/visual sites. Search "music", "data", "identity" for relevant patterns. Strong source for the "Blow It Up" direction.

Siteinspire

Editorial and minimal web design. Search "visualization" and "data" for clean approaches to presenting complex data with narrative structure.

DJ Culture & Music Tool UX

Lexicon DJ

Primary data source tool. Study their metadata visualization approach for how they present library health and genre distribution to DJs.

Last.fm Library

Longitudinal music taste tracking with charts. Longest-running data set of this type. Study their conviction gap analog (scrobbles vs tags) and temporal drift visualization.

06 Inspiration Vectors

Refine What's There

The Type Banner — Persistent Dodek Identity Strip

Add a persistent strip below the header that shows your computed Dodek type name, type description, and top 3 dominant faces. Dismissible with a "tell me more" link to a twelve-face detail view. Zero layout disruption — just fills the unused space between header and canvas toolbar.

Mockup: Type Identity Strip

          KINJIA
          TASTE MAP
          MAP  ·  OVERVIEW  ·  LIBRARY
        
          Your Dodek Type
The Cartographer

            DNA · 68
            CONVICTION · 54
            MOOD · 47
          
            View Full Profile →
            ×
          
          X AXIS
          GENRE
          Y AXIS
          ENERGY
          1,601 TRACKS
          459 FLOWS
        
          [ SCATTER CANVAS ]

Refine What's There

Conviction Gap Legend — First-Run Callout

A dismissible first-run overlay that explains the two axes of the visualization in plain language. Shows for 5 seconds then auto-dismisses, or user clicks through. Doesn't interrupt the viz — appears as a semi-transparent overlay on the canvas with two annotation arrows pointing to example dots.

Mockup: First-Run Legend Overlay

Reading This Map
Curated
Tracks in your playlists
Played
Tracks you actually play
The gap between yellow and teal is your conviction gap — where your stated and revealed taste diverge.

              
            

Refine What's There

Identity Page — Twelve-Face Profile

Replace the identity.html redirect stub with an actual Dodek profile page. Shows the twelve-face polygon, type name, top 3 faces, conviction gap score, and a shareable card. Accessible from the taste map header. Doesn't require backend — can be computed from viz_compact.json at page load.

Mockup: Twelve-Face Profile Page

Your Dodek Shape

              THE
              CARTOGRAPHER
            
Twelve Faces
DNA
68
DESCRIPTORS
55
MOOD
47
SET PHASE
42
ENERGY SHAPE
38
GROOVE
44
VOCALS
31
MIX MECH.
36
MODIFIERS
52
BPM
61
ENERGY LVL
57
CONVICTION
54

Refine What's There

OG Share Card + Unified Brand Name

Two quick wins that unlock the social vision: (1) add OG meta tags so sharing the URL produces a rich preview, (2) pick one name and use it everywhere. Recommendation: "Dodek" is the product, "Kinjia" is the tool. Brand the public site as Dodek, leave Kinjia in the CLI/localhost context.

Mockup: OG Share Card Preview

DODEK

I am The Cartographer

Music taste is a twelve-faced object. Here is my shape.

crate-engines.wherewithal.studio Discover yours →

Refine What's There

Insight Card — "The So What" Synthesis Panel

A sidebar panel (or modal) triggered after N seconds of exploration that synthesizes 3 insights from the user's data. "Your conviction gap is widest in Deep House — you curate 47 tracks but play fewer than 10." Makes the scatter plot actionable and generates the "aha" moment the product needs.

Mockup: Insight Synthesis Panel

Your Taste — 3 Insights
Conviction Gap — Deep House
You've curated 47 Deep House tracks but your play count is under 10. High aspiration, low execution.
Revealed Core — 120-126 BPM
83% of your most-played tracks live in this BPM range. Your actual range is narrower than your curation range.
Your Shape Is Shifting
New curation in Q1 skews toward higher energy. Your Dodek is drifting toward The Architect pattern.

Blow It Up

The Reveal — Full-Screen Type Announcement

Ditch the scatter plot as the landing experience. Replace with a cinematic full-screen type reveal: black background, dodecagon shape animating in, type name appearing letter by letter, then "explore your map" CTA that transitions to the current viz. Think Co–Star meets Apple Fitness+ Activity rings. The data viz becomes act 2, not act 1.

Mockup: Full-Screen Type Reveal

            
          Your Dodek Type
THE
CARTOGRAPHER
Always exploring, rarely committing. Maps the territory of music without planting flags.

Blow It Up

Terminal Compute — Live Dodek Derivation

Lean fully into the monospace aesthetic. Replace the smooth UI with a terminal-output-style computation: "Analyzing 1,601 tracks... Computing DNA face... 67.8... Measuring conviction gap... Cross-referencing play history..." — then the type name appears in a burst of green text. Celebrates the computational nature of the product. DJ culture appreciates raw signal over polish.

Mockup: Terminal Compute Style

$ dodek compute --library /dj-playlist-xref.db
Loading 2,370 tracks from Lexicon database...
Analyzing cross-reference: 251 playlists
Computing Face 1 — DNA........................ 68.2
Computing Face 3 — Mood....................... 47.1
Computing Face 12 — Conviction............... 54.8
Deriving face dominance pattern............... 
Matching type signature....................... 
TYPE RESOLVED:
THE CARTOGRAPHER
confidence: 94%
Maps territory without planting flags. 12/12 faces computed.
$ _

Blow It Up

The Collectible — Taste Card as Physical Object

Inspired by Pokémon cards, tarot cards, and music festival wristbands. Your Dodek type is a card you own — dark foil texture, type name in large serif, your twelve-face polygon as the card artwork, key stats on the back, a QR code linking to your live taste map. Leans into the "Dodek Ambient" vision of taste as visible, shareable, identity-bearing artifact. Printable, shareable as image, eventually NFT-adjacent without saying NFT.

Mockup: Dodek Identity Card

            Dodek
            #0042
          
              conviction: 54
            THE
CARTOGRAPHER
Maps territory without
planting flags

            DNA 68
            CVN 54
            MOOD 47

Printed at ~63×88mm (standard card). Backs show QR code → live taste map. Twelve-face glow is computed from type — The Tunneler is warm amber, The Cartographer is purple, The Architect is teal.

Dodek & Crate Engines Site