Navigation exploration

Eight ways to navigate three levels.

Same nav tree, same data, eight different ideas. Groups and sections only organise; items are the only thing that navigates. Every concept is a single HTML file you can open, click through and resize down to mobile.

Compare in pickerFlip through all 8 in one screen with the ui.sh picker toolbar.

The model

Section Group · Data Directoryno navigation

Section · Geography Datano navigation

Item · Blocknavigates → /block

Page + filter exploration

Student Records, with room for the records.

Filters move from an always-open form into a Vercel-style “Add Filter” menu with chips. The KPIs, header and actions fold into one or two rows. Nothing is removed: every filter, KPI, action and table control from today’s page is still there, and the filters really work on 1,240 sample students.

Compare in pickerBefore + 4 concepts, switchable from one toolbar. Each one has its own phone layout: tap “Mobile preview”.

Current Student Records page: filter form and KPI cards push the table down to five visible rows — **Before**~520px before the first row · 5 rows visible

Whole-flow exploration

Content Library, with an approval step built in.

Three complete flows, not three skins: grid → quick look → item page → upload → AI processing → review → publish. Grid is the primary view (list is a toggle). The side panel is a quick look only; every item has its own page with the full detail, review form and history. Adds In review and Changes requested states, role-aware approval (admins may self-approve, teachers wait for a reviewer), and upload without leaving the list. Same 132 sample items in all three; the actions really change state.

Grid dense tiles · list toggleQuick look side panel or stripItem page details, lessons, tags, historyUpload single or bulk · 5 AI stepsReview approve · request changes · roles

Compare in pickerCurrent page (both views) + A, B, C in one toolbar. Every concept has a phone layout: tap “Mobile preview”.

Current Content Library, list view: page header, full-width tabs, then a table paged at 10 rows — **Before**~330px before the first row · 10 rows per page · no review state