Hsiao-Yeh Yang

Work

About

Resume

Hsiao-Yeh Yang

Work

About

Resume

Hsiao-Yeh Yang

Work

About

Resume

Hsiao-Yeh Yang

Work

About

Resume

Order tracking

Improved order details readability to enhance after-sales experience.

Duration

May 2024 - Jul 2024

Team

1 UX Designer
1 GUI Designer
6 Engineers
1 Project Manager

My role

Designed information architecture, UI layouts, and wireframes.
Conducted competitive analysis.

Background

Customers were unable to find comprehensive information about their orders in the member center.

The customer service team indicated that customers were unable to find comprehensive information about their orders in the member center. Thus, I started to redesign the web pages related to order details in the member center, including order summary, order detail, order cancellation, and order return pages.

The scope of the redesign includes four order-related pages in the member center, but the order summary page and the order detail page contain the most issues. Therefore, I will focus on introducing these two pages in the following content.

Objective

Help customers find related information, check order status, and access after-sales services easily.

To achieve this goal, the order-related pages should provide comprehensive and understandable order details.

Problem analysis

The original order summary page contained redundant components and was difficult to scan.

1 The dropdown shows redundant information.

The dropdown below the title shows orders by region. Since customers can only order in one region, they do not need to see others.

1 The dropdown shows redundant information.

The dropdown below the title shows orders by region. Since customers can only order in one region, they do not need to see others.

1 The dropdown shows redundant information.

The dropdown below the title shows orders by region. Since customers can only order in one region, they do not need to see others.

1 The dropdown shows redundant information.

The dropdown below the title shows orders by region. Since customers can only order in one region, they do not need to see others.

2 The order list as a table has limited space.

The order list is made into a table which has limited space to provide additional information, such as product images and details about color.

2 The order list as a table has limited space.

The order list is made into a table which has limited space to provide additional information, such as product images and details about color.

2 The order list as a table has limited space.

The order list is made into a table which has limited space to provide additional information, such as product images and details about color.

2 The order list as a table has limited space.

The order list is made into a table which has limited space to provide additional information, such as product images and details about color.

3 The header of table is not a sticky bar.

Customers cannot easily relate corresponding categories to the information when scrolling down.

3 The header of table is not a sticky bar.

Customers cannot easily relate corresponding categories to the information when scrolling down.

3 The header of table is not a sticky bar.

Customers cannot easily relate corresponding categories to the information when scrolling down.

3 The header of table is not a sticky bar.

Customers cannot easily relate corresponding categories to the information when scrolling down.

The original order detail page displayed scattered information and hindered readability.

The order information is scattered without proper grouping, while the layout for displaying the information is not well-organized, which worsens readability.

Design highlights

Redesigned based on functional purposes and the principle of minimalism.

Highlight 1

Redesigned the order summary page to provide a clear and scannable overview for easily locating specific orders.

The purpose of the order summary page is to provide an overview of the orders so customers can scan quickly and find specific orders easily. Hence, it should be scannable, with a clear layout and logical categories.

1 Enhanced readability using a card list.

I turned the table into a card list. The card design layout can contain more and clearer information for each order.

1 Enhanced readability using a card list.

I turned the table into a card list. The card design layout can contain more and clearer information for each order.

1 Enhanced readability using a card list.

I turned the table into a card list. The card design layout can contain more and clearer information for each order.

1 Enhanced readability using a card list.

I turned the table into a card list. The card design layout can contain more and clearer information for each order.

2 Used card title to highlight order status.

Since customers are primarily concerned with the delivery process after placing an order, I designed the card title to display the order status.

2 Used card title to highlight order status.

Since customers are primarily concerned with the delivery process after placing an order, I designed the card title to display the order status.

2 Used card title to highlight order status.

Since customers are primarily concerned with the delivery process after placing an order, I designed the card title to display the order status.

2 Used card title to highlight order status.

Since customers are primarily concerned with the delivery process after placing an order, I designed the card title to display the order status.

3 Enabled searching orders by process.

I replaced the regional orders dropdown with a filter that helps customers easily find orders by process.

3 Enabled searching orders by process.

I replaced the regional orders dropdown with a filter that helps customers easily find orders by process.

3 Enabled searching orders by process.

I replaced the regional orders dropdown with a filter that helps customers easily find orders by process.

3 Enabled searching orders by process.

I replaced the regional orders dropdown with a filter that helps customers easily find orders by process.

Highlight 2

Redesigned the order detail page to deliver comprehensive order information and clear follow-up guidance.

The purpose of the order detail page is to provide comprehensive information about each order and allow easy access to after-sales services. Therefore, it should contain complete order information and the guidance customers need to follow up.

1 Organized information into clear sections.

I organized the order details into sections to provide a clearer information structure, making it easier for customers to find similar information.

1 Organized information into clear sections.

I organized the order details into sections to provide a clearer information structure, making it easier for customers to find similar information.

1 Organized information into clear sections.

I organized the order details into sections to provide a clearer information structure, making it easier for customers to find similar information.

1 Organized information into clear sections.

I organized the order details into sections to provide a clearer information structure, making it easier for customers to find similar information.

2 Created an order management section.

I designed an order management section for cancellations and returns, simplifying access to after-sales services.

2 Created an order management section.

I designed an order management section for cancellations and returns, simplifying access to after-sales services.

2 Created an order management section.

I designed an order management section for cancellations and returns, simplifying access to after-sales services.

2 Created an order management section.

I designed an order management section for cancellations and returns, simplifying access to after-sales services.

3 Created FAQ section for extra instructions.

I designed a FAQ section to organize introductions or annotations about the order which were previously scattered and hard to follow.

3 Created FAQ section for extra instructions.

I designed a FAQ section to organize introductions or annotations about the order which were previously scattered and hard to follow.

3 Created FAQ section for extra instructions.

I designed a FAQ section to organize introductions or annotations about the order which were previously scattered and hard to follow.

3 Created FAQ section for extra instructions.

I designed a FAQ section to organize introductions or annotations about the order which were previously scattered and hard to follow.

Highlight 3

Created a stepper to visualize order process.

I redesigned the order status from plain text into a stepper, allowing customers to clearly see the current stage and what to expect next.

Designed three steppers for outgoing and reverse logistics.

I created three types of steppers, including ones for outgoing and reverse logistics. They help customers clearly understand all stages and the current status of their order process.

Ensured consistency while maintaining flexibility for region-specific logistics.

Since the order process varies across regions, I first analyzed and rewrote complex or unclear texts to improve readability. Then, I categorized and aligned the order statuses into shared stages to ensure consistency while accommodating regional differences.

Designed a vertical stepper for smaller devices to improve readability and usability.

On smaller devices, the horizontal stepper caused content overflow, leading to complex interactions and higher development effort. To resolve this, I redesigned the stepper vertically, making it easier to read and use on compact screens.

Result

The new design created easy access and better readability of the order information and improved the after-sales experience.

My supervisor was satisfied with my work, as I fulfilled the primary goal and independently completed this project from end to end.

Lessons learned

Gaining stakeholder alignment through clear design rationale.

Through this project, I learned to clearly communicate design decisions and persuade stakeholders. When European regional officers suggested placing the “Manage My Order” section at the top fold, I explained that the page structure prioritized essential information and actions, while not encouraging cancellations and returns. I also highlighted how the new design improved clarity with a structured layout, clear titles, and a visible Call-to-Action, ensuring the section would not be overlooked. As a result, they accepted the proposal.