Trade Management

Design of an enterprise application which orchestrates international import-export trade by managing legal documents, transactions, and payments. Work undertaken while employed at BNY Mellon.

Trade Management(TM) is an enterprise application which supports international import-export trade by managing legal documents, transactions, and payments. The application is designed to provide a seamless experience to the importer, exporter, and banking institution taking part in the trade process. This application is also made available to the major banks under private label due to its superior user experience.

Role

User Research & Interface Design

Team

Sandeep (UX Lead) | Shibu Daniel (VP UX)|Mahesh ( UX Designer)

Duration

Mar’16 — Jul’16 | 5 Months


Goal

To redesign a legacy global trade application in order to provide unified and seamless experience to the importers, exporters, and banking institutions.

Process

Design Process Overview

Challenges

TM was an old application and had continuously gone under changes since then. As a part of design strategy, TM was planned to redesigned ground up not just with front-end but also the underlying technology with the focus on user-centered design process.

1 Application Silos: There were multiple applications managing various stages of a trade process, each with overlapping features, interface, login credentials, user profiles and dedicated operations team.

2 Agile UX: The development team and business were fairly new to UX and Agile development process. The part of the job was to sell and educate stakeholder and technology team about the user center design process.

3 Time Constraint: The project was time bound as the existing technology platform was set to retire in five months and these applications were the last ones to be decommissioned


Opportunities

While the task of designing age-old complex trading platform was daunting, it offered a lot of opportunities to enhance current user experience.

1Unified Experience: To bring all touch points and functionalities of trade process at one place, with single sign-on and consistent user interface. No more hopping between the applications.

2 Efficiency: To save user’s time and organization’s technology effort by eliminating redundant overlapping features and third-party dependency across the applications.

3 Operational Cost: To reduce application support tickets by enabling transparency and providing instant feedback to clients through the rich user interface.

4 Adding Value: To offer features needed to perform daily operations with responsive and scalable user-centered design solution.


User Stories and Agile Sprints Planning

Once we had enough understanding domain, users, and underlying applications, we started drafting user stories. At this time we had completed a number of interviews with users, product managers, operations, business. We also did competitive analysis to benchmark product features and experience

Typical user story format..

As a [user/persona], I would like to ….. [basic user goal], So that…. [expected outcome]
  • Each user story was validated and prioritized with the business product manager.
  • Based on the priority and importance the design sprints were planned.
  • We maintained design sprint ahead of development sprint to allow sufficient time for UX-related activities and resolve any conflicts with development team well ahead of time.
  • At the end of each sprint, the application was validated with business product manager and test users for immediate feedback.

Information Architecture

Information Architecture of Trade Management Application

The basic information architecture of TM in the digital ecosystem was defined as below. The taxonomy and application structure was designed to support and scale into the existing information architecture.


Interaction Design

The interactions and page layouts were designed with consistency, simplicity, scalability and responsive behavior underlying components and elements in consideration.

Different Types Page Layouts

Overview

The entire application utilizes either of these five basic layouts. Each layout is designed to serve the specific purpose. All screens are built are around these frames.


Landing Page

Landing Page

The landing page contains interactive grid listing all transactions, payments, and legal documents.

The grid allows users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions.


Detail Page

Details Page

The details page contains individual transaction details.

The various stage of trade process and related details are separated by tabs.

Each tab is divided into summary and detail sections. Top right corner has action button based on the context


Form Wizard

Form Wizard

The form wizard can be invoked from the any of the landing and utility pages for the complex form which needs step by step breakdown.

The side-bar in wizard indicates the step at which user is during the set-up process


Dashboard

Dashboard

The dashboard page provides access to key information of services and application through widgets.

These widgets can be scaled, arranged, added or removed as needed.


Reports

Reports

The report page holds reports of all application and service for which user has access.

Reports can be accessed using search, pre-built categories, and custom bookmarks.

Each report can be generated based on the additional report building criteria.


Navigation Elements

Navigation

The mega menu houses the profile based services and applications.

The breadcrumb and global search on each page provide the navigation aid to the user.


After five Months..

The project was in the stable stage and ready to push MVP (Minimum Viable Product). The development and business team realized the value of user center design process and was pushing hard towards the common goal.

Highlights

  • Received WOW awards from Business and Technology
  • Gathered business from other Line of Business
  • Lead the application demos to the clients
  • Managed offshore development team
  • Evangelized UX within organization
  • Built around 100 plus screens using AXURE

Key Takeaways

  • You are not the user
  • Designing is not individual task it’s a team effort.
  • Simplicity and Consistency make design intuitive.
  • Vision and design strategy are very important.
  • No matter how hopeless situation is, there is always a way forward.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.