The Problem
The imouto explorer looked visually disconnected from the rest of the motivka website. The italic serif heading, a prominent version badge in the nav, and limited filtering (just keyword search and a country toggle) created a flat experience. With 24 of 39 occupations clustering between 40 and 55 percent exposure, the uniform card design made the explorer feel like an unsorted list rather than an insightful data tool. Visitors could not quickly scan which occupations were most impacted by AI, and there was no way to filter by industry or exposure level.
What I Built
Data layer and types (Phase 20)
I started with the foundation: IndustryGroup and ScoreBracket types, a multi-tag industry mapping function derived from SOC/ANZSCO code prefixes (about 7 broader groups for the current 39-occupation dataset), and score bracket helpers that categorise occupations into four tiers -- High (60%+), Moderate (40-59%), Lower (20-39%), and Minimal (below 20%). Each bracket has its own colour token.
Heading, nav, and card redesign (Phase 21)
I removed the version chip from the NavBar (the version stays in the footer where it belongs). The old italic serif hero heading was replaced with a descriptive headline matching motivka's PageHeader pattern. The occupation card got a full rework: a large score number on the left in monospace at 1.75rem, a 4px left accent border coloured by score bracket, and an 8px proportion bar. The score is now scannable at a glance without reading task counts.
Filter toolbar (Phase 22)
I built three new filter components. The IndustryFilter is a dropdown that supports multi-tagged occupations -- Data Scientists appear under both Technology and Finance. The ScoreBracketFilter provides bracket toggle buttons (60+, 40-60, 20-40, below 20, All). The SortControl offers score descending, score ascending, and alphabetical modes. These sit in a two-row layout: search on Row 1, country plus industry plus bracket plus sort on Row 2.
Score bracket sections (Phase 23)
Filtered occupations are now grouped under labelled section headers -- "High Exposure (60%+)" with a count badge, using the bracket's accent colour. In score sort modes the sections are visible; in alphabetical mode they disappear entirely and you get a flat A-Z list. All filters compose as AND: an occupation must match the selected country AND industry AND bracket AND search query to appear.
Motivka embed sync (Phase 24)
Every change was ported to the motivka embed. Updated types, data helpers, and styles went into lib/imouto/. The new filter components and redesigned card were copied to lib/imouto/components/. The motivka explorer page and layout were updated to match the standalone exactly.
Triage and documentation (Phases 25-26)
Triage found nothing to fix -- zero failures across all 17 tasks. Documentation was refreshed with the new component architecture and all decisions (D-045 through D-055) were verified.
What is Next
The detail page and compare page have not been updated to match the new visual language -- those are separate follow-up initiatives. The industry groups are intentionally broad (7 groups for 39 occupations) and will split when the dataset grows past 60 occupations. A distribution histogram at the top of the page and a grid/table view toggle are both deferred.