Wholesale eSign
Wholesale eSign
Wholesale eSign
Wholesale eSign
B2E
Tablet Design
System Integration
A seamless eSign journey containing document management.
A seamless eSign journey containing document management.
A seamless eSign journey containing document management.



Designed to assist business relationship managers in facilitating a seamless eSign journey for customers during diverse business applications.
Designed to assist business relationship managers in facilitating a seamless eSign journey for customers during diverse business applications.
My Contribution:
User Research / Wireframe / Prototype / Pattern alignment
User Research / Wireframe / Prototype / Pattern alignment
Project Type:
Professional Project
Time:
Jan. 2023–Mar. 2023
Background
Background
Background
Background
Wholesale eSign (on tablet) supports Business Relationship Manager to conduct eSign journey with customers shoulder by shoulder during Insurance, Business Loan, Mortgage application journey and etc.
In the past, there was a lack of order in system management. Depending on the type of business, users had to rely on multiple different outdated systems and even paper form to perform the same functionalities.
Design Opportunity:
Design Opportunity:
Design Opportunity:
Design Opportunity:




User:
Business Relationship Manager
Aiming at:
Conduct eSign journey with customers shoulder by shoulder
Challenge:
Integrate old systems into a shared platform
User Flow
User Flow
User Flow
User Flow
When a customer comes to the Business Relationship Manager and asks for relevant services, the customer and manager will sit side by side and follow the steps to complete the application.



Information Architecture
Information Architecture
Information Architecture
Information Architecture
The eSign journey features an Application History List for tracking applications and Application Details for operations like editing, signing, and document management, streamlining the entire eSign process.



UX Wireframe
UX Wireframe
UX Wireframe
UX Wireframe
Before progressing to high-fidelity deliverables, I presented these UX wireframes to stakeholders to consolidate ideas and visualize the entire process, ensuring alignment and clear understanding.



UI Design
UI Design
UI Design
UI Design
Application History:
Product type dropdown
User could select different product through this dropdown.
Actions towards all application
“Change assignee” is the action relevant to existing applications, while “Create application” is not.
Thus To differentiate between the two, we can place the two buttons on separate lines.
Application records table
Display application info, and also contains actions towards them
Application Details:
Application information
This part shows information and actions about the whole application page.
Document list
Document list aims at display document information and actions towards individual document, contains Action button at Document group level and a table to display document info.
Application Information:
Navigation
Back to overview page.
Summary details
Basic info about this application
Status indicator
New / Pending completion / Completed
CTAs
Actions for the whole application
Document List:
Action for Document required
Affect all documents in this group.
Preview document
User could click the document name hyperlink to view this document.
Action for individual document
The most commonly used action(like: Sign) should be listed here, other actions should be placed in more menu.
Document group
Based on various business requirements, we can customize different document groups and categorize them accordingly.
Application History:



Product type dropdown
User could select different product through this dropdown.

Actions towards all application
“Change assignee” is the action relevant to existing applications, while “Create application” is not.
Thus To differentiate between the two, we can place the two buttons on separate lines.

Application records table
Display application info, and also contains actions towards them
Application Details:



Application information
This part shows information and actions about the whole application page.

Document list
Document list aims at display document information and actions towards individual document, contains Action button at Document group level and a table to display document info.
Application Information:



Navigation
Back to overview page.

Summary details
Basic info about this application

Status indicator
New / Pending completion / Completed

CTAs
Actions for the whole application
Document List:



Action for Document required
Affect all documents in this group.

Preview document
User could click the document name hyperlink to view this document.

Action for individual document
The most commonly used action(like: Sign) should be listed here, other actions should be placed in more menu.

Document group
Based on various business requirements, we can customize different document groups and categorize them accordingly.
Application History:
Product type dropdown
User could select different product through this dropdown.
Actions towards all application
“Change assignee” is the action relevant to existing applications, while “Create application” is not.
Thus To differentiate between the two, we can place the two buttons on separate lines.
Application records table
Display application info, and also contains actions towards them
Application Details:
Application information
This part shows information and actions about the whole application page.
Document list
Document list aims at display document information and actions towards individual document, contains Action button at Document group level and a table to display document info.
Application Information:
Navigation
Back to overview page.
Summary details
Basic info about this application
Status indicator
New / Pending completion / Completed
CTAs
Actions for the whole application
Document List:
Action for Document required
Affect all documents in this group.
Preview document
User could click the document name hyperlink to view this document.
Action for individual document
The most commonly used action(like: Sign) should be listed here, other actions should be placed in more menu.
Document group
Based on various business requirements, we can customize different document groups and categorize them accordingly.