Revamping customer information in supply chain management system 

Overview

CaseStack's main platform for operations, CSIL helps Supply Chain Analysts and Client Development Associates, and other roles on the business side perform their everyday duties. Because the user requests have become vast, a redesign was needed for the Customer Page in CSIL.  

Team

Erika Friend, Michael DeGothseir

My Roles

UX/UI Designer, Usability Tester

Current Customers Page

Users currently see all of the CaseStack customers in a list view. They can search by using the filters. 

When a row is clicked, a side panel will come out, showing customer information such as their active warehouses and their point of contacts. 

I'm a paragraph. Click here to add your own text and edit me. It's easy.

User requests mainly dealt with adding more information and ensuring accurate information was shown, since a lot of the information currently shown in the panel is out-of-date, and the user has no way of updating that information.  Additionally, there was a need to show Electronic Data Interchange (EDI) settings that each customer has setup with CaseStack. EDI settings can include notices like sending notifications that inbound shipments have arrived to inventory adjustments. 

Usability Testing

Primary users are Client Development Associates, who are in constant contact with the warehouse to ensure operations are running smoothly. 

We tested two different versions of designs to pinpoint what users were looking for and what aspects of each they liked best. 

Version 1 (box-based layout for easy readability)

Version 2 (line division for easy readability)

Performing contextual inquiries and usability testing helped to identify areas of improvement in the current design, but more so aided the design team in answering the question - "Which version is easier for you to use and why?"  

Version 1 

Version 2 

  • Preferred layout

  • Easier to read the information and see a division in the different types of content

  • Attachment tab was well-liked

  • EDI tab was organized well

  • Liked copied to clipboard feature 
     

After testing with our primary users, Client Development Associates and our secondary user group, Supply Chain Analysts, we found that version 1 was preferred amongst the majority of users, but, as we assumed, there were aspects of both designs that users liked, so another iteration of the design was created.

Hi-Fidelity Mockups

Optimizing the Visual Design

Modal interactions defined for each section

Warehouse type added

Layout redesigned for more modern feel and combining aspects of each version of the previous designs 

Final Result

Because this project was specced out from the start and previously researched, the customer page was more focused on creating a visually appealing and intuitive experience for the users. Additionally, since this will continue to be built upon in the future, it was important for me to keep that in mind as I created the final design. The goal of this page is to eventually be a one-stop-shop for everything related to CaseStack customers. I was excited by the result and being a part of the MVP!

© 2020 Erika Friend