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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.