All work Mehtab Hussain
CASESTUDY

Enterprise Product
Transformation

Case study with an AI-assisted design methodology

Dealer - Customer - Lender financing ecosystem

transforms complex wholesale finance processes into connected enterprise experiences

Mercedes-Benz, BMW, Nissan and Kubota logos above two people at a desk viewing the redesigned dealer dashboard with credit line detail, loans and financials, with an Average Growth 30% card

About  Product

Domain: Enterprise / B2B
Platform: Legacy Windows Desktop Application → Cloud-Based Web Application

I transformed a legacy desktop-based retail and wholesale finance application into a modern web-based enterprise experience. The work focused on improving interface usability, simplifying complex finance workflows, connecting the needs of dealers, customers, OEMs and lenders, and exploring AI-assisted decision support using ChatGPT.

From workflow challenges to

Smart Solutions

Business Problem

The existing desktop experience required modernization to better support complex financing operations and evolving enterprise usability expectations. The challenge was to improve the experience without disrupting established business rules and critical finance workflows.

Problem

Users needed a clearer way to navigate financing information, understand task status, complete multi-step workflows, and locate relevant details across the application.

My role and AI toolkit

I led: design decisions, workflow prioritization, interface design, components, prototypes, design-system implementation and design review, where applicable.

ChatGPT supported: requirement interpretation, structured analysis, alternative concepts, synthesis, critique, and documentation.

I verified: outputs against the source requirements, approved business rules, design conventions, and available evidence.

Human-led

AI-Assisted design process

Existing Product Evidence

Legacy screens, requirements, business rules, and existing workflows.

01
Product
Evidence
02
AI
Analysis

ChatGPT-Assisted Analysis

Understand, audit, synthesize, and explore.

Designer-Led Decisions

Prioritize, map workflows, design, and prototype.

03
Designer
Decisions
04
Verify &
Refine

Verification & Refinement

Check requirements, audit usability, and validate with users or stakeholders.

User Research & Discovery

Understanding the users behind the legacy experience

Platform modernization

Move the existing desktop application to a web-based experience that better supports users working on smaller screens.

Workflow improvement

Address the existing application’s poor user flows and make complex finance tasks easier to navigate.

UX and UI enhancement

Replace outdated interface patterns with a more consistent, usable, and modern design aligned with established design practices.

CSD Matrix

Certainties

We know or understand that...

Improving the existing user experience is a project objective.
Migrate the existing desktop application to a web-based application.
Users need to work on smaller screens.
The stated target users’ age range is 30–60.
Data visualization and hierarchy.

Suppositions

We suppose that...

The current navigation may make important workflows harder to complete.
Grouping related finance tasks may reduce cognitive load.
A responsive layout may improve usability on smaller screens. Not for mobile.

Doubts

We have doubts about...

Which specific tasks cause the most difficulty or errors?
Which existing finance rules, calculations, validations, and exceptions must remain unchanged?
Is the AI assistant approved product scope, an exploratory concept, or outside the current release?
How will the team measure whether the redesigned experience is better?

UX Empathy Map - Enterprise Finance Users

Target audience: Enterprise finance users aged 30–60 who navigate financial information, manage business workflows, review transactions, and complete finance-related tasks through an enterprise application.

What do theyThink?

Is this financial data accurate and up to date?What happens if I submit incorrect details?Can I complete this task without making an error?What happens if I submit incorrect details?

How do theyFeel?

Responsible for financial accuracyConcerned about costly mistakesFrustrated by complex navigationOverwhelmed by dense financial tablesReassured by confirmation messages

What do theyDo?

Checks payment and settlement detailsSearches for accounts and loan recordsSubmits requests and checks confirmationsFilters and sorts financial tables

What do theyHear?

Compliance and audit requirementsCustomers or dealers asking about loan statusRequests to resolve overdue payments
Can I filter by date or status?I need to check the latest balance.I need to verify before submitting.Can I export these records?

What do theySay?

Large tables with multiple columnsReports, transaction histories, and recordsDifferent layouts across application screens

What do theySee?

Pains

Fears, frustrations and obstacles

Too many steps for routine tasksFear of submitting incorrect dataDifficult-to-read financial informationPoor usability on smaller devicesUnclear transaction statusesConfusing validation messagesInconsistent screen layouts

Gains

Needs, goals and motivations

Reduced manual effortFaster financial workflowsEasy-to-understand navigationAccurate, trustworthy informationClear statuses and confirmationsPowerful search and filtersConfidence in financial decisions

Legacy UX Audit

The first step of understanding Enterprise Product software was to audit the existing system and get a solid grasp of what we were starting with. This is where open, honest, collaborative communication was critical. I worked closely with the team to deconstruct their legacy menus, identify key user flows, and uncover the underlying logic of the system.

Annotated legacy desktop screens with numbered issue markers for login, customer, payment and table views
Heuristic EvaluationUsability IssuesAnnotated ScreensSeverity AssessmentRecommendations— From issues to a better user experience

During Discovery & Design

How I used ChatGPT

Understand

Discovery: Understand the business before designing

  • Organize supplied business requirements into a structured inventory.
  • Separate confirmed facts, assumptions, and unanswered questions.
  • Identify ambiguities and dependencies that need Business Analyst (BA) clarification.
  • Help map known actors, tasks, decisions, and exceptions.
Synthesize

Define: Turn evidence into a clear design problem

  • Business problem
  • User problem
  • Design opportunity
  • Experience principles
  • Constraints and unanswered questions
Explore

Ideation: Explore workflow and information architecture options

  • Navigation and information architecture.
  • Data-dense financial tables and summary information.
  • Search, filters, sorting, and record details, where supported by requirements.
  • Responsive layouts for smaller screens.
  • Form design, validation, error recovery, and confirmation patterns.
Create

Design: Translate the chosen direction into interface decisions

  • Screen-level content hierarchy.
  • Interaction and state definitions.
  • UX writing alternatives.
  • Form validation and error-state scenarios.
  • Responsive behavior specifications.
  • Design-system consistency checklists.
Evaluate

Validation: Challenge the design before release

  • Usability issues
  • Accessibility issues
  • Responsive-layout problems
  • Content and terminology inconsistencies
  • Design-system inconsistencies
Own the outcome

Reflection: Show the human-in-the-loop approach

  • Suggestions aligned with verified requirements, user evidence, and design-system conventions.
  • Ideas needing adjustments to fit workflow, terminology, or technical constraints.
  • Unsupported functionality, invented rules, unverified assumptions, and conflicting recommendations.
  • Decisions validated against source requirements, BA input, design standards, accessibility criteria, and available test evidence.
AI for smarter requirements traceability: ChatGPT prompt and resulting credit facilities requirement inventory
ChatGPT output: CSD matrix separating certainties and suppositions, each with evidence and next action
AI for smarter legacy UX audit: ChatGPT prompt and annotated credit matrix screen with issue register
AI for smarter interface decisions: comparing two overdue invoice options and a recommended hybrid layout

Legacy User Interface

Legacy desktop screens: credit matrix request with search filter, auto credit matrix rules with asset conditions, dealer credit request queue and task queue with approval statuses

New User Interface

New web interface: Toyota-branded sign-in, guided customer search for the credit matrix, credit line dashboard with loans and financials, task queue with request statuses, and loan finance details

Design System

High-quality Figma components for faster project setup and maintenance

Color systemTypographyIconsButtonsInputsSmart components
Colour paletteInter · Bold, Semi Bold, Medium, Regular
Primary#246BFF
Info · Malibu#56C8FA
Success · Jungle Green#27AE60
Warning · Flush Orange#FA7D00
Error · Burnt Sienna#EB5757
Neutral · Fiord#3F4A66
Font family Inter, weights and type scale, plus full colour ramps for primary, info, success, warning, error and neutral
Input field, dropdown and date picker components with text field anatomy and every state
Primary, secondary and ghost buttons in three sizes, five intents and five states
Next case study Mobile Wallet App