About J.P. Morgan Supply Chain Finance

This International program enables buyers and sellers to establish a financial contract (digitally) through the Supplier Onboarding Portal.

Benefits to members:

Discounted financing
Preservation of cash liquidity
Early payment offering
Control of payment cycles

The Opportunity

Create a true digital experience

Although the launch of the portal took a manual paper process and moved it online:

the experience was not really “digital”
paper forms were converted to online PDFs
the portal was built for APAC regulatory requirements and not for global regions
forms included fields that were no longer relevant or not required in a specific region
mobile capabilities had been considered but were highly desired by users

UX issues:

Registration takes longer than it should
High user abandonment and expired credentials during registration
Confusing forms and required documentation
No language options (English only) despite being a global program
Unclear navigation and information hierarchy
Sales team spends time onboarding users to a digital platform intended to be Self-Service

“The design looks like a Powerpoint deck hosted online and lacks any guidance.”

Phase 1

Project Timeline & Resources

14

Weeks

6

Design Staff

30

Client Staff

My Responsibilities

Client relationship & status
Research strategy & facilitation
Workshop facilitation
Journey Map creation
Requirements prioritization and Roadmap
Design strategy & implementation
Continued Business Development

1

Design System

Tools

Airtable
Axure
Figma
Miro
Zoom

Discovery Research

The goal of the research effort was to understand the onboarding and contract experience (enrollment phases) and align on a future vision and strategy for the portal experience.

The following activities were conducted:

Kick Off & Scope confirmation
Stakeholder interviews
Contextual Inquiry interviews
Journey Map
Requirements Prioritization & Roadmap

8

Stakeholder Interviews

20

User Proxy Interviews

Airtable Database

An extensive Airtable database was used for:

recruiting and scheduling interviews
session tracking
share data collection forms / surveys

Journey Map & Prioritized Roadmap

The Journey Map served as a shared artifact across several organizations. The insights and opportunities identified were translated and prioritized into requirements and then assigned to a Sprint cycle.

21

Contextual Inquiries

Airtable Data Collection Form

An online form was provided for team to collaborate and share notes and feedback during interviews.

8

Countries

Miro Board

A Miro board was used to:

documenting ideas
tagging, analyzing, and categorize all interview session data
team collaboration
Agile Sprint planning for design tasks

63

Design & Process Opportunities

Design Concepts

Based on what was learned in the research effort, the design requirements were scheduled in sprints starting with concepts for the Home page and user onboarding with subsequent sprints targeted for additional program pages, a dashboard, enrollment phases, and contract completion.

Primary Design Strategy:

Clear primary Call-to-Action (CTA) on the Home page
Balance of Marketing needs versus Onboarding Registration
Simplified registration (incorporating Mobile/SMS)
Clear and omnipresent indication of status/step in enrollment
Consistent and only necessary data forms

Visual Design Guide

An existing J.P. Morgan Design System was leveraged as the concepts were converted into an interactive prototype in Figma. Given certain gaps and constraints with the existing Design System, certain new design components were created for the unique needs of the portal.

A visual design guide was created to document the new style and forms for the re-designed portal.

Visual Designs

Visual designs of the public and private pages of the portal were created in Figma. The existing bank’s Design System was leveraged but some net new components were created as required by design.

Annotations were provided for form fields and components to document interactions.

Interactive Prototype & Usability Test

A usability test was conducted to test design assertions based on prior research and to evaluate the overall usability and comprehension of the design.

Participants clearly understood how to register; the hierarchy and navigation of the portal; and form factors.

Note: Given this specific user and client agreement, I cannot share this information but can talk about it generally.

6

User Proxy Group Usability Sessions

Development Consultation & Help

Interactive Development Aid

Given some language barriers and the consideration that an interactive prototype may be easier to understand than written specifications, I created a mini-prototype to illustrate Stepper States for the Enrollment stages of the process.

Metrics Proposal

Metrics and User Experience Proposal

At the conclusion of the engagement, my team presented a proposal and strategy for measuring the User Experience and Contract/Client Completion status of the Trade Finance Portal.

Current Dashboard: Business Only Metrics

Concept Dashboard: UX & Business Metrics