Enterprise grid and workspace
Problem: large operational queues need density without losing decision context.
Contract: tabs, filters, status context, density controls, guided actions and resilient data states.
Implemented synthetic screenDesign technology portfolio
From complex workflow to reusable component.
A code-aware, AI-native product practice for turning regulated enterprise complexity into consistent interfaces, buildable component contracts and evidence-based delivery.
Practice definition
Design that survives implementation.
My focus is not visual decoration. It is the system underneath the interface: conceptual models, reusable primitives, data behaviour, operational states, permissions and engineering trade-offs.
The AFC practice uses written product and UX decisions, implementation specifications, shared components and browser validation as its governing artefacts. Figma may support exploration where useful, but this portfolio does not present a Figma library as the source of truth when the implemented system is specification-led and code-led.
I lead product and UX direction, define component behaviour and acceptance boundaries, and work with engineering to ensure the implementation remains usable, secure, supportable and consistent.
Component evidence
Reusable patterns for operational products.
Each pattern is shown as a product and engineering contract: why it exists, how it behaves and what evidence demonstrates implementation.
KPI strip and recommended work
Problem: dashboards often mix passive metrics with actionable work.
Contract: separate operational state from recommended action, with explicit priority and drill-through behaviour.
Reusable information hierarchy
Tabs, context and sticky actions
Problem: complex cases require depth while keeping high-frequency actions available.
Contract: tabs for detail, contextual controls for focus and visible actions with authority and validation boundaries.
Shared interaction pattern
Loading, empty and recovery states
Problem: operational users need to know whether there is no work, delayed data or a failed request.
Contract: preserve structure, explain state and provide a safe recovery path without overstating system status.
Resilient workflow designDesign-to-engineering workflow
AI accelerates the loop; people own the decisions.
The workflow connects domain modelling, UX decisions, component selection, implementation, review and browser evidence.
- Product leadership: problem, scope, workflow, decision rights and acceptance criteria.
- Engineering: implementation quality, security, data behaviour, maintainability and tests.
- AI systems: bounded reasoning, code assistance, validation support and documentation.
- Human authority: review, rejection, caveats and release decisions.
Code-aware product decisions
Designing for what can actually be built and operated.
Data behaviour
Pagination, filtering, loading, error recovery, long text, messy records and bounded queries are considered in the interface contract.
Access and authority
Role-based access, tenant isolation, action permissions and audit consequences shape what users can see and do.
Component reuse
Shared primitives reduce divergence across product streams while allowing domain-specific language and decisions.
Browser evidence
Implementation is validated in the running application, including operational states and primary workflows, rather than accepted from static specification alone.
3Active AFC product streams
5Specialised front-end applications
1Shared platform and API host
HumanAcceptance and release authority
These are codebase-scope measures, not customer-adoption claims. The portfolio demonstrates how common design and delivery rules are applied across multiple product surfaces while customer-sensitive implementation details remain private.
Need a leader who can connect product systems, AI and implementation reality?
This practice combines systems thinking, reusable product design, engineering fluency and explicit human judgement.