My Order
Customers were unable to access comprehensive order details in the member center after placing their orders. Therefore, I started to redesign the order-related pages by planning a clearer information structure and designing a UI layout that provides straightforward readability.
Duration
May, 2024 - Jul, 2024
Team
1 UX Designer, 1 GUI Designer, 6 Engineer, 1 Project Manager
My Role
As a user experience designer, I independently redesigned the order-related pages by conducting competitive analysis, organizing the information structure, and designing wireframes to create easy access and better readability of the order information and improve after-sales experience.
Background
The customer service team indicated that customers were unable to find comprehensive information about their orders in the member center. Thus, the UX team decided to redesign the web pages related to order details in the member center, including the Order Summary Page, Order Detail Page, Order Cancellation Page, and Order Return Page.
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
Our major goal is to provide comprehensive and understandable order details to help customers find related information, check order status, and access after-sales services easily.
Challenges
The most challenging part is organizing the information and proposing a design that fulfills the needs of different regional websites. Currently, the presented information and UI layout of the member center in different regional websites are inconsistent, as the pages are created by different teams according to their specific needs. This inconsistency not only goes against the brand consistency but also makes maintenance difficult for the development team. Therefore, the new design is expected to not only meet the primary objective but also suit the needs of different regions.
Tasks
I conducted the following tasks to meet our design objective and overcome the challenges.
- Conduct competitive analysis to find inspiration for better solutions.
- Analyze the existing pages in the member center from different regional websites, including America, Latin America, Europe, Asia-Pacific, and Taiwan. By grouping the information and understanding the rationale behind the existing design, I could create a new design that fulfills the needs of different regional websites.
- Propose the new design and align thoughts by creating wireframes.
- Introduce the new design to stakeholders and collect feedback from them to keep optimizing the design.
Issues of the Original Design
Order Summary Page
- The category dropdown below the title shows orders for different regions. However, since customers can only place orders in one region, they do not need to see orders from other regions.
- The order list is made into a table which has limited space to provide additional information, such as product images and details about color.
- The header of the table is not a sticky bar. Thus, customers cannot easily relate corresponding categories to the information when scrolling down.
Order Detail Page
- The order information is scattered without proper grouping.
- The layout for displaying the information is not well-organized, which worsens readability.
Highlights of the Redesign
Order Summary Page
I consider that the purpose of this page is to provide an overview of the orders so customers can scan quickly and find specific orders easily. Hence, the Order Summary Page should be scannable, with a clear layout and logical categories.
1
Filter
I removed the category dropdown and added a filter to help customers easily find specific orders based on the order process.
2
Card List
I turned the table into a card list, with each card representing an order. The card design layout can contain more and clearer information.
3
Card Title
The title of each card represents the order status, as customers are primarily concerned about the delivery process after placing an order.
4
Empty Page
I created an empty page with a Call-to-Action button leading customers to the official e-commerce website when they have not placed any orders yet.
Order Detail Page
I believe the purpose of this page is to provide comprehensive information about each order and allow easy access to after-sales services. Therefore, the Order Detail Page should contain complete order information and the guidance customers need to follow up. The order information aligns with the order email I redesigned previously.
1
Stepper
The original order status was just text. To better show the order process, I designed a stepper so customers can see the current status and know what to expect next.
2
Sections
I organized the order details into sections to provide a clearer information structure, making it easier for customers to find similar information.
3
ETA Banner
I designed a banner to display the estimated arrival time for each item.
Initially, I placed this information within the stepper to notify customers of the estimated arrival time for their order.
However, after discussing with the project manager, I discovered that items could be partially shipped in some regions, resulting in multiple estimated arrival times.
Therefore, I decided to use a banner to indicate the estimated arrival time for each item precisely.
4
Manage My Order
I added a section for customers to manage their orders, such as canceling or returning orders.
5
FAQ
I added a FAQ section to organize introductions or annotations about the order which were previously scattered and hard to follow.
The Most Complex Component - Stepper
The stepper is the most complex component on the order detail page, because the order process varies significantly across regions.
Firstly, I analyzed all the original order statuses from different regional websites and found that some texts were terminological and hard to understand, such as “Send to ERP Success.” Therefore, I mapped out and rewrote the order status texts to enhance readability, and asked the Regional Officers to review the new order status texts.
Secondly, I aligned and categorized different order statuses into common stages, improving consistency while allowing flexibility to show specific order statuses according to local logistics.
Moreover, I designed three types of stepper, including the ones for outgoing and reverse logistics. Generally, the outgoing logistics stepper is presented by default. When customers cancel or return their orders, the stepper switches to the reverse logistics version based on their actions.
Lastly, for better readability and easy scrolling on a smaller screen, I made the stepper vertical instead of horizontal.
Results
The new design I proposed offers comprehensive order information and easy access to after-sales services. My supervisor is satisfied with my work, as I fulfilled the primary goal and independently completed this redesign project from end to end.
Lessons Learned
Through this project, I learned to clearly express my design purpose and persuade stakeholders. When I introduced the new design to the Regional Officers in Europe, they asked if it was possible to place the “Manage My Order” section in the first fold because they were concerned that customers might miss it.
I explained how I determined the order of the sections to them and addressed their concerns. Firstly, the order of sections is designed according to the most important information and actions that customers care about. Secondly, the actions in the “Manage My Order” section involve canceling and returning orders, and we do not want to encourage these actions. Therefore, this section should not be highlighted. Moreover, the new order detail page now features a clear information structure, straightforward titles, and an outlined Call-to-Action button, making it less likely for customers to miss this section than before. As a result, they accepted the proposal.
