This page is the master overview of DomiDo's user-experience and user-interface design. DomiDo is the Avvyland Limited Progressive Web App (PWA) that turns 3D models and Artificial Intelligence (AI)-generated text descriptions into purchasable kits of universal interlocking outdoor blocks. The baseline establishes what users see and how they interact with every screen, flow, and state. It records the scope of the design (fifty-four screens, seven end-to-end flows, six personas, ten style concepts narrowed to one), the design choices that emerged from that scope, the cognitive picture of the hardest tasks, the pipeline and gallery surfaces that anchor everything else, the examination findings that the design now closes, and the phased implementation plan that carries the design into the product.
The design baseline covers fifty-four screens — forty-one customer-facing screens and thirteen admin dashboard screens — each specified with its content hierarchy, navigation relationships, and accessibility requirements. Every screen has both a portrait (mobile) wireframe and a landscape (tablet or desktop) wireframe. Seven user flows are mapped end to end: upload-mode design (a customer uploads their own 3D file), AI-mode design (a customer describes what they want in text), catalogue purchase, gallery browse and purchase, returns, admin manufacturing and reorder, and the pre-order flow for the early launch phase.
Six personas drive the design. Each has a deep profile covering their mental model, comfort with technology, decision-making psychology, accessibility needs, emotional journey, and Jobs-to-be-Done. The catalogue of user stories — across thirteen epics — applies the MoSCoW prioritisation (Must, Should, Could, Won't) so that the must-have set defines the minimum viable product and the should-have set defines the launch quality bar. The baseline also includes ten hierarchical task analyses with per-step cognitive load, six competitive user-experience analyses yielding twenty adoptable patterns, ten user-interface style concepts evaluated against the personas, and one design-system specification with full colour tokens, typography scale, spacing system, and component library.
The visual style is a hybrid that takes the foundation of Garden Modern, the warmth of Organic Flow, and a single premium accent from British Heritage. The result is a three-note colour signature distinctive in the marketplace: sage green primary, terracotta accent, regency gold for premium tiers, on a warm-white background. The typography pairs the Inter typeface for headings with the system body fonts so that the interface stays legible across the twenty-five-to-seventy age demographic without paying a font-loading cost.
The customer app uses a five-tab bottom bar — Home, Create, Gallery, Cart, Account — following iOS and Android conventions. Each tab owns its own navigation stack. The admin dashboard uses a left sidebar drawer that collapses to a hamburger menu on mobile. The platform is built on React Native and React Three Fiber so that a single codebase serves iOS, Android, and the web, with a sixty-frame-per-second 3D viewer on mid-range hardware. The layout strategy is mobile-first with three primary responsive breakpoints. Light mode is the default because the product is used outdoors in sunlight; dark mode is available via system preference detection or a manual override. A four-pixel base spacing unit underpins the whole grid.
The six personas are spread across ages, technology comfort, and revenue weight. Garden-Proud Geoff is fifty-five to seventy, low-to-medium technology comfort, primarily uses the AI mode by writing a text description, and treats design as a conversation with a craftsman; he drives roughly a quarter of revenue. Design-Savvy Sophie is twenty-eight to thirty-eight, high comfort, uses the AI mode with reference images, and treats design as aesthetic curation. Builder Ben is thirty-five to fifty, medium comfort, primarily uses the upload mode, and treats the app as a professional tool. Creative Clare is twenty-five to forty, very high comfort, uses upload mode, and treats design as self-expression. Event Planner Emma is twenty-eight to forty-five, medium-high comfort, uses AI mode or the catalogue, and treats design as a client deliverable. Aspirational Alex is twenty-five to thirty-five, high comfort, primarily browses the catalogue and the gallery, and treats design as social currency.
Each persona pulls on a different part of the design. Geoff requires guided interactions, simple gestures (tap, scroll, pinch-to-zoom), explicit tap-button alternatives to multi-finger gestures, and human-readable names for every pipeline stage. Sophie evaluates every screen for share-worthiness — lifestyle photography, smooth viewer performance, and visually compelling share previews matter to her. Ben needs professional credibility: specifications, dimensions, and a clean upload flow. Alex needs social validation, affordability signals, and a fast path from gallery to purchase. Loss aversion is highest in Geoff and lowest in Alex, which is why price comparisons to traditional alternatives sit above the fold on the Design Review and Product Detail screens.
The AI Design flow has the highest cognitive load of any customer-facing task. Writing a prompt without guidance peaks at the top of the load scale because translating a visual mental image into a description an AI system can interpret is a skill none of the target personas have practised. The design responds with prompt templates, example structures, reference image upload, and iterative refinement. The upload mode peaks during model-quality evaluation in the 3D viewer. The 3D viewer itself is a hotspot for first-time users; a gesture-guide overlay teaches the controls on first interaction.
A twelve-stage pipeline runs every design: Import, Repair, Voxelise, Align, Blockify, Validate, Fasteners, Assembly, Bill of Materials, Instructions, Export, and final packaging. Both creation modes converge on this pipeline. Server-Sent Events stream the per-stage progress to the customer's processing screen, and named stages replace any technical jargon. The gallery is a content surface where customers and designers publish their own work, browse, search by text, voice, and image, comment, follow, and add to collections. Gallery designs can be purchased without leaving the tab.
Six independent examinations of the wireframes plus five usability evaluations identified two hundred and eighty-nine unique findings. All have been resolved through forty-nine fix actions across five phases. The most important categories run through flow continuity, information hierarchy, accessibility, consistency, error and empty states, mobile usability, heuristic evaluation, cognitive walkthrough, WCAG compliance, performance perception, and error prevention.
Every flow now has a forward path, a back path, an error path, and a cross-flow exit; new screens were added for moderation rejection, pre-order card expiry, gallery empty state, gallery publish, voice search, and image search, and the AI-mode resume path is explicit. Prices and purchase calls-to-action sit above the fold on every revenue-critical screen, sticky calls-to-action are applied on Design Review and Gallery Detail, and the Design Review viewer is reduced to forty per cent of the viewport on mobile. Every 3D viewer has keyboard controls and a documented Tab-in, Escape-out focus pattern; colour-only indicators have been replaced with colour-plus-icon-plus-text triple coding; admin charts have data-table alternatives; the home carousel has a pause control; focus indicators are specified for every interactive element. Every purchase action uses the single label "Add to Cart — [price]" and the single status-badge palette (green = final positive, blue = active, amber = waiting, red = negative, purple = social). Every screen has its loading, empty, error, and offline states specified, including the assembly viewer's first-time load and the gallery's launch-day empty state. Thumb-zone violations are resolved — the Assembly Viewer step counter sits at the bottom of the screen, and gesture boundaries inside the 3D viewer use a touch-action rule that prevents page scroll from competing with viewer orbit. Every Jakob Nielsen heuristic is satisfied at the specification level, provider names are replaced with outcome-based labels, and 3D viewer gesture guides appear on first interaction. The dominant cognitive-walkthrough pattern — users seeing an action but not associating it with its effect — is resolved through clearer labels, explanatory banners, and context-appropriate help. Every applicable Level A and Level AA criterion passes at the specification level. AI-generation, 3D-generation, and 3D-viewer-load wait states all have staged animations, elapsed-time counters, and estimated ranges. A credit-sufficiency gate sits at the entry to the AI mode, Stripe checkout transitions are specified including phantom-payment recovery, and double-submission prevention is universal.
Implementation is staged across Sprint Zero (resolve the must-fix items before development, finalise design tokens) followed by Sprint One (core flows), Sprint Two (gallery and social), Sprint Three (account and admin), and Sprint Four (accessibility and performance hardening). Each sprint has explicit deliverables and exit criteria.
The design baseline passes every quality gate: research completeness, story coverage, wireframe coverage, flow coverage, examination thoroughness, visual direction by quantitative scoring, design-system token export, accessibility baseline, usability validation, and a complete issue register.