Energy Trading Redesign

At a Glance

Problem

Traders struggled with cluttered data and inefficient workflows, leading to delayed decision-making and reduced productivity.

Approach

Conducted UX audits, contextual inquiries, and user shadowing to map pain points. Redesigned workflows and navigation to reduce cognitive load and improve task completion.

Collaboration

Worked closely with UX Leads, Product Managers, and Developers to implement collapsible panels and a side drawer for clearer data presentation and faster access to critical information.

Outcome

Improved data clarity, reduced navigation friction, and enabled traders to customize views, leading to faster decision-making and increased efficiency.

Due to confidentiality, original designs cannot be shared. The visuals here illustrate the design direction and problem-solving approach.

Overview

Redesigned Hedge Contracts and Client Process workflows for an Energy Trading Risk Management (ETRM) platform to improve trader efficiency and data clarity at Customized Energy Solutions Ltd.

Led UX audits, trader shadowing, and workflow analysis to uncover bottlenecks and optimize decision-making for traders and analysts.

Role

UX Design Intern in Retail Market Services

Duration

10 Weeks

Tools

Figma

Miro

Confluence

My Approach

What 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.

What 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

Our user research surfaced two critical friction points within the Energy Trading platform — each tied to a specific workflow: Hedge Contract Page → Suffered from excessive horizontal scrolling due to data-heavy tables. Client Process Page → Faced both redundant data entry and excessive vertical scrolling disrupting task completion.

The Challenges

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

01 Preset Columns for Streamlined Data Views

02 Right-Side Drawer for Static Data

03 Quick View Panel

04 Display Density Customization

Personalized Controls

05 Additional Column Menu

06 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

Quick View Panel

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

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

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

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.

Up Next

Energy Trading Redesign

Billing Portal Redesign

UX Bank

Reworking Familiar Interfaces

UX by the Numbers: Amazon Product Page

Visual Review Analytics

Academate

SVR

SVR