DZH International

Seamless, Real-Time Market Data & Investment Tracking Experience

Role

UX/UI Designer

Industry

Share Market

Duration

1 month

Project Overview

DZHITradev3 is a stock trading platform aimed at providing users with an intuitive, efficient, and feature-rich trading experience. The platform includes functionalities such as stock watchlists, order management, profit/loss tracking, portfolio details, market analytics, and personalized settings.

Objective

The primary goal was to refine the user experience by enhancing usability, navigation, and accessibility of key trading features. Special focus was placed on simplifying complex trading data representation, improving interactive elements, and optimizing UI responsiveness.

User Flow & Key Features

Login & Personalization

Remember ID for seamless login experience.
Different login interfaces based on user history.
Multi-language support.

2. Market Insights

Tab-based navigation with a slide-up menu for quick switching.
"Top Picks" stocks displayed in a card layout.
Easy watchlist management with quick add/remove options.

2. Market Insights

Create and rearrange multiple watchlists easily.
Slide-up editor for renaming, deleting, and reorganizing watchlists without pop-ups.

Order Management

Slide-up filters for refining order views.
Expandable order details with a one-touch copy feature for Order Numbers.

2. Profit & Loss (P/L) Visualization

Unrealized & Realized P/L: Credit-card layout with:
Data masking for privacy.
Screenshots for easy sharing.
Interactive graphs for data filtering.

Portfolio & Market Tracking

Quick stock addition to watchlists.
Expandable/collapsible market details.
Alerts with full-screen slide-up mode.
Trade summary & time-sales data accessible via touch navigation.

Customization & Preferences

Change login credentials within the app.
Set personalized landing pages.
Search functionality for easier stock lookup.
Bottom menu with logout, settings, and preferences.

Project Overview

Objective

User Flow & Key Features

Login & Personalization

Remember ID for seamless login experience.
Different login interfaces based on user history.
Multi-language support.

2. Market Insights

Tab-based navigation with a slide-up menu for quick switching.
"Top Picks" stocks displayed in a card layout.
Easy watchlist management with quick add/remove options.

2. Market Insights

Create and rearrange multiple watchlists easily.
Slide-up editor for renaming, deleting, and reorganizing watchlists without pop-ups.

Order Management

Slide-up filters for refining order views.
Expandable order details with a one-touch copy feature for Order Numbers.

2. Profit & Loss (P/L) Visualization

Unrealized & Realized P/L: Credit-card layout with:
Data masking for privacy.
Screenshots for easy sharing.
Interactive graphs for data filtering.

Portfolio & Market Tracking

Quick stock addition to watchlists.
Expandable/collapsible market details.
Alerts with full-screen slide-up mode.
Trade summary & time-sales data accessible via touch navigation.

Customization & Preferences

Change login credentials within the app.
Set personalized landing pages.
Search functionality for easier stock lookup.
Bottom menu with logout, settings, and preferences.

Challenges & UX Improvements

1. Profit/Loss Indicators

Issue: The current red/green line at the bottom of the card to indicate profit/loss might not be intuitive.
Solution: A more explicit visual cue such as color-coded badges or percentage-based indicators.

2. Graph Interaction

Issue: Users may not realize they can tap on the bottom-right graph for more details.
Solution: Introduce tooltips or subtle animation on hover/tap.

2. Alert Management UI

Issue: Need for a better Add/Update Alert UI pop-up.
Solution: A simplified, step-by-step alert-setting flow with clear confirmation steps.

2. Market Status Indicators

Issue: Lack of clarity in differentiating real-time and delayed data.
Solution: A sand clock icon inside the red/green/yellow status circle to indicate delayed data.

2. Expand/Collapse Tables

Issue: Current table layout cannot display all content nicely.
Solution: Implement expandable rows with progressive disclosure for better readability.

Final Outcome

By addressing these UX dilemmas, the DZHITradev3 platform now provides a more user-friendly and intuitive trading experience. The streamlined navigation, improved data visualization, and enhanced market interaction ensure that traders can make quick, informed decisions effortlessly.

Challenges & UX Improvements

1. Profit/Loss Indicators

Issue: The current red/green line at the bottom of the card to indicate profit/loss might not be intuitive.
Solution: A more explicit visual cue such as color-coded badges or percentage-based indicators.

2. Graph Interaction

Issue: Users may not realize they can tap on the bottom-right graph for more details.
Solution: Introduce tooltips or subtle animation on hover/tap.

2. Alert Management UI

Issue: Need for a better Add/Update Alert UI pop-up.
Solution: A simplified, step-by-step alert-setting flow with clear confirmation steps.

2. Market Status Indicators

Issue: Lack of clarity in differentiating real-time and delayed data.
Solution: A sand clock icon inside the red/green/yellow status circle to indicate delayed data.

2. Expand/Collapse Tables

Issue: Current table layout cannot display all content nicely.
Solution: Implement expandable rows with progressive disclosure for better readability.