furtka/docs/installer-wireframes.md
Daniel Maksymilian Syrnicki 7e32d52456 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 <noreply@anthropic.com>
2026-03-06 10:54:39 +01:00

2.1 KiB

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