解構後台設定流程的設計挑戰與策略

B2B

Admin

E-commerce

Web

Desktop

解構後台設定流程的設計挑戰與策略

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

產品類型

電商後台管理

功能域

商品管理、訂單管理、擴充功能、促銷管理

專案期間

2024.10 － 2025.08

Company

OEC Group － LIS Technology

Role

UIUX Design Intern
Project Owner

Responsibility

Wireframe / Mockup

Company

OEC Group － LIS Technology

角色

專案負責設計師

公司

SHOPLINE

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.

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.

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.

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.

As of August 19, 2024, the project is still ongoing.
Significant optimizations have been achieved,
and we are currently awaiting the updated BRD to make further revisions based on the new requirements before final delivery.