Design references and critique snapshot for the portfolio home redesign; impeccable design skill added to devcontainer postCreateCommand on trial. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 KiB
Product
Register
product
Users
Three operator groups, all professionals in a task, none casual visitors:
- Domna internal team — analysts/consultants running assessments and modelling on behalf of landlords. Power users; live in the tool daily.
- Housing-association staff — landlord-side asset and sustainability managers tracking their portfolios' retrofit progress. Domain-expert but not tool-expert; visit weekly.
- Contractors/approvers — external parties with scoped capabilities on specific portfolios; arrive with a narrow job (approve, quote, deliver).
Shared context: desk work, large screens, often alongside spreadsheets and procurement documents. The home page's job is orientation and dispatch — find the right portfolio fast and understand its state at a glance.
Product Purpose
Domna assesses UK housing portfolios for energy retrofit: ingesting property data (bulk uploads, postcode search), modelling retrofit interventions, and reporting outcomes (EPC uplift, CO2/energy savings, valuation impact) against budgets. Success looks like a landlord trusting Domna's numbers enough to commit retrofit budgets against them.
Brand Personality
Hypothesis (user undecided — validate against mockup variants): calm, expert, institutional — quiet confidence appropriate to housing-sector procurement, with measured warmth from the brand tan/brown accents. Brand navy (#14163d) carries identity in small, deliberate doses; the surface stays neutral and legible. Not playful, not loud, never salesy inside the product.
Anti-references
- Generic SaaS admin templates — Bootstrap/AdminLTE dashboards, hero-metric cards, widget walls.
- The current home page — a bare centered grid of identical icon cards with no data, hierarchy, or organisation.
- Over-designed AI mockup output — 2rem-rounded cards, giant soft shadows, decorative gradients, invented data the schema can't supply.
Design Principles
- Show real state, not decoration. Every element on a card earns its place by reflecting actual schema data (status, goal, properties, budget). No invented metrics.
- Orientation before information. The home page dispatches users to the right portfolio; scanability (favourites, folders, search, sort) beats per-card completeness.
- Earned familiarity. Standard affordances done precisely — the tool should disappear into the task for someone fluent in Linear/Stripe-class products.
- Trustworthy numbers. Figures are the product; typography and alignment treat numeric data with more care than any decorative element.
- Consistency over surprise. One component vocabulary across the app; delight lives in moments (empty states, transitions), not pages.
Accessibility & Inclusion
WCAG 2.1 AA: ≥4.5:1 body-text contrast (≥3:1 large text), full keyboard operability, visible focus states, prefers-reduced-motion alternatives for all animation. B2B housing-sector procurement may require conformance evidence.