BAT HofPortal (web + native), B2B2C pricing & requests

•Role: Senior Product Designer (co-owner of UX/UI); led design across web (internal) + native (external)

•Team: PO, PM, Eng (web & mobile), Data, Legal; close dev pairing & QA

•Scope: 25 epics · 128 stories · 928+ dev tickets · 6-month launch

•Users: Internal ops, sales, traders, admins, farmers, sales reps

•Outcome (post-launch): €32.3M approved order value · 51K+ price requests · 3,600+ total users (708 active)

•Why it matters: Unified B2B and farmer journeys, simplified complex workflows, and set a scalable foundation for BAT's 2030 digital strategy

Context

BAT Agrar (merger of Beiselen + ATR) operates 100+ trade locations, 5 ports, 1,500+ employees, €2.5B+ revenue. We partnered to modernize PreisAktuell (real-time pricing) and reimagine HofPortal as the central platform for agricultural trading across web and native.

Client feedback:

"The collaboration with TrueNode was characterized by professionalism and openness right from the start. The team was able to understand complex processes very quickly and the workshops were consistently solution-oriented. The performance and support were remarkably good and communication was excellent at all times."

Felix HirthDigitaler Vertrieb

Problem

Fragmented experience: Parallel B2B portal and consumer app produced drop-offs and slow time-to-quoteLegacy constraints: PreisAktuell 1.0 had slow performance, high expansion cost, and limited flexibility for new features/integrationsComplex workflows: Multi-role processes (admins, back office, sales, leads, traders, farmers) with inconsistent terminology and accessTrust & usability: Conservative user base; "simpler" flows perceived as less trustworthy

Strategy

•Consolidated IA to bring B2B and farmer tasks into coherent, role-based flows.

•Guided pricing & inline validation to shorten key tasks and reduce errors.

•Real-time data access surfaced where decisions happen (pricing, delivery, contracts).

•Terminology unification + tooltips to reduce cognitive load and support training.

•Design system + state coverage to scale consistently across web and native.

•Iterative rollouts to build trust—preserve familiar patterns where it helps adoption.

Results

•Relaunch delivered: PreisAktuell (re-architected) + enhanced HofPortal (web + native).

•Usage & value: €32.3M approved order value · 51K+ price requests in first months.

•Adoption: 3,672 users onboarded; 708 active users already engaged.

•Operational readiness: Architecture and UX built to scale future products & internal operations.

My role & leadership

•Co-owned UX/UI for HofPortal web (internal) and native app (farmers/sales reps) with end-to-end responsibility.

•Framed research questions, created flows, wireframes, interactive prototypes, Hi-Fi, and an expanded style guide.

•Participated stakeholder workshops, wrote decision notes, and aligned on scope/priorities.

•Led design handoffs, QA reviews, and client ceremonies; partnered tightly with devs during sprint demos.

•Collaborated with POs/business to sequence functionality against goals and constraints.

•Maintained a continuous feedback loop (users ↔ client ↔ dev) and folded insights back each sprint.

Solution highlights

•Role-aware navigation: entry points and permissions tailored per job function.

•Pricing transparency: real-time price & delivery cost context available within tasks.

•Progressive disclosure: fewer visible steps; advanced controls when needed.

•Consistency at scale: shared components, states, and content patterns across web + native.

•Trust cues: explicit confirmations, audit trails, and contextual help to reassure conservative users.

Process

Research & discovery:

•Interviews/observation with farmers, sales, back-office; pain points: fragmented flows, inconsistent data/terms, hard-to-find tasks.

•Personas and journey maps informed opportunities and a first metrics hypothesis.

Prototyping:

•Rapid low→high fidelity prototypes across web + native; optimized nav and reduced steps for core tasks (check prices, manage delivery, submit/approve contracts).

Test & learn (every sprint):

•1–2 usability tests per sprint with farmers and sales teams.

•Iterations on data hierarchy, menu structure, and terminology clarity.

Build & integrate:

•Close designer–developer pairing; detailed annotations and state coverage.

•Web with ReactJS, native with React Native; real-time pricing from Euronext and delivery costs via OpenStreetMap; cloud-native infra (API gateway with Azure API Management + GraphQL Mesh, ~700 Terraform resources).

Launch & optimize:

•Shipped in ~6 months; monitored usage and task completion; addressed papercuts fast.

•Design system locked consistency and accelerated subsequent features.

Learnings

Change management matters: Conservative users equated "harder" with "safer." Gradual improvements and familiar anchors increased trust and adoptionLanguage is a UX feature: Internal teams used different terms for the same concept; a unified vocabulary + inline tooltips reduced confusionIterate with evidence: Frequent tests and open stakeholder loops aligned expectations and unlocked scope without derailing timelines

What I'd do next

•Instrument a focused metrics loop (completion, time-to-quote, task success, support tickets) and publish a simple ops dashboard to sustain momentum.

•Extend the design system with usage guidance (when to use/avoid), not just components.

•Partner with sales ops on training moments in-product (micro-tours, glossary, saved views)