From 7e32d52456fdaf461a90bd2f2de4add1ba729d42 Mon Sep 17 00:00:00 2001 From: Daniel Maksymilian Syrnicki Date: Fri, 6 Mar 2026 10:54:39 +0100 Subject: [PATCH] Add installer wireframe docs from Robert's Proksi UX sketches 4-screen wizard flow: welcome/account setup, drive selection with auto-setup, per-device purpose assignment, network/VPN config. Accessed via http://proksi.local from a headless live USB boot. Co-Authored-By: Claude Opus 4.6 --- docs/installer-wireframes.md | 81 ++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 docs/installer-wireframes.md diff --git a/docs/installer-wireframes.md b/docs/installer-wireframes.md new file mode 100644 index 0000000..d11b50e --- /dev/null +++ b/docs/installer-wireframes.md @@ -0,0 +1,81 @@ +# Installer Wireframes (Proksi UX) + +Robert's wireframe sketches for the installer wizard UI. + +**Source:** Hand-drawn mockup shared 2026-03-06 + +## Flow Overview + +1. User boots from USB into a **headless live image** +2. Opens browser, navigates to **http://proksi.local** +3. Walks through a multi-step wizard (screens below) + +--- + +## Screen 1: Hello (Welcome / Account Setup) + +| Field | Notes | +|-------|-------| +| Hostname | Name for the server | +| Username | Info tooltip explaining what this is for | +| Password | | +| Password (confirm) | | +| Backend on/off | Toggle to enable/disable backend | +| Backend address | Only relevant if backend is on | +| Language | Language selector | + +Navigation: **Next** button (bottom right) + +--- + +## Screen 2: Device Setting (Drive Selection) + +Shows detected drives as a selectable list with radio buttons. + +| Element | Notes | +|---------|-------| +| Boot drive | Select which drive to install the OS on (info tooltip) | +| Drive list | Radio buttons for each detected drive | +| Other drives | Remaining drives used as storage | +| Auto setup | One-click automatic drive assignment | + +**Auto setup logic:** +- Tests drive speeds +- Fastest drive becomes boot drive +- Remaining drives become LVM storage + +Navigation: **Back** and **Next** buttons + +--- + +## Screen 3: Device Setting (Per-Device Purpose) + +Repeats for each additional connected device. + +> "We see you have a [device] connected. What is it for?" + +- Radio button options for device purpose +- **"I don't know" (default)** — safe fallback if user is unsure + +Navigation: **Back** button, **Next** button (repeats for each device) + +--- + +## Screen 4: Connections (Network) + +| Field | Notes | +|-------|-------| +| Network settings | IP configuration (DHCP/static) | +| Connect to a VPN | Optional VPN setup | + +*(Wireframe was cut off — likely continues with more options or a summary/confirm screen)* + +--- + +## Design Notes + +- Wizard-style step-by-step flow with back/forward navigation +- Info tooltips (i icons) on fields that need explanation +- Auto setup reduces decisions for beginners +- "I don't know" defaults keep things safe for non-technical users +- Working title for the installer UI: **Proksi**