Please note that some artifacts and sensitive information will be post-processed or excluded for confidentiality issues. All rights reserved to the publisher and designed institution(s) with no distribution. 

Overview

Mi9 Retail was looking for a digital transformation for one of their major product in merchandise management. The application almost covers every aspect of merchandising, which includes: purchasing, inventory management, organization, order management, packaging, replenishment, and much more. The application has been adopted by many retailers such as Barneys and Century 21. I was hired as the UX designer in the product team and worked on several modules for this application.

The application was written in VB .net framework which is slowly losing its advantages in today’s standard. The product team was hoping to re-format the application in AngularJS with an improved user experience and user interface.

Challenge

There are several challenges to this transformation:

• The first one is the complexity of the existing business logic. As a legacy application that had been around for almost two decades, the application itself has been deeply customized for each client, makes it difficult to “clean-up” and uniform.

• The second one is the amount of information that needs to be viewable. As a desktop application, the current layout and information architecture would not work on the web or touch devices. We might need to do some adjustments during the redesign.

• The last one is uniformity. This application is only one of its products. The company’s vision is to have a uniform design language to connect all products.

Design process

Before working on revamping any modules, it is necessary to know the “in and out” of the business logic, especially for a product like this. To achieve this, I initiated regular meetings and connections with our enterprise architect and senior business analysts to make sure that I got enough information about the technical infrastructure, use cases, and data configuration. This exercise ensured that the redesign only contains the necessary information other than client-specific features.

It wasn’t easy to build a common design language to corporate all of the products, especially since some of the products have already been revamped into web apps and have their own design languages planned out. Thus, I started out with a general design system with tokens (i.e. colors and fonts etc.) on each component for product-specific customization features.

One of the challenges for this re-design was to make sure that the new web app can handle a large amount of data flow as that of the desktop version did. The data table plays a crucial role in the application. The re-design not only needs to satisfied the business requirements (i.e. all columns need to be seen in the view as well as following specific category standard for different industries) but also able to perform smoothly for thousands of records. After many sessions of consulting, researching, and experiments with the business team, development team, and field experts, we deconstructed the data table into several components which can regroup for different patterns to satisfy different requirements.

Example wireframes