Product experience design · AI-assisted design engineering

I design the product — then I build it in code.

Not a website designer

I turn vague enterprise requirements into product systems that can be tested. I build working prototypes with real logic and data, not just clickable screens. Six years across an AI startup (acquired by Reddit), B2B enterprise software, and a live consumer brand I designed and shipped myself.

See selected work arch.nadine.mahfoud@gmail.com

Design — tokens

ground#f2f2f3
ink#1d1f20
accent / steel#5980a6
space base4px

Build — ships as designed

/* the same values, in production */
:root {
  --ground: #f2f2f3;
  --ink:    #1d1f20;
  --steel:  #5980a6;
  --space:  4px;
}
.cta {
  background: var(--steel);
  padding: calc(var(--space)*3);
}

When the same person sets the token and writes the CSS, the design ships as designed. The swatches on the left are the variables on the right.

6+

years in product design

4

products owned as sole designer

2 wks

vague brief to demo-ready feature

2

enterprise clients closed on demo

0

lines of custom payment code, one store live

01 · How I work

I understand the problem, make the product decisions, model the system — then build enough to test whether they hold.

systems

I design the system, not just the screen

I map the relationships behind the interface — tenders, lots, requirements, documents, states. Trained as an architect, I model the structure and logic first, so complex products become something users can operate.

prototyping

Prototypes that validate, not just present

I build prototypes with real data, state, and business logic that design, analysts, and engineers can all evaluate. They answer the hard questions early, while change is still cheap.

ai-assisted design engineering

I build with AI, and take over where it runs out

AI-assisted design engineering — I build functional, production-quality prototypes and front-end using Claude Code, Cursor, and Figma MCP, and step in on data models and architecture where AI reasoning runs out.

02 · Selected work

Founder · designed & engineered · live

Tirvela Boutique

Brand · design system · front-end · data pipeline · commercial

A skincare brand launched end-to-end by one designer. I designed the brand and design system, rebuilt the Shopify storefront in Liquid and CSS, wrote a Node pipeline to migrate the catalogue, and shaped the commercial model. WCAG 2.2 AAA, GDPR-compliant, and a legal launch gap solved with settings and one existing app — no custom code.

Shopify HorizonLiquid / CSSNodeDesign systemDTC / B2CAccessibility

Ivory

Cream

Stone

Clay

Taupe

Charcoal

Enterprise B2B · design-to-dev method · closed

AI Design-to-Development Handoff

Process design · design engineering · AI implementation · Design QA

A board-approved pilot I led to fix the most expensive gap in enterprise delivery: moving an approved design into a different production stack without losing behaviour. Instead of handing developers static Figma files, I built a reusable "blueprint" handoff — a coded prototype plus structured behaviour, states, component mappings, phased implementation slices, and acceptance criteria — so a developer could rebuild the feature in production with Claude Code, one reviewable phase at a time. I also authored the main implementation prompts that drove the build. The prototype (React) and production app (Angular) use different toolkits, so the method was designed for reconstruction, not copying.

Blueprint handoffClaude Code promptsDesign QAReact → AngularReusable method
Read the case study →

Enterprise B2B · AI-adjacent · ~2 weeks

Document Analysis & Questionnaires

Research · UX · code-based prototype · data architecture

A vague brief for a complex tender feature, shipped in two weeks. I ran the research, designed the flow around the user's decision rather than the data, built it in the code-based prototype, and modelled the extraction logic by hand where AI fell short. It closed two enterprise clients on demo.

Figma MakeCursor / ClaudeTypeScript prototypeData modellingEnterprise UX
Read the case study →

Enterprise B2B · AI product design · systems

AI Tender Assistant

AI product architecture · systems thinking · functional prototyping

Turning procurement documents into an AI-assisted workspace connecting documents, lots, requirements, and generated answers. The key decisions weren't visual: where fixed logic should replace AI, how new tenders reuse the same architecture, and how users keep control over every AI action.

AI product architectureHybrid AI / deterministicDocument intelligenceSystems thinkingHuman-in-the-loop
Case study on request

Design + engineering · in progress

AI Engine Integration

Integration architecture · backend logic · design–IT

Turning simulated AI features into real ones. Working directly with IT, I designed the integration between the prototype and a live AI engine, built the backend logic in Claude Code, and set the integration criteria with engineering — in about two weeks.

Claude CodeIntegration architectureBackend logicDesign engineering
Read the case study →

Also shipped

Knowledge HubAI knowledge-management system for enterprise document workflows.
CM|XS 360 AnalyticsMarket Overview & Competitive Intelligence dashboards, validated against real KPI logic before build.
Intelligent Document Processing (IDP)Architected from scratch as sole owner — annotation, training, settings; 14 task flows to hi-fi.
Bid ManagementDesign discovery through to executive-board buy-in for a new enterprise module.
Swimming-learning appConsumer app owned end-to-end as acting Product Manager — MVP scope, roadmap, delivery.
Creative CanvasAI-powered image generator — flows, interaction patterns, and interface for generative-AI creative work.
03 · Experience
Roles over time
2020202120222023202420252026Now
Product Experience Designer · FBK
Product Designer (UX/UI) · FBK
Junior Product Designer · FBK
Product Designer · Memorable
Founder · Tirvela / Freelance
01/2026 — Now8 months

Product Experience Designer

FBK · SaaS & ERP — Milan

Owns the AI Tender Assistant's hybrid AI/deterministic architecture, runs R&D that feeds sales conversations, and stays on through engineering, AI integration, and design QA.

03/2025 — 12/202510 months

Product Designer (UX/UI)

FBK · SaaS & ERP — Milan

Sole designer across four products and 14+ stakeholders. Scaled the design system across products, built the DTC mobile library, and designed the CM|XS 360 analytics platform.

08/2023 — 03/20251 yr 8 mo

Junior Product Designer (UX/UI)

FBK · SaaS & ERP — Milan

Designed a document-processing product from scratch, built the company's first component library, and presented Bid Management to the board.

04/2022 — 05/20231 yr 2 mo

Product Designer

Memorable (acquired by Reddit) · Remote

AI creative platform for advertisers like Unilever, L'Oréal, and P&G. Designed dashboards that turned model output into decisions for non-technical users.

10/2019 — Now7 years · in parallel

Founder & Product Experience Designer

Tirvela Boutique / Freelance

Independent product and brand work alongside full-time roles — most recently Tirvela.

Read the full CV
04 · Capabilities

Design

  • UX research & information architecture
  • Complex UI & enterprise UX
  • Design systems & component libraries
  • Data visualization & dashboards
  • Accessibility (WCAG 2.2)
  • Usability testing

Design engineering

  • AI-assisted design engineering
  • Code-based prototyping (HTML/CSS/TypeScript)
  • Front-end: Shopify Horizon, Liquid, CSS
  • Node data pipelines & tooling
  • Design tokens → production CSS
  • Design-to-development integration
  • Figma · Figma Make (advanced)

AI & delivery

  • AI product & workflow design
  • Human-in-the-loop experiences
  • Claude Code · Cursor · Figma MCP
  • Document intelligence
  • Stakeholder management
  • Technical documentation
05 · Contact

Designers who ship are rare. Let's talk.

arch.nadine.mahfoud@gmail.com linkedin.com/in/nadine-mahfoud tirvelaboutique.com