This page defines the information architecture of the DomiDo platform: every screen, the navigation that connects them, the deep links that resolve into them, and the content priority on each one. It is the bridge between user-experience research and wireframe design — anyone reading this page alongside a screen name should know what content the screen carries, what comes before and after it, and which user stories it satisfies. DomiDo has two navigation domains. The customer-facing application is a Progressive Web App (PWA) built on React Native rendered to the web; the admin dashboard is a separate surface for support, manufacturing, finance, and operations staff. Both run on the same backend, but each has its own navigation model.
The customer app uses a persistent bottom tab bar with five tabs. The bar appears on every primary screen and is hidden only when a full-screen experience needs the entire viewport: the Assembly Viewer, the Stripe checkout session, the onboarding carousel, the AI-mode projection workflow, the AI-mode 3D preview, and the full-screen 3D viewer.
| Tab | Label | Default screen | Maximum stack depth |
|---|---|---|---|
| 1 | Home | Home Dashboard | 3 |
| 2 | Create | Mode Selector | 8 |
| 3 | Gallery | Gallery Browse | 4 |
| 4 | Cart | Cart | 2 |
| 5 | Account | Account Dashboard | 5 |
Tapping the active tab scrolls to top and pops the stack to the tab's root. The Cart tab carries a badge showing the item count (one to ninety-nine, with "99+" for overflow). The Account tab carries an unread-notification dot for order updates, comment replies, and similar events. Tab labels are always visible — there is no icon-only mode — because the older personas need explicit labels. On phones and small tablets the bar sits at the bottom of the viewport; on tablets in landscape it converts to a left side rail seventy-two pixels wide that collapses to forty-eight pixels of icon-only; on wide desktops a permanent two-hundred-and-forty-pixel side rail shows the icon and the full label without collapsing.
Some screens are accessible without sign-in. The unrestricted set is Home, Catalogue (grid and product detail), Gallery Browse, Gallery Search, Gallery Design Detail in read-only mode, Designer Profile, Sign In, Onboarding, and the Assembly Viewer when reached via a QR code on a physical kit. Every Create screen, the Cart, every Account screen, every gallery interaction (like, comment, follow, save to collection), and every Admin screen requires authentication. Unauthenticated access to a gated screen redirects to Sign In with a return-to parameter that brings the user back to the original destination after authentication. Several actions use modal overlays rather than stack pushes: the system share sheet, the bottom-sheet collection picker on a design, the bottom-sheet report form, the filter panel, the PWA install prompt, the pre-order cancellation confirmation, the typed-confirmation account deletion dialog, the full-screen return-request form, and the step-number jumper inside the Assembly Viewer.
The application has fifty-four screens overall — forty-one customer screens and thirteen admin screens. The customer screens fall into the following groups.
Home and discovery. The Home Dashboard is the landing screen with hero banners (rotating among use-case categories), three quick-action cards (upload a 3D model, describe your design, browse the catalogue), trending designs from the gallery, and personalisation for returning users — a "Your Activity" section that surfaces in-progress designs, active orders, and pre-orders.
Create flow — upload mode. The Mode Selector chooses between upload and AI modes. Upload mode uses a large drop zone for drag-and-drop or file picker, supports GLB, GLTF, STL, and OBJ formats up to fifty megabytes, and shows tips that reduce upload failure. After upload, the Pipeline Processing screen tracks twelve named stages — Import, Repair, Voxelise, Align, Blockify, Validate, Fasteners, Assembly, Bill of Materials (BOM), Instructions, Export, Package — using Server-Sent Events for real-time per-stage progress. A circular percentage indicator, a segmented stage bar with human-readable labels, an estimated time remaining, and a cancel link complete the screen.
Create flow — AI mode. The AI Prompt screen offers a large text area with prompt suggestions, optional reference image upload for aesthetic intent, and an AI-credit balance and cost breakdown visible before generation. After the prompt, the Image Generation Preview shows the first interpretation. The Projection Workflow is the most complex interaction in the application — the platform needs eight orthogonal views of the design to build an accurate 3D model. The workflow shows a large preview, a two-by-four thumbnail grid tracking progress, per-angle iterate-or-approve controls, and an auto-generate-the-rest action positioned above the fold once the first projection is approved. The 3D Model Generation screen confirms the eight approved projections and selects an outcome-based quality tier (recommended, fast, detailed) — provider infrastructure names are hidden. The 3D Preview screen lets the user inspect the generated 3D model and convert it to blocks through the same pipeline.
Design Review. This screen is the customer's private viewing of their design. A 3D viewer with four view modes (Assembly, Source, Blocks, Fasteners) sits next to a Bill of Materials summary (block count, unique stock-keeping units), an assembly step count, an estimated build time, and the price. On mobile the viewer occupies forty per cent of the viewport and the "Add to Cart — [price]" call-to-action is sticky at the bottom. Re-optimising the design re-queues the pipeline with the user's chosen solver outcome (fast, balanced, best).
Assembly Viewer. A full-screen 3D viewer that drives step-by-step assembly: previous and next controls, play and pause, speed selection (half, single, double), step counter, progress bar, ghost blocks for future steps, and an explode slider. The step counter sits at the bottom of the screen so a user holding a block in one hand can reach it. The tab bar is hidden.
Catalogue. The catalogue shows the use-case categories the platform enables — garden border, raised bed, privacy screen, heat-pump cover, wheelie-bin shelter, and similar. Each card carries an image, a name, a price range, a block count, and a difficulty rating. The product-detail page pairs a 3D preview with parametric size sliders (width, depth, height) that recompute price and block count in real time and an estimated build time.
Cart and checkout. The cart lists items with thumbnails, quantity selectors, and per-item prices, with subtotal, value-added tax, shipping, and total. A promotional-code input sits alongside a full-width "Proceed to Checkout — [total]" call-to-action. After Stripe completes payment, the Order Confirmation screen shows a green checkmark, an order number, an items summary, and an estimated delivery date with a direct link to the Assembly Viewer. The Pre-order Confirmation screen substitutes a blue checkmark and a prominent notice — the card has been verified but will not be charged until the order ships.
Gallery and social. Gallery Browse uses a multi-modal search bar (text, voice, image), curated tabs (Trending, Newest, Most Purchased, Staff Picks), and a masonry grid with social proof (like counts, designer name). Gallery Search Results adds active filter chips, a sort dropdown, and a faceted filter sidebar. Gallery Design Detail pairs a 3D viewer with designer attribution and a follow control; social actions (like, comment, share, save to collection) sit below the viewer and the "Add to Cart — [price]" call-to-action is sticky. The Comments thread supports replies with indentation, AI moderation badges on flagged content, and chronological sort. Designer Profile carries a cover area, an avatar, a bio, statistics (followers, designs, total likes), a follow button, and a portfolio grid. Collections behave like Pinterest-style boards with cover mosaics and visibility badges.
Account. My Designs shows the user's design library with status badges — Processing, Ready, Published, Failed, Ordered, AI In Progress — and a "Resume" path that restores the AI-mode projection workflow at the exact step where the user left off. My Orders separates orders from pre-orders, each with status badges and tracking links. Order Detail uses a vertical timeline stepper (Confirmed, Processing, Shipped, Delivered), tracking, an items section, and "Start Assembly" and "Request Return" controls. Pre-order Management cards show estimated ship dates and the "Card Verified — Not Charged" status; cancellation is one tap with confirmation. Return Request offers item-selection checkboxes, a reason dropdown (change of mind, defective, wrong items, damaged), an optional details text area, and a return-window countdown. Return Status uses a six-step vertical timeline ending in refund. Settings holds the profile, the subscription tier with credit balance, notification toggles, and the General Data Protection Regulation (GDPR) controls (Export My Data, Delete Account). The Subscription screen compares four tiers (Free, Hobby, Pro, Studio) with usage history and the monthly reset date.
Authentication and onboarding. Sign In is minimal — three full-width Open Authorization (OAuth) buttons for Google, Microsoft, and Apple, plus Terms and Privacy links. No password fields exist. Onboarding is a three-step swipe flow with dot indicators, Next, and a Skip link for returning users. The PWA install prompt is a bottom sheet offered at the right moment.
Error and empty states. Pipeline Error shows a warning icon, a stage-specific message, three actionable suggestions (repair mesh, simplify, reduce triangles), "Try Again" and "Upload Different File" controls, and a support link. The "No Designs Yet" empty state offers a friendly illustration, the two creation buttons, and a catalogue fallback link. Additional inline error and empty states cover pipeline failure, network failure, no designs, no orders, no search results, and empty cart.
Screens added during examination resolution. Gallery Publish is a form for sending a design to the gallery (title, description, tags, category, preview, moderation notice). The Gallery Empty State serves launch day with a "Be the first to share" message and seed content. Voice Search is a modal with a pulsing microphone, a waveform visualisation, and a thirty-second timeout. Image Search is a modal with crop controls and visual similarity matching. Moderation Rejection appears on My Designs and offers an appeal link and an "Edit & Resubmit" option. Pre-order Card Expiry warns of an approaching card expiry with a seven-day countdown and an "Update Payment Method" call-to-action.
The admin dashboard runs on a left sidebar drawer that is always visible on desktop and collapses to a hamburger on mobile. A persistent "Back to App" affordance returns the user to the customer surface. The thirteen screens are Overview (four metric cards — Orders Today, Revenue, Pipeline Success, Active Users — a revenue trend, an orders-by-category chart, and a quick alerts section); Orders List (a filterable, searchable order table with status badges, per-row actions, and pagination); Order Detail (customer information, order timeline, tracking, items table, payment summary, manual actions, and a history audit log); Returns Queue (return cards with grading A through D, inspection photos, refund decision controls, and filters by status); Pipeline Monitor (success-rate trend over twenty-four hours and seven days, ninety-fifth percentile latency, queue depth, a per-stage breakdown table, and a failed-jobs panel with retry controls); Revenue Dashboard (monthly revenue, orders, average order value, gross margin, a thirty-day revenue trend, revenue by category, revenue by channel, and a comma-separated-values export); Customer Support (email lookup, a customer three-hundred-and-sixty-degree view with tabbed Orders, Designs, Credits History, Notes, and actions for Grant Credits, Resend Email, Suspend Account); AI Credit Usage (daily spend versus budget threshold, per-provider cost breakdown, and a subscription-tier distribution pie chart); Manufacturing and Inventory (inventory table with stock-keeping unit, stock level, reorder point, and status badges, active purchase orders, demand forecast, a payment calendar, and a Create Purchase Order action); Purchase Order Detail (a lifecycle timeline from Draft through Received, items, manufacturer information, payment tracking, and status updates); Pre-orders (a Phase B threshold progress bar, pre-order count, weekly trend, cancellation rate, per-category demand, and a Phase B activation control gated on operational sign-off); System Health (service status grid for API server, Pipeline Workers, MongoDB, Redis, Stripe, third-party logistics, AI providers, and content delivery network, each with uptime, last check time, an error count, and links to monitoring and error-tracking tools); and Content Moderation (an AI-flagged content table with content type, preview, author, flag reason, and confidence score, approve and reject buttons, suspend-user option, and an audit log).
Every shareable surface has a deep link. The PWA service worker intercepts links matching the patterns below and routes them within the React Navigation stack.
| URL pattern | Target screen | Use case |
|---|---|---|
/ |
Home Dashboard | Direct navigation |
/create, /create/upload, /create/describe |
Mode Selector, Upload, AI Prompt | Direct create entry |
/designs/:id |
Design Review | Private share-preview link |
/designs/:id/assembly |
Assembly Viewer | Direct assembly access |
/build/:code |
Assembly Viewer | QR code on physical kit |
/catalogue and /catalogue/:slug |
Product Grid and Product Detail | Marketing links |
/gallery, /gallery/search?q= |
Gallery Browse, Search Results | Search and discovery deep links |
/gallery/:id |
Design Detail | Social share link |
/designers/:id |
Designer Profile | Profile share |
/orders/:id, /orders/:id/track, /orders/:id/return |
Order Detail and its variants | Email links |
/account/subscription |
Subscription | Upgrade call-to-action |
The architecture states the priority of every block on every screen. On the Home Dashboard, returning users see "Your Activity" before the hero — active orders, in-progress designs, and pre-orders take precedence over marketing. On the Mode Selector, the AI-mode card states the total credit cost (around thirteen credits) so a user with insufficient credits is warned before investing time in the flow. On Design Review, the price and the "Add to Cart — [price]" sticky call-to-action sit above the fold; secondary information (solver selector, re-optimise history, detailed Bill of Materials) collapses into expandable sections. On Gallery Design Detail, the purchase call-to-action sits at the top of the screen, ahead of social actions — the viewer is sticky and the purchase button is too. On the Pre-order Confirmation, the "card not charged" notice is the most prominent element after the confirmation icon, and the same notice appears on Pre-order Management cards.
Every design goes through the same twelve-stage pipeline. The pipeline diagram clarifies how the two modes converge.
The diagram resolves two creation entry points into a single shared pipeline. Upload mode enters the twelve-stage pipeline directly because the customer has already supplied a 3D file. AI mode passes through prompt entry, the eight-projection approval workflow, 3D model generation, and a 3D preview before joining the same pipeline. From the pipeline onwards both paths share the Design Review screen, the Cart, and the Stripe checkout; the only divergence is at payment, where a Phase B order moves into Order Confirmation while a Phase A.5 pre-order moves into Pre-order Confirmation.