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

Phase 2

Project Timeline & Resources


8

Weeks

2

Design Staff

10

Client Staff

My Responsibilities

  • Client relationship & status

  • Design refinements & implementation

  • Language translation oversight

5

Translations

Tools

  • Figma

  • Figma Plug-In (CopyDoc)

  • Jira

  • Miro

  • Translation Software

  • Zoom

Note: Human Translators validated the final copy.

Language Translation &  Final Design


The success of Design Phase 1 and the sheer volume of opportunities outlined in the Discovery Research effort in Phase 1, resulted in a second engagement with J.P. Morgan. The main focus of Phase 2 was to translate all of the visual designs from Phase 1 from English into 5 other languages and continue design refinement for Geo-specific contracts.

Designs were translated into the following languages:

  • Japanese

  • Portuguese

  • Simplified Chinese

  • Spanish

  • Thai

Language Translation &  Final Design


Design Artifacts Delivered:

Public Portal Pages

  • Our Program

  • Benefits Calculator

  • Contact

  • FAQ

  • Contact Us

Registration and Email Content

  • Registration & Activation flow

  • Revised email forms (Invite, Activation, Completion)

Account Portal Pages

  • Enrollment Dashboard

  • Company Information section*

  • Documents section*

  • Contract section*

  • Final Dashboard (contract complete)

*Note: Forms varied based on regional legal and business requirements.

Interaction Process States:

  • Error State requirements and content

  • Process Stepper specifications

Language Translations

  • (5) Language translations of the entire Portal

Metrics & Strategy Proposal:

  • Metrics and User Experience Strategy Proposal

(Public) Supplier Onboarding Portal

(Private) Miro Opportunities Board

Improvements from Phase 1 & 2:

  • Publicly available (not locked behind a Sales wall)

  • Ability to select a Language of preference

  • Clear primary CTA on Home page and Dashboard

  • Removal of unnecessary communication (email) with clear and simple messaging (reworded content)

  • Increased first-time success account creation

  • Fewer Password expiry incidents

  • Omnipresent and clear enrollment state status

  • Introduction of Mobile needs (especially in Asia)

  • Design guidance for all enrollment steps

  • Easier upload and download of documentation

  • Form conversion to 95% digital (not paper/ PDF forms)

  • Ability to Schedule a meeting

Previous
Previous

Re-Imagined Treasury Management Experience

Next
Next

Fantasy Football Evaluation (Mixed Methods Research)