CatchMarkets

Metal Trading Platform

project

Web Design

Role

UI/UX Designer

Year

2022-2023

CatchMarkets

Metal Trading Platform

project

Web Design

Role

UI/UX Designer

Year

2022-2023

overview

CatchMarkets is physical commodities trading platform for every step of your journey where metal meets trading. It offers tailored features for all users, providing multiple metals trading, off-take orders options, report management, and personalized settings on trades, shipments and orders.

All-in-one platform

All-in-one platform

Lithium trading mode fits both buyers and sellers to match orders and track the progress easily by using the platform.

Creative Innovation

Creative Innovation

Streamlines trading and eliminates inefficiencies of traditional paper-based methods.

Streamlines trading and eliminates inefficiencies of traditional paper-based methods.

User-friendly for all Parties

User-friendly for all Parties

The system provides buyers and sellers with a secure and efficient way to conduct transactions.

The system provides buyers and sellers with a secure and efficient way to conduct transactions.

Customized Order Management

Customized Order Management

Customers can efficiently create requests tailored to their specific needs and requirements.

Customers can efficiently create requests tailored to their specific needs and requirements.

With the “Order, Balance, History” tab

With the “Order, Balance, History” tab

Order Page

Order Page

Order placement and order management are the two major features on the order page, which allow users to place customized order and view all details and track the progress.

Order placement and order management allow users to place customized order and view all details and track the progress.

Order Details and Status Bar

Make it easy to find the details you need and monitor progress effortlessly. View value, order details, shipping rule and filled orders all in one place.

Make it easy to find the details you need and monitor progress effortlessly.

Place Order

Build your orders precisely using advanced features like incoterms, down payments, and payment terms. Additionally, view your payments quickly with rapid value calculations.

Build your orders precisely using advanced features like incoterms, down payments, and payment terms.

Shipment Management

Stay on track when updating shipment and payment status. Confirmed Field shows which orders are “awaiting confirmation,” and users can access the Details button to see comprehensive information, including the agreement log between buyer and seller.

Stay on track when updating shipment and payment status.

Balance Page

Balance Page

The balance page features three key components: Overview, Currency Balance, and Metal Balance. These elements provide users with a clear understanding of their current currency and metal balances.

The balance page provides users with a clear understanding of their current currency and metal balances.

Currency Balance

Utilize Currency Balance to effortlessly inspect your total balance status through an intuitive chart. Instantly spot pending approvals and awaiting payments without the need for multiple clicks.

Utilize Currency Balance to effortlessly inspect your total balance status through an intuitive chart.

Metal Balance

With the Metal Balance, take a quick look at the total metal balance and its distribution by type with clear charts. Select specific metals to know available, locked and pending quantities in real time, and review bought and deposit history in the inventory list.

With the Metal Balance, take a quick look at the total metal balance and its distribution by type with clear charts.

History Page

History Page

The history page features three tabs for tracking, searching and filtering orders, currency and metal histories, ensuring users can efficiently access and manage their historical data.

The history page feature ensures that users can efficiently access and manage their historical data.

Order History

Easily consolidate all order information in the Order History tab, including side, status and filled progress at a glance. Seamlessly integrate the order details page with a simple click of the view button.

Currency History

Transition to Currency History to access the complete transaction history of the currency, categorized by type for easy classification.

Metal History

For a comprehensive history of all metal transactions, simply head to Metal History. You can access data related to the type, quantity, and balance values of these transactions.

User Manual

User Manual

A detailed user manual guides users step by step to quickly get started and become familiar with the CatchMarket platform’s features and functionalities.

Style Guide

Style Guide

The style guide ensures design consistency with modern, readable typography and bright yellow as the main color. A UI kit is provided for streamlined future maintenance.

Typography

IBM Plex Sans

Regular

Medium

SemiBold

Bold

40 px

Medium

Display

28 px

Medium

Headline

20 px

Medium

Title

16 px

Medium

Body

14 px

Medium

Label

Colors

Primary

#FFCC00

Secondary

#2E3555

Success

#7ACC4E

Info

#4D95F9

Neutral

#4A4A4A

Warning

#ED8E09

Danger

#FF6559

Icons

W 24_H 24

24

24

24

24

24

24

UI Elements