B2B Accounting Module Optimization

UX

B2B

ERP System

Web

Desktop

B2B Accounting Module Optimization

B2B Accounting Module Optimization

B2B Accounting Module Optimization

Designed a clear and user-friendly interface for complex accounting logic

Designed a clear and user-friendly interface for complex accounting logic

Duration

2024.06 - Current

Role

UIUX Design Intern
Project Owner

Role

UIUX Design Intern
Project Owner

Responsibility

Wireframe / Mockup

Responsibility

Wireframe / Mockup

Company

OEC Group - LIS Technology

Role

UIUX Design Intern
Project Owner

Responsibility

Wireframe / Mockup

Company

OEC Group - LIS Technology

Responsibility

Wireframe / Mockup

Company

OEC Group - LIS Technology

Background

Match Transaction is an accounting module,
which is a new feature of internal ERP system.

User

Global accountants in OEC Group

Feature

This module is to clear payments based on payment requests list.

My Role

I’m the owner of this project as an UIUX intern, having a senior designer serving as my consultant.

Responsibility

  • Turning BRD into flow chart, wireframe and Mockup

  • Meeting with and presenting to ERP team

  • Handoff with F2E

Challenge & Goal

Unclear field relationships and illogical hierarchy placement

Even with the BRD and explanations from the ERP team,
it still took us a LONG time to understand the logic.

As a result, we strongly felt that this interface really needed a MAKEOVER.

How to turn complex accounting logic into a clear and structured interface

This accounting module features:

  • extensive information

  • complex field relationships

  • multiple calculations on a single page

Therefore, my priority goal is to simplify the complex logic into a clear and structured interface.

Problem-Deliverables

Problem 1

Unclear field relationships & user goal

There are many multiplication or summation between fields, 
but they were completely unclear.

Solution

Structured the UI to highlight the user goal

Optimization Detail →

Problem 1

Unclear field relationships & user goal

There are many multiplication or summation between fields, 
but they were completely unclear.

Solution

Structured the UI to highlight the user goal

Optimization Detail →

Problem 2

Illogical hierarchy placement

Some fields have a specific order of operations or filtering relationships, but their placement does not align with this.

Solution

Use stepper to organized the order

Optimization Detail →

Problem 2

Illogical hierarchy placement

Some fields have a specific order of operations or filtering relationships, but their placement does not align with this.

Solution

Use stepper to organized the order

Optimization Detail →

Problem 3

Unclear currency labeling

During the totaling process, multiple currency conversions are required, but they are not clearly labeled.

Solution

Clear currency & conversion process

Optimization Detail →

Problem 3

Unclear currency labeling

During the totaling process, multiple currency conversions are required, but they are not clearly labeled.

Solution

Clear currency & conversion process

Optimization Detail →

Takeaway

More comprehensive & thoughtful consideration

Due to the complexity of this project and being given full responsibility, my design thinking skills have significantly improved.

1

Deeper analysis of references

When reviewing other products, 

I consider details and context more thoroughly. 



For example, I noticed that some products with a stepper flow include a review step at the end. 

However, unlike those that return to the dashboard, the MT module stays on the display state.

Therefore, I chose not to include a final review step.

2

More comprehensive design decisions

Before making a design decision, 

I thoroughly consider all scenarios and page states. 



For example, when using a stepper component, 

I thought all states through, such as create, display and edit states.

3

Thoughtful consideration for adding new components

This includes evaluating whether it's worthwhile to create a new component for a specific case
and ensuring a clear guidelines are established.

Sherry Sung 宋昱萱

Sherry Sung 宋昱萱