Design study · Oct 2026

What Project Defeat could look like

Clickable prototypes of the whole site, on the app's real data. The current version of every tab comes first, then the Step 2 designs behind each decision, newest first, including the ones that were dropped, then the rounds that led here, newest first. They are mockups, not the live app.

Current · the whole site, 7 tabs

Every tab, as it stands

The chosen style: a crystal over water, drawn live in 3D, with each tab in its own colour and one small detail of its own. The tabs link to each other, so start at Home and click through the top navigation. Every tab is decided.

Loading preview…
TAB

Home

The front door: Phase 2 at a glance, real data changes and a card for every tab. The original teal, with light shafts, and a soft crystal swell on the first visit.

Open Home
Loading preview…
TAB

Character Planner

The stat bar with the hit cap, and all six sub-tabs on real data. Gear is a character sheet with game-style tooltips and a "What's left" checklist with one-press fixes and where each upgrade drops. Compare holds your item's tooltip next to another's, with the trade summed up in one sentence. Talents is the game's talent window, with a "What's off" list of one-press fixes. Buffs fill in from your raid and seat as clickable icons, with a Blessing for each Paladin. Ranked Gear shows Wowhead's order slot by slot as tooltips, or by where each item drops with your upgrades marked. Build makes a share link that opens the same character in the live app, keeps named builds, and reads a paste (or the addon's export) before loading it. The hit cap follows Precision and Improved Faerie Fire. Deep sea blue, with slow rising bubbles.

Open Character Planner
Loading preview…
TAB

Simulation

Runs the live app's own simulator on your planner character: your stat priority, your best upgrades by real DPS gain, then the estimate with its damage sources and how far to trust it, against what players average for all 20 DPS specs. Gold over violet, with crystal pillars.

Open Simulation
Loading preview…
TAB

Raid Composition

A real planning table: click a spec to fill the next seat, group 1 first; move or drag players; name them with the pencil; and see each group's party buffs and what's missing. White-gold, with one light per group that brightens as its buffs are covered.

Open Raid Composition
Loading preview…
TAB

Spec Tier Lists

The tier board: Wowhead's three Phase 2 lists as rows of spec icons, with a card for any spec (its place on every list, what the logs say, what it brings to a raid), or switch to Wowhead's tiers against what players actually parse. Emerald, with three rank rings under the crystal.

Open Spec Tier Lists
Loading preview…
TAB

Raids

The boss journal: pick a raid, then a boss, and see its loot as the game shows it with your spec's picks ranked from Wowhead's Phase 2 lists, or switch to your raid and see who in it wants each drop. All five raids, 24 bosses and 469 drops from the live app, a search across every raid, and the scene follows the raid.

Open Raids
Loading preview…
TAB

Professions

The profession window: set your skill and every recipe on the path to 375 takes its colour, with reagents, vendor prices and routes for the gatherers; or switch to Which two, every profession by what it gives a level 70 character and makes for your spec. Amber, with veins of ore up the pillars.

Open Professions
Step 2 · Professions · decided 2026-10-12

Professions: the profession window, and which two to take

The owner picked A, the profession window, with B's comparison behind a switch ("Level it / Which two"). That is now the Professions tab above, and with it every tab of the walkthrough is decided. C, the road to 375, was not picked. The three designs stay here for reference. They are three designs for the Professions tab, the last one, each on the live app's own data (gen-prof-data.mjs reads it from src/): the 13 professions' trainer stops and payoffs, the nine crafting paths (201 recipes with counts, reagents, vendor prices and each recipe's skill colours), the four gathering guides (32 ranges with routes computed from recorded nodes, drawn on a plain grid), and the 165 places on Wowhead's lists that a profession makes. A is "what do I make or gather now?", B is "which two should I take?", C is "what's left, and what do I need?". Your skill in each profession is shared between them.

Loading preview…
PICKED

Professions A · The profession window

Like the game's own: pick a profession's icon, set your skill on the bar (trainer stops marked), and every recipe on the path to 375 takes its colour at that skill. Pick one for its reagents, what it makes and what a vendor charges; a gathering profession shows its ranges and the route instead.

Open Professions A
Loading preview…
VIEW MERGED IN

Professions B · Which two to take

Every profession by what it gives a level 70 character, led by what it makes for your spec from Wowhead's lists (for Fury: Blacksmithing's Dragonstrike, the #1 main hand). Pick two to see the pair: what you get, and whether one feeds the other (Mining supplies 97% of Blacksmithing's farmed materials).

Open Professions B
Loading preview…
NOT PICKED

Professions C · The road to 375

Set your skill and see the rest of the climb as one road, trainer stops as waypoints and passed steps folded away, beside the shopping list from here: what a vendor sells, priced, and what you farm, counted, with who gathers it.

Open Professions C
Step 2 · Spec Tier Lists · decided 2026-10-12

Spec Tier Lists: the tier board, and the logs beside it

The owner picked A, the tier board, with B's chart behind a switch ("The board / Against the logs"). That is now the Spec Tier Lists tab above. C, what each spec brings, was not picked. The three designs stay here for reference. They are three designs for the Spec Tier Lists tab, each on the live app's own data (gen-tier-data.mjs reads it from src/): Wowhead's three Phase 2 lists (28 placements), archon.gg's observed DPS for the 20 damage specs from Serpentshrine and Tempest Keep logs, the live app's spec icons, and what every spec brings to a raid from the buff data Raid Composition counts. A is "where does my spec stand?", B is "is it actually good?", C is "who should we bring?". Hover, focus or tap any spec for a summary. The tier letters stay neutral, as in the live app.

Loading preview…
PICKED

Spec Tier Lists A · The tier board

The familiar tier-list board: S to D rows of spec icons in class colours, damage on top and healing and tanking side by side. Press any spec for its card: its place on every list, what the logs say, what it brings to a raid and its signature ability. Your spec starts selected; a class filter dims the rest.

Open Spec Tier Lists A
Loading preview…
CHART MERGED IN

Spec Tier Lists B · Two opinions

Wowhead's tier against the logs: the 20 damage specs ranked by archon.gg's observed DPS, each with both tier letters, and the disagreements spelled out (they agree on 9). Sort by Wowhead's tier instead, or show only where they disagree. Healers and tanks are Wowhead's opinion alone, and say so.

Open Spec Tier Lists B
Loading preview…
NOT PICKED

Spec Tier Lists C · What each spec brings

The tier list as a raid-building tool: every spec as a card with its tier and the buffs and debuffs it brings. Pick one of the 40 to light who brings it; the specs in your Raid Composition raid are counted, and "Would add" names who would bring something your raid has nobody for.

Open Spec Tier Lists C
Step 2 · Raids · decided 2026-10-11

Raids: the boss journal, with your raid's loot

The owner picked A, the boss journal, with C's raid view behind a switch ("For me / For my raid"). That is now the Raids tab above. B, the way in, was not picked. The three designs stay here for reference. They are three designs for the Raids tab, each on the live app's own raid data (469 drops, read from src/ by gen-raid-data.mjs rather than pasted in), with every drop's rank on each of the 27 specs' Wowhead Phase 2 lists. All three keep the scene that follows the raid, the owner's raid and boss art, and the loot search across all five raids, whose results now open a drop where it drops. Hover or tap any item for its tooltip. A is "what does this boss drop for me?", B is "can I get in, and what's next?", C is "who in my raid wants this?". Building them corrected the live app's data: Al'ar's Gloves of the Searing Grip and Netherbane are physical DPS drops (they were tagged caster and tank), and Tempest Keep's heroic keys needed Revered, not Honored.

Loading preview…
PICKED

Raids A · The Adventure Guide

One boss at a time, like the game's boss journal: the raid's bosses down the side with their art, the chosen boss's loot as icons with tooltips, and "Loot for" any of 27 specs (Fury Warrior first) putting that spec's picks on top with their rank. About the raid holds the way in; The fight holds the mechanics.

Open Raids A
Loading preview…
NOT PICKED

Raids B · The way in

Progression first, like the Attune addon: five doors that open as you tick off the attunement steps you've done, the next step for the chosen raid and which other raid it needs (Serpentshrine's Blazing Signet waits on Karazhan), then what's waiting inside for your spec, boss by boss. The ticks are kept in your browser.

Open Raids B
Loading preview…
RAID VIEW MERGED IN

Raids C · From your raid

A loot plan for the raid you built on Raid Composition (or its example): every drop with who in your raid wants it, as spec icons with their rank, most wanted first, and contested drops marked. Tier tokens count for whoever wants a set piece they buy. Press a raider for their wishlist.

Open Raids C
Step 2 · The live app's front door · decided 2026-10-11, built into the live app

The front door: doors with a glimpse, and the job each does

The owner picked A, doors with a glimpse, with B's goal line on each door ("Gear my character →"). It is built into the live app's SectionPicker, in the app's own look: Character Planner as the big door with Simulation and the import beside it, a real glimpse and a counted fact on every door, and each named by its title. C, the game menu, was not picked. The three designs stay here for reference. They are three designs for the live app's 5-card section picker (SectionPicker.tsx), asked for on 2026-10-11. The pick will be built into the live app. All three keep what the usability study found works (the cards say what they do), and fix what it found missing: each door is named by its title alone for screen readers, the simulator gets a way in, and there is a source link. They use the owner's own backdrop and raid art, real counts from src/, and no 3D, so they can go straight into the app. "Import your character" really works here: it reads the addon's export and opens the planner wearing it.

Loading preview…
PICKED

Front door A · Doors with a glimpse

The cards stay, each showing a real glimpse of what's behind it: the recommended set's icons, an example raid group, the top tier, the raids' own art, the professions. Character Planner is the big default door, with the simulator and the import beside it.

Open front door A
Loading preview…
GOAL LINES MERGED IN

Front door B · What are you here to do?

Goal first, since the goal chose the first click in the usability study: gear my character, simulate my DPS, plan a raid, see where my spec stands, find what drops where, level a profession, or bring my character from the game. Each names the section it opens.

Open front door B
Loading preview…
NOT PICKED

Front door C · Game menu

Like a game's main menu over the backdrop: a rail of big entries on the left, and a large preview on the right that follows the entry you point at or move to with the arrow keys, with "Continue as your character" for the import.

Open front door C
Step 2 · Simulation · decided 2026-10-11

Simulation: what to do next, on the real model

The owner picked C, guidance first (stat priority, then the best upgrades, then the estimate with how far to trust it), with A's damage-source table and breakdown under the estimate. That is now the Simulation tab above. B, the workbench, was not picked. The three designs stay here for reference. They are three designs for the Simulation tab. All three run the live app's own simulator in the page (bundled from src/) on the Character Planner's character, so every number is the app's: checked against it, they give the same estimate to the decimal. They compare it with what Fury warriors actually average (2,053 DPS, archon.gg). Building them found a bug in the live app's upgrade finder: it scored a two-hander with the off hand still equipped, so it promised a gain that equipping took away. That is fixed in the app.

Loading preview…
TABLE MERGED IN

Simulation A · The log

Press Run and the result reads like a Warcraft Logs report: the estimate against what Fury warriors average, the damage sources as a table with bars, how the number was computed, and what it misses for you. Stat priority and the upgrade finder sit in tabs underneath.

Open Simulation A
Loading preview…
NOT PICKED

Simulation B · The workbench

For trying things: your character is the baseline; switch buffs and debuffs, pick consumables or try the finder's upgrades on a copy, and the model re-runs on every change with the difference in DPS, % and per damage source. Keep what you like on the planner.

Open Simulation B
Loading preview…
PICKED

Simulation C · What to do next

Guidance first: your stat priority from the real weights and your best upgrades by real DPS gain, with Equip. Then the estimate, with a panel on how far to trust it: every DPS spec's best case by this model against what players average.

Open Simulation C
Step 2 · Character Planner · Build · decided 2026-10-10

Build: the share card, with a read-first import

The owner picked A, the share card, with C's "What came in" report on its paste box: reading a paste changes nothing, the report shows what came in slot by slot and asks the spec when the talents can't say, and only "Load into the planner" wears it. That is now the Build tab of the Character Planner above. B, the character select, was not picked. The three designs stay here for reference. They are three designs for the Build sub-tab, each in the whole planner. All three use the live app's own build format: the share link opens the same character in the live app (checked against it), the build text pastes back in, and the in-game addon's /pdexport string is read the way the app reads it. This prototype only carries Wowhead's Fury Warrior list, so anything else is reported, never guessed. Nothing is saved automatically; named builds stay in your browser.

Loading preview…
PICKED

Build A · Share card

The build you're about to share comes first, as a card: slots filled, item level, talents, hit against the cap, buffs, set pieces and the gear's icons. Then the link, Share… and the build text, named saves, and one box to load a link, build text or the addon's export.

Open Build A
Loading preview…
NOT PICKED

Build B · Character select

Like the game's character select: your builds in a column (the one in the planner now, then every saved one), the selected one beside it with a paperdoll of its gear, and Load, Save over, Share and Delete. A paste becomes a new entry without touching the planner.

Open Build B
Loading preview…
REPORT MERGED IN

Build C · Bring your character in

Paste-first: the addon's export, a link or build text goes in one big box. Reading it changes nothing; a report shows what came in slot by slot and asks the spec when the talents can't say. Only "Load into the planner" wears it. Share and save sit to the side.

Open Build C
Step 2 · Character Planner · Ranked Gear · decided 2026-10-10

Ranked Gear: the guide slot by slot, and where it drops

The owner picked A, Wowhead's order slot by slot as the game's tooltips, with C as a second view, "Where it drops", switched the way the Gear tab switches to its checklist. That is now the Ranked Gear tab of the Character Planner above. B was left out: its order rests on illustrative weights, which can't price a trinket's proc, and the Simulation tab already ranks swaps with the simulator. The three designs stay here for reference. They are three designs for the Ranked Gear sub-tab, each in the whole planner, on Wowhead's real Fury Warrior Phase 2 list: 57 places over 15 lists, 56 different items. All three read the Gear tab's character, so what you wear is always marked correctly, and Equip changes the Gear tab too. On a fresh planner you wear the top pick everywhere, so B and C offer the part-geared example to show them working.

Loading preview…
PICKED

Ranked Gear A · The guide, slot by slot

Pick a slot from your gear; its ranked items stand in Wowhead's order as the game's tooltips, with the guide's note (Best, Great, P1 BiS), where they drop, the gems and enchant Wowhead uses, and Equip. Rings and trinkets share one list, and a unique one can't go in twice.

Open Ranked Gear A
Loading preview…
NOT PICKED

Ranked Gear B · What each one does for you

Every ranked item you don't wear in one list, sorted by what it would do for your character, like the simulator's Upgrade Finder: what it replaces, the stats you trade, your hit against the cap, and Compare's example score. Filter to one slot.

Open Ranked Gear B
Loading preview…
VIEW MERGED IN

Ranked Gear C · Where to get it

The same items grouped by where they drop, for planning a raid night: Serpentshrine Cavern and Tempest Keep boss by boss in kill order, then last tier's raids, world bosses, crafting and the rest. What you wear is ticked, upgrades are tagged, and "Only upgrades" hides the rest.

Open Ranked Gear C
Step 2 · Character Planner · Buffs · decided 2026-10-09

Buffs: from your raid, as icons

The owner picked C, buffs filled in from your raid and seat, shown with A's clickable icons. That is now the Buffs tab of the Character Planner above. The three designs stay here for reference. All three are ways to set up what the raid gives you, each in the whole planner, on the live app's real buffs, boss debuffs and consumables, with their icons. All three let you assign each Paladin a Blessing, follow the flask-or-elixirs rule, and move the stat bar's hit cap: Improved Faerie Fire takes it from 95 to 48 rating. Heroism counts raid-wide, as on Anniversary realms, and Shamans bring totems by spec.

Loading preview…
ICONS MERGED IN

Buffs A · Buff bar

The game's buff row: raid buffs and boss debuffs as icons you click on and off, lit or greyed, with the class colour of whoever brings them. A row of Paladins with their Blessings, and four consumable slots that open a chooser.

Open Buffs A
Loading preview…
NOT PICKED

Buffs B · What it adds up to

Switches on the left; on the right a running total of what the setup gives you: attack power, crit, haste, the boss's armor (7,700 → 3,690) and the hit cap. What the simulator doesn't count is listed with the reason.

Open Buffs B
Loading preview…
PICKED

Buffs C · From your raid

Pick the raid (your Raid Composition roster, an example 25-man or 10-man, or just you) and your seat; every buff says who brings it or what's missing. The raid's own Paladins get Blessings to give.

Open Buffs C
Step 2 · Character Planner · Talents · decided 2026-10-09

Talents: the talent window, with a fix list

The owner picked A, the game's talent window, with C's "What's off" list under it: each broken rule with a one-press fix or a “show where”. That is now the Talents tab of the Character Planner above. All three designs use the real Warrior trees and talent icons with the game's rules. They open on the wowsims Fury preset as stored, which skips Enrage and the filler points, so it breaks three rules and they say so. Precision now sets the stat bar's hit cap: 142 rating without it, 95 at 3/3. The three designs stay here for reference.

Loading preview…
PICKED

Talents A · Talent window

The game's talent frame: all three trees side by side (one at a time on a phone), each on its own dark ground, with gold, green and grey talents, arrows from each prerequisite and game-style tooltips. Click learns, right-click or − unlearns.

Open Talents A
Loading preview…
NOT PICKED

Talents B · What it gives you

One tree at a time beside a running list of what your points do (+5% crit, +25% off-hand damage...), marked simulated or not, with the hit cap against your gear. The line a change moves lights up.

Open Talents B
Loading preview…
FIX LIST MERGED IN

Talents C · Against the preset

Your build laid over the Fury or Arms preset, with the preset's rank on each talent. Below: what breaks the rules, each with a one-press fix or a “show where”, and every difference from the preset with Match.

Open Talents C
Step 2 · Character Planner · Compare · decided 2026-10-09

Compare: side-by-side tooltips, with a summary

The owner picked A, the in-game side-by-side tooltips, with B's one-sentence summary of the trade on top. That is now the Compare tab of the Character Planner above. It compares against the gear in the Gear tab, and equipping from it updates the Gear tab. The three designs stay here for reference.

Loading preview…
PICKED

Compare A · Side-by-side tooltips

The in-game shift-compare: your item's tooltip next to the other one, then each stat change in green or red and what the swap does to the hit cap. Pick the other item from an icon strip of the slot's ranked list.

Open Compare A
Loading preview…
SUMMARY MERGED IN

Compare B · Change chart

One bar per stat, gains to the right and losses to the left, with a one-sentence summary of the trade and a gauge showing your hit before and after against the cap (142 on this page, which has no talents).

Open Compare B
Loading preview…
NOT PICKED

Compare C · Shortlist table

Every ranked item for the slot in one table against what you wear: stat changes, hit after the swap and an example score. Pin any two for a head-to-head underneath.

Open Compare C
Step 2 · Character Planner · Gear · decided 2026-10-09

Gear: the character sheet, with the checklist

The owner picked B, the character sheet, with C's checklist as a second view, "What's left". Together they are now the Gear tab of the Character Planner above, sharing one character, so a fix made in the checklist shows on the sheet. The three designs stay here for reference. Each is the whole planner with only its Gear tab, on real Phase 2 data and the item icons the app already ships.

Loading preview…
NOT PICKED

Gear A · List and side pane

Two columns of slots with icon, item level, enchant, gems and rank. Click a slot and a pane opens beside the list with that slot's ranked items to click, its enchants and its gems. The closest to the live app.

Open Gear A
Loading preview…
PICKED

Gear B · Character sheet

Laid out like the in-game character window: armour on the left, the rest on the right, weapons along the bottom, the gear's stats in the middle. Hover for a game-style tooltip; click to swap from a flyout of icons.

Open Gear B
Loading preview…
MERGED IN

Gear C · Upgrade checklist

What's done and what's left: every slot marked best in slot, upgrade (and which boss drops it), missing enchant or empty socket, each with a one-press fix. 'Where it drops' groups the upgrades by raid and boss.

Open Gear C
Step 2 · tried and dropped

Designs that weren't picked

Kept for reference. Raid Composition design A, the Terrace of Light, won on 2026-10-07 for its table and became the tab above, now dark like the rest. Its third design, C (Arcane Tactical Board), was dropped before it was built. On 2026-10-05 the owner dropped the Dark Portal Home pages to keep Home's original crystal look; of the three, B (The Approach) was the favourite. These pages still have the old full-screen curtain between tabs, which the current tabs no longer use.

Loading preview…
NOT PICKED

Raid Composition B · Hellfire War Camp

The same planning table as A, on a torchlit iron muster board, with the picker opening inside each group. A's dialog, one-row seat buttons and whole-seat move targets were preferred.

Open Raid Composition B
Loading preview…
DROPPED

Home A · Through the Portal

The portal fills the screen inside our own stone arch; scrolling pushes the camera toward the fel-green gateway.

Open Home A
Loading preview…
DROPPED

Home B · The Approach

A stone causeway with burning braziers leads to the portal on the horizon; the six tabs are carved stone tablets. The favourite of the three.

Open Home B
Loading preview…
DROPPED

Home C · Nether Window

Text on the left, the portal as a window on the right; hovering a tab card shows that tab's world inside the portal.

Open Home C
Round 4 · the chosen direction

Motion + 3D Portal

The 3D Portal's layout and live Serpentshrine scene, with the Motion Portal's animation, aimed at the planner's real job: gearing a Fury Warrior for Phase 2. The tab-by-tab prototypes are built in this style.

Loading preview…
R4

Motion + 3D · Portal

Pinned scroll story with the camera sinking toward the water, a self-drawing data timeline, Flip filters that rebuild the 3D tier shelves, and a curtain wipe that dives through the water into the planner.

Open Motion + 3D Portal
Round 3 · 6 concepts

Immersive 3D, motion, and neumorphism, pushed hard

Three styles taken as far as they go, each built on the Launcher and on the Portal. (The Hybrid versions were dropped after review.) The 3D pieces run live WebGL scenes; give them a moment to load.

Round 2 · 12 variants

Launcher and Portal in six styles

Directions 05 and 08 were picked, then each was redone in six visual styles: minimalism, skeuomorphism, glassmorphism, neo-brutalism, Bauhaus, and motion. Same structure and data; only the visual language changes.

05 · Launcher

08 · Portal

Round 1 · 10 directions

The ten starting directions