/
Trading Sentimental Portal
Trading Sentimental Portal
STelligence | Enterprise AI Data Portal | Thailand's Leading Oil Firm | Jan–May, 2024
Role & COntribution
role
Solo UX/UI designer (student project in collab with STelligence)
Duration
5 months (Jan–May 2024)
Team
Me, 1 BA, 8 Devs, 1 University Advisor
Skills Applied
Information Architecture (IA) / UX Audit (Heuristic Evaluation) / Agile Process
Core responsibilities
• Defined user needs and requirements with BA and devs
• Audit the existing prototype, POC, and User feedback
• Designed High‑fidelity wireframes in Figma (redesign of existing system)
• Delivered two iteration cycles with stakeholder
• Provided complete developer handoff
Project Details
The Challenge
Oil market analysts faced daily 3–5 hour manual workflows: scraping news → summarizing/categorizing → Excel assembly for executive "News Flow Data" reports
The Existing System
GenAI backend already handled real-time news sync, EN↔TH summarization/translation, sentiment analysis (+/- neutral with impact ratings), and numerical extraction
TIMELINE
Approach & Process
Step 01
Discovery
BA interviews: Mapped requirements across business/user/functional layers
Dev interviews: Technical constraints (responsive, date libraries, export fields)
Secondary research: Analyzed POC feedback docs + User Journey Maps
Business
Requirement
functional
Requirement
Non-functional Requirement
Step 02
UX Audit
Used Nielsen heuristics, information architecture, and data‑heavy UI patterns
to analyze the existing table, filters, and navigation
Identified issues
Visibility of status
Recognition
vs Recall
Error Prevention
Labeling
Step 03
Redesign
Step 04
Iteration: Feedback → Redesign (agile process)
DISCOVERY:
Business requirement
News Summarization
News Categorization
News Translation
Sentiment Analysis
DISCOVERY:
Functional Requirement
Task flow
Current Flow
Manual by Human
step 01
Look up the news from various sites
step 02
Read, Summarize, Catagorize, Analyze
step 03
Collect Data and make report
New flow
Automated by AI
step 01
Real-time sync the news from various sites
step 02
Generative AI
Summarize
Catagorize
Translation
Sentiment Analysis
Manual by Human
step 03
Filter news
Select Data
Export .CSV File
Task Analysis
1
Goal
Minimize user workload and processing time
Easily create and reuse News Flow Data files
2
Inputs
DISCOVERY:
Non–functional requirement
Target User
Market Analyst (Oil&Gas)
Goal & Responsibilities
Collect daily oil price data, create reports,
and update internal stakeholders via a dedicated website
Key Pain Points
Information overload
Workflow takes too much time
Requires high user effort to complete tasks
Simple & essential functions
Quick & easy usability
Suitable for repetitive daily tasks
Minimize working time as much as possible
Maximize capacity for storing
& processing news
Enable easy creation & reuse of News Flow Data files
Key Redesign decision
Challenge
#1
Solution
Reorganized Information Architecture
User-controlled views (show/hide/Drag & drop reordering)
17 column
3 Column
News Group
date
title
content
source
summary
country
category
Sentiment Group
topic
overall
reasons
impact rating
Numerical Group
topic
context
values
unit
% change
Challenge
#2
Solution
Improved information visual hierarchy
Typography
Bold headers → Regular body → Light metadata
Readability—font size & spacing
Consistent visual hierarchy
Color
High-contrast dark mode (WCAG 4.5:1 compliant)
Clear labeling—e.g., using intuitive colors for sentiment indicators
Navigation
By adding tabs
Overview
Table
Top picks
Compare news
Challenge
#3
Solution
Extended filters
Sentiment: + / neutral / -
Today | This Week | Custom Range (consider users perform repetitive daily tasks)
Personalize the view
Show/hide columns
Drag & Drop Column Customization
Smart Search
Recommended Search (based on history and frequently searched terms)
Search keywords convert to removable chips in the search box, allowing users to easily add, edit, or delete terms for precise querying
Result count (with context, e.g., "Showing 1-10 of 42 results")
Crude
Imp/Exp
Prod.
Demand
See More
Country
US
Canada
Mexico
Columbia
Argentina
See More
Cancel
Apply
Category
Reset
Filter
Extended Feature
Add ‘Compare news’ page: Side-by-side analysis
Add ‘Top Picks’ page: Auto-ranking by impact score
Word Cloud: Key term frequency visualization
Sticky headers + checkbox freezing (responsive-optimized)
Challenge
#4
Solution
WCAG-validated, high-contrast (4.5:1)
Stakeholder Feedback & Iteration
Iteration #1
BA/Dev Review
Removed column freezing (responsive priority)
Kept sticky headers + checkbox freeze only
Date picker uses dev-preferred Tailwind/Vuetify libraries
Export field names match backend exactly
Iteration #2
Search Refinement
Combine keyword search works ("Rail US" = "US Rail")
Shows result count + highlights found keywords
Recent searches stored (Google-like)
Category-based recommendations (Crude/Imp/Exp)
Iteration #3
Final Polish
Sentiment colors standardized (Green/Orange/Red)
No tooltips (expert users know data meanings)
Dark mode WCAG validated
Figma handoff prep complete
Summary
Key Deliverables
1
Hi-fi Design & Handoff
Full flows, icons/system guidelines
Provide Dev-ready assets for implementation
2
Report & Poster Presentation
Term Project Analysis Report
Presentation at the universirty
REFLECTION
Key learnings
Practical Design
This was my first time working outside the classroom, so I worried about the design scope and what could realistically be implemented. I learned to go beyond just designing screens and also provide practical resources, such as suggesting which date library to use
Adapt Communication Style
Working in an agile process meant moving fast, trying early, and getting feedback instead of perfecting everything before discussions. Over time, I learned to adapt my communication style to the organization and its environment
What could be improved
Conduct direct user research
I could not access end users directly and had to rely on secondary data, feedback documents, and stakeholder interviews, which may have hidden important contextual nuances
