Energy Trading Foundations
At a Glance
Problem
Pre-launch workflows showed signs of complexity, with dense screens and hard-to-scan data.
Approach
Ran UX audits and shadowed traders to surface friction points and improve first-use clarity.
Collaboration
Worked with UX and Dev teams to implement collapsible views and task-focused layouts.
Outcome
Enabled faster decisions with streamlined data views and personalized controls — from start.
Due to confidentiality, original designs cannot be shared. The visuals here illustrate the design direction and problem-solving approach.
Overview
Defined workflows and designed key pages like Hedge Contracts and Client Processes for an Energy Trading Risk Management (ETRM) platform at Customized Energy Solutions Ltd. Audited screens, shadowed traders, and simplified layouts to reduce friction. Improvements focused on data clarity, reduced scrolling, and faster decisions at launch.
Role
UX Design Intern in Retail Market Services
Duration
10 Weeks
Tools
Figma
Miro
Confluence
My Approach
My Approach
How I Uncovered
I
Contextual Inquiry
Shadowed a trader to uncover navigation issues and repetitive tasks slowing down daily workflows.
II
UX Audit & Analysis
Audited system workflows to map redundant steps and identify areas needing simplification.
III
Industry Research
Explored trends to propose practical design ideas supporting trading efficiency.
How I Uncovered
I
Contextual Inquiry
Shadowed a trader to uncover navigation issues and repetitive tasks slowing down daily workflows.
II
UX Audit & Analysis
Audited system workflows to map redundant steps and identify areas needing simplification.
III
Industry Research
Explored trends to propose practical design ideas supporting trading efficiency.
The Challenges
For Hedge Contracts: Among various workflow inefficiencies, excessive horizontal scrolling across 22 dense columns emerged as the primary barrier preventing traders from making quick, confident decisions during time-sensitive market analysis.
For Client Processes: While multiple pain points existed, the combination of redundant data entry and excessive vertical scrolling created a compounding frustration that fundamentally broke the workflow efficiency traders needed.
The Challenges
For Hedge Contracts: Among various workflow inefficiencies, excessive horizontal scrolling across 22 dense columns emerged as the primary barrier preventing traders from making quick, confident decisions during time-sensitive market analysis.
For Client Processes: While multiple pain points existed, the combination of redundant data entry and excessive vertical scrolling created a compounding frustration that fundamentally broke the workflow efficiency traders needed.
Hedge Contracts Page
The Hedge Contracts page forced traders to scroll horizontally across 22 dense columns, slowing down analysis and decision-making.
Hedge Contracts Page
The Hedge Contracts page forced traders to scroll horizontally across 22 dense columns, slowing down analysis and decision-making.
Solution
The redesign focused on minimizing horizontal scrolling, improving data clarity, and empowering traders with personalized controls.
Final redesigned Hedge Contracts Page with key features highlighted
Scroll Reduction Solutions
Designed to reduce visible columns from 22 to 14 fitting a standard desktop view.
Focused on trader workflows — removed repetitive columns with static data.
Personalized presets allowed users to save and reuse their preferred layouts.
01
Preset Columns for Streamlined Data Views
02
Right-Side Drawer for Static Data
03
Display Density Customization
Personalized Controls
04
Additional Column Menu
05
Help View Drawer
Solution
The redesign focused on minimizing horizontal scrolling, improving data clarity, and empowering traders with personalized controls.
Final redesigned Hedge Contracts Page with key features highlighted
Scroll Reduction Solutions
Preset Columns for Streamlined Data Views
Right-Side Drawer for Static Data
Display Density Customization
Personalized Controls
Additional Column Menu
Help View Drawer
Wireframes & Sketches
Wireframes & Sketches
Client Processes Page
Each process took up the entire screen width, causing excessive vertical scrolling. Redundant, repetitive data entry created friction and slowed down the task. Lack of clarity forced users to re-check or re-enter the same information.
Process page before redesign — repetitive fields and excessive vertical scroll.
Client Processes Page
Each process took up the entire screen width, causing excessive vertical scrolling. Redundant, repetitive data entry created friction and slowed down the task. Lack of clarity forced users to re-check or re-enter the same information.
Process page before redesign — repetitive fields and excessive vertical scroll.
Solution
The redesign focused on reducing vertical scrolling, grouping related processes, and empowering traders with contextual guidance and intuitive controls to improve task completion efficiency.
Final redesigned Client Processes Page with key features highlighted
Workflow Improvements
01
Single Input for Company Selection
Enabled one-time company selection applied across all processes.
Eliminated repetitive data entry, reducing cognitive load.
02
Tabbed View for Process Grouping
03
Dynamic Fields Based on Context
04
Guide Panel for Contextual Help
Solution
The redesign focused on reducing vertical scrolling, grouping related processes, and empowering traders with contextual guidance and intuitive controls to improve task completion efficiency.
Final redesigned Client Processes Page with key features highlighted
Workflow Improvements
01
Single Input for Company Selection
Enabled one-time company selection applied across all processes.
Eliminated repetitive data entry, reducing cognitive load.
02
Tabbed View for Process Grouping
03
Dynamic Fields Based on Context
04
Guide Panel for Contextual Help
Wireframes & Sketches
Wireframes & Sketches
What I learned
Engaging stakeholders helped me see usability challenges from multiple views.
Streamlining navigation clarified how efficiency shapes user satisfaction.
Aligning design reinforced the need for scalable, consistent interfaces.
Applying feedback showed how iterations refine user experiences.
What I learned
Engaging stakeholders helped me see usability challenges from multiple views.
Streamlining navigation clarified how efficiency shapes user satisfaction.
Aligning design reinforced the need for scalable, consistent interfaces.
Applying feedback showed how iterations refine user experiences.
What I would do differently...
01
Expand research scope to include more external client feedback earlier in the process.
02
Implement continuous usability testing for feature-specific refinements.
03
Explore more advanced customization options for diverse user needs.
04
Introduce micro-interactions to guide users during multi-step processes.
What I would do differently...
01
Expand research scope to include more external client feedback earlier in the process.
02
Implement continuous usability testing for feature-specific refinements.
03
Explore more advanced customization options for diverse user needs.
04
Introduce micro-interactions to guide users during multi-step processes.
Back to top