¶ Design and user experience
This section is the design picture of DomiDo: how the Progressive Web App looks, how users move through it, how it adapts across phones, tablets, and desktops, how accessible it is at the specification level, and how every screen is laid out and prioritised. DomiDo lets people turn a 3D model or an Artificial Intelligence (AI) prompt into a kit of universal interlocking outdoor blocks, browse and buy from a community gallery, and follow an order from purchase through delivery and assembly. The platform sells universal blocks and fasteners only; every construction shown in the gallery is user-generated content from an upload-mode design, an AI-mode design, or a published designer's work. There is no DomiDo-owned catalogue of finished products — the catalogue surfaces use-case categories the block system enables, not hero products. The pages collected below are written for a newcomer: each one expands abbreviations on first mention, states the present design as fact, and links to its neighbours so a reader can traverse the section without having to guess where related material lives.
- Baseline report — the consolidated overview of the design baseline: scope, key decisions, findings resolved, and the path to launch.
- Information architecture — the complete screen catalogue, navigation model, deep-link scheme, and content hierarchies for the customer app and the admin dashboard.
- User flows — end-to-end flow diagrams for upload-mode design, AI-mode design, catalogue purchase, gallery browse and purchase, returns, manufacturing, and pre-orders.
- Navigation patterns — tab bar, stack navigation per tab, modal presentations, responsive breakpoints, and the admin sidebar.
- Design system — colour tokens, typography, spacing, shadows, motion, and the component library.
- Interaction patterns — gesture vocabulary, touch feedback, transitions, modals, toasts, and loading patterns.
- Responsive behaviour — breakpoint definitions, layout adaptation rules, and the responsive behaviour of the 3D viewer.
- Heuristic evaluation — Nielsen heuristics applied to every screen, with severity ratings and resolution for every finding.
- Cognitive walkthrough — a step-by-step trace of every flow through the eyes of the least confident persona.
- Accessibility — Web Content Accessibility Guidelines (WCAG) 2.1 AA compliance, with success-criterion-by-success-criterion evidence.
- Performance perception — the perceived-performance design of every wait state, from upload through AI generation to gallery feed.
- Error and recovery — pre-validation, confirmation, undo, auto-save, network resilience, timeouts, and concurrent-operation safety.
- Flow continuity — end-to-end flow walkthroughs that confirm every screen has a forward path, a back path, an error path, and a cross-flow exit.
- Information hierarchy — per-screen evaluation of content priority, pricing visibility, and what sits above the fold.
- Consistency — cross-screen pattern consistency for navigation, buttons, cards, badges, loading states, and destructive actions.
- Mobile usability — thumb-zone analysis, gesture conflict resolution, keyboard interaction, and touch-target compliance.
- Wireframes — the master index of all wireframes by screen and orientation.
- Branding — the visual identity: ten concepts considered, persona-weighted scoring, and the winning hybrid direction.