Hyphen

The orchestration layer that connects standalone financial products into unified payment and collection flows. Work spans the HyphenX platform design language, user migration workflows, authentication systems, notification architecture, and reusable component design across nXFlow, AVS, and AVS on nXFlow Integration Services.

Multi-Factor Authentication

Led end-to-end design of MFA/2FA across HyphenX, covering three user types and two authentication methods: TOTP via Microsoft Authenticator and a Security Officer creation flow for high-privilege accounts. The core challenge was making security accessible for non-technical financial institution staff without removing necessary friction.

Delivered three distinct user journeys, five responsive HTML email templates, and two authentication methods across two products. Each step was designed with a single CTA for progressive disclosure. The QR code was placed on a white modal surface to ensure reliable scan performance in any lighting condition.

Notification Centre

Designed a unified notification system for the HyphenX enterprise platform, addressing the challenge of surfacing relevant activity to appropriate users without creating information overload. The system supports admin approval workflows, task management, and multi-channel communications across Admin and Standard User roles.

Introduced structured notification streams for approvals, tasks, workflow updates, and system alerts. Approval emails route directly to specific items via deep URLs, removing the need for an intermediate login. Related events from the same workflow collapse into grouped items to prevent overwhelming high-volume users. Phase 1 is live; Phase 2 is in progress.

Batch Upload Component

Built an enterprise-grade Batch Upload component for the HyphenX design system, consumed across nXFlow, AVS, and AVS on nXFlow. The challenge was replacing three inconsistent ad-hoc implementations with a single component that maintained a fixed interaction model while allowing product-specific configuration.

Designed six fully documented states covering the full lifecycle: idle, file selected, uploading, validation error, partial success, and full success. Row-level error tables display row number, field name, and error reason so users can correct records without losing valid data. A downloadable failed-rows CSV and pre-populated correction template support enterprise batch workflows. Reference IDs are generated and displayed at success for audit trails and support tickets.

AVS User Migration

Designed the integration of a standalone AVS product into the HyphenX platform ecosystem, unifying two products at different maturity stages under one visual design language. AVS had an existing light-mode interface disconnected from HyphenX’s design system. nXFlow was in the discovery and design phase.

Established amber as an action-only colour, introduced four dark surface levels for hierarchy, and standardised table patterns across all products. Designed the migration wizard covering user list views, selection flows, and status tracking for admin-led migrations. Added mandatory confirmation screens before consequential financial actions.

Password Reset

Redesigned a feature that existed in name only. The existing “Forgot password?” link had no error state handling, no password strength indicators, and no styled email communications. Users encountering edge cases received no guidance or recovery path.

Delivered full flow coverage from trigger through confirmation: four distinct error states (empty field, invalid format, unregistered email, rate-limited), a four-state password strength metre with real-time requirements checklist, and two branded transactional email templates. Submission is disabled until minimum password strength is achieved, applied consistently across both reset and creation flows.

HyphenX Design Language

Reworked and enhanced the brand CI for the HyphenX platform, building a unified design language covering navigation, headers, components, tables, notifications, modals, and email across three financial products.

Adapted the HyphenX logo for light and dark surfaces. Scoped brand amber to interactive states only. Designed a side navigation that scales to accommodate future products with a minimised icon-only state for denser screens. Standardised a six-variant button system, a complete form input state library, and a table system that serves as the dominant UI pattern across all products. Delivered a transactional email system with unified templates for MFA, password reset, and workflow updates.