How I Untangled Complexity: Designing a Streamlined Payment Interface

I turned complex business needs into a scalable, user-centered platform for invoice and payment management. Spoiler: It wasn't easy.

Internal tooling

Complex systems

B2B2C

📌 Overview

Payment Interface is a new tool designed to streamline invoice management, payment submissions, and tracking for both Alight employees and external clients. It needed to support flexible invoice templates, multiple payment types, recurring payment scheduling, and a full audit history — all while operating within strict technical and design system constraints.

Timeline: Oct 2024 – Jan 2025

Team: Sr. Product Designer, Product Designer, Product Manager, Engineer

Role: Product Designer

Tools: Figma, Miro

🧶 The Challenge: Untangling Flows, Clarifying Roles, and Building Trust in a New System

When I joined the Payment Interface project, we faced a significant challenge: turning a dense web of technical requirements, user types, and payment rules into a clear, usable platform. The project demanded a balance between flexibility and structure, all while working within strict internal tooling patterns and business constraints.

Business Needs

Business Needs

Business Needs

  • Create a centralized tool for invoice creation, submission, and tracking.

  • Support multiple payment methods (ACH, Wire Transfer).

  • Enable dynamic invoice templates tailored per client.

  • Provide audit transparency through tracked changes and reporting.

  • Scale the tool to eventually support multiple clients beyond the public sector pilot.

It got complicated

It got complicated

Design Challenges

Design Challenges

Design Challenges

  • Multiple, Complex User Flows: Invoice configuration, creation, editing, payment, history tracking, and reporting all had unique requirements.

  • Different User Roles: Alight employees had configuration and management powers; external clients mainly interacted with payment and tracking flows.

  • Strict Technical Constraints: The interface had to conform tightly to existing Control Center patterns, limiting how freely we could explore new interaction models.

How might we simplify highly technical workflows and multi-user needs into an intuitive experience, while respecting rigid tooling and technical constraints?

So…

Let's give it a go!

📦 Delivering Results: Centralized Control and Seamless Experiences

I designed a solution that fulfilled its core function as simply and efficiently as possible. The Payment Interface delivers a clear, centralized experience for managing invoices and payments, balancing configurability for Alight employees with ease of use for external clients.

💡 Solutions in Action

🧱 Clear Information Architecture

Organized flows with steppers, tabs, and progressive panels.

Edge Cases and Validation Design

Error prevention, empty states, and critical validations enforced.

🔗 Consistent Visual Language

Respecting design system constraints while maximizing clarity.

🧩 Visual Organization of Complex Forms

Card-based field management and modals for focused editing.

Why this design works?

Why this design works?

Why this design works?

By prioritizing visual organization, progressive disclosure, and modular flows, I made it easier for users to understand their tasks, complete them accurately, and trust the system.
This foundation not only simplified the immediate user experience but also created a scalable framework that can adapt as client needs evolve — turning complexity into clarity, one decision at a time.

🪡 My approach: The Step by Step

Start with the forest, not the trees, you know?

Start with the forest, not the trees, you know?

Understand the System

Understand the System

Understand the System

  • Had multiple workshops to map the high-level workflows.

  • Identified core user types (Alight employees vs. external clients).

  • Mapped out dependencies between flows (invoice creation, payments, tracking).

  • Had multiple workshops to map the high-level workflows.

  • Identified core user types (Alight employees vs. external clients).

  • Mapped out dependencies between flows (invoice creation, payments, tracking).

  • Had multiple workshops to map the high-level workflows.

  • Identified core user types (Alight employees vs. external clients).

  • Mapped out dependencies between flows (invoice creation, payments, tracking).

2.

2.

2.

Map User Flows

Map User Flows

Map User Flows

  • Created early flow diagrams connecting template creation → invoice maintenance → payment submission.

  • Highlighted places where user permissions would differ.

  • Created early flow diagrams connecting template creation → invoice maintenance → payment submission.

  • Highlighted places where user permissions would differ.

  • Created early flow diagrams connecting template creation → invoice maintenance → payment submission.

  • Highlighted places where user permissions would differ.

3.

3.

3.

Key Actions and Rules

Key Actions and Rules

Key Actions and Rules

  • Documented all key actions: configure template fields, edit invoices, schedule payments.

  • Surfaced important validations (no past payments, unique template names, certification before submitting).

  • Documented all key actions: configure template fields, edit invoices, schedule payments.

  • Surfaced important validations (no past payments, unique template names, certification before submitting).

  • Documented all key actions: configure template fields, edit invoices, schedule payments.

  • Surfaced important validations (no past payments, unique template names, certification before submitting).

Here's when things get fun!

Here's when things get fun!

4.

4.

4.

Build Interaction Patterns

Build Interaction Patterns

Build Interaction Patterns

  • Introduced steppers for multi-part flows (ex: payment submission).

  • Used panels to group invoice information.

  • Added tabs to make invoice templates easier to preview and configure.

  • Introduced steppers for multi-part flows (ex: payment submission).

  • Used panels to group invoice information.

  • Added tabs to make invoice templates easier to preview and configure.

  • Introduced steppers for multi-part flows (ex: payment submission).

  • Used panels to group invoice information.

  • Added tabs to make invoice templates easier to preview and configure.

🔑 Key Flows in Action: The Core Experiences


After mapping the complexity and aligning user actions, I translated the Payment Interface into a set of core experiences.
Each flow was designed to make a complicated, multi-role system feel simple, predictable, and transparent — from configuring templates to submitting and tracking payments.
Here’s how I brought the key journeys to life:

After mapping the complexity and aligning user actions, I translated the Payment Interface into a set of core experiences.
Each flow was designed to make a complicated, multi-role system feel simple, predictable, and transparent — from configuring templates to submitting and tracking payments.
Here’s how I brought the key journeys to life:

Yep, all this flows

Yep, all this flows

Invoice template configuration


  • Users can preview and configure templates through a tabbed modal ("Preview" + "Details").

  • Fields divided into Overview, Balance Details, and Additional Information — following Hick’s Law to reduce decision fatigue.

  • Toggle controls and modal editing for advanced configuration — aligning with progressive disclosure best practices.

Invoice template configuration


  • Users can preview and configure templates through a tabbed modal ("Preview" + "Details").

  • Fields divided into Overview, Balance Details, and Additional Information — following Hick’s Law to reduce decision fatigue.

  • Toggle controls and modal editing for advanced configuration — aligning with progressive disclosure best practices.

New and Edit Invoice

New and Edit Invoice


  • Manual invoice creation/editing mirrors the template structure.

  • Progressive disclosure hides irrelevant fields until necessary.

  • Final step: Summary and review screen, with direct edit shortcuts (following Fitts’s Law for faster error correction).

Dashboard and Quick Actions

Dashboard and Quick Actions

Detailed Invoice View

Detailed Invoice View

Payment Submission (One-Time and Recurring)

Payment Submission (One-Time and Recurring)

History and Reporting

History and Reporting

It was one flow at a time, one win at a time.

No pressure, right?

And I'm so ready for the next challenge.

And I'm so ready for the next challenge.

🚧 Obstacles to Overcome and How We Collaborated

The Obstacles

The Obstacles

The Obstacles

  • Untangling Complex Requirements
    Multiple workshops were needed to map overlapping flows and fully understand the system.

  • Inconsistent Terminology
    To reduce confusion, I unified overlapping labels (Template, Invoice Type, Category) under Invoice Type.

  • Post-Handoff Iterations
    Clarifying overlapping terms was part of the tool’s natural evolution — as real flows and usage scenarios unfolded, we refined language like “Template Setup” post-handoff to better align with user needs.

How We Made It Work

How We Made It Work

How We Made It Work

  • Led the Design Process
    Owned end-to-end design, from flow mapping to handoff.

  • Weekly Product Partnership
    Met regularly with the Product Manager to refine requirements and address scope changes.

  • Strategic Mentorship
    Collaborated with a Senior Product Designer for high-level UX validation and strategic guidance.

  • Developer Alignment
    Worked directly with a new dev team to clarify patterns, ensure design system consistency, and support my first solo project handoff.

🎯 The Impact: Clarity, Simplicity, and Confidence

By transforming dense requirements into clear user journeys, I helped Payment Interface deliver more than just a tool — we laid the groundwork for scalable, client-friendly payment solutions across Alight’s broader ecosystem.

✨ Key Outcomes

Faster Payment Submissions and Fewer Errors
Clear steppers, validations, and certification flows help users complete payments accurately the first time — reducing manual support needs.

Increased Admin Efficiency
By simplifying template configuration and invoice maintenance, Alight employees can now create and manage invoices faster, supporting multiple clients with minimal confusion.

Improved Transparency and Trust
Tracked history, detailed reporting, and a standardized dashboard make it easier for both internal and external users to trust the status of their invoices and payments.

Scalable Framework for Future Clients
The modular, configurable design of templates and payment flows allows the tool to be extended beyond the public sector pilot to new industries with minimal redesign.

💛 Personal Wins

  • Successfully led my first full project from start to handoff.

  • Learned to navigate highly technical constraints without losing user-centered clarity.

  • Developed a stronger appreciation for the power of clear terminology and thoughtful documentation.

Reflection

Working on the Payment Interface taught me that great design is not just about screens — it's about building clarity from complexity and laying strong foundations for future growth.

Leading this project from start to finish challenged me to think at a system level, advocate for user clarity even in rigid technical environments, and collaborate deeply across disciplines.

More than anything, it strengthened my belief that even the most technical projects deserve intuitive, human-centered experiences — and that with patience, structure, and heart, complexity can always be untangled.

Let's work together. 🫱🏻‍🫲🏽

Let's work together.

Or check out the Help Center redesign I created as part of the Control Center experience.