Building a credit system from scratch


When something goes wrong with an order, whether an order is damaged in some way, or an order is duplicated by accident, CaseStack may be responsible for crediting the customer for the error. Currently, the request and approval process is done through Excel and email. This makes it difficult for users to keep track of the credit memos they have requested for customers, since a lot of the process can be lost in translation through email. Tasked with creating a credit memo system, the design team was responsible for the end to end process of researching and designing the credit memo platform for a variety of users.


Erika Friend, Jeremy Knight

My Roles

UX/UI Designer, User Researcher, Usability Tester

credit memos 1.png
credit memos 2.png
credit memos 3.png
credit memos 4.png
credit memos 5.png


Screen Shot 2019-09-15 at 7.34.15 PM.png

We began initial research with the user groups to understand each of their processes. We discovered that there were three main user groups: the Finance team, who were the ultimate approvers of the credit memos, allowing the credit memos to be captured in our accounting system, MAS500, the Supply Chain Analysts/Client Development Managers/Account Representatives (let's call them requesters) who request the credit for the customer, and the managers, who approve the credit memos. 

Each user group was looking for a streamlined, easy way to capture credit memo information, that way the approvers could have all of the information needed to ultimately approve or decline the credit request.

Building a user flow for each user group helped us understand both how each user group comes into the credit making and approving process, as well as how we would like the platform to work.

Initial Wireframe.png

Once we understood the user needs, we built the wireframes above to understand whether we were heading down the right path in terms of functionality and vision for the platform. 

Create credit memo modal

Dropdown to capture the order number, invoice number, month of the invoice, and the amount

We knew the creation of the credit memo could be a modal, since there wasn't a ton of information required to submit a credit memo request. We learned that both the finance team and the requesters needed similar information to be able to choose/approve a credit. On both sides, they're going through potentially hundreds of credits, so to see the invoice number, order number, invoice month and amount, would help in choosing the right credit memo to request, along with the finance side being able to approve credit memos. 

Credit memo table view

The table view allows all user groups to see the status of each of their credit memos, whether it be a requester, a manager, or a finance user. This screen serves as the "homepage" of the credit memo platform.

History section shows the notes/extra details of the credit

Managers can approve or decline from this page

This is more of an "at a glance" for a specific credit memo that's clicked on from the table view. On this page, users can add notes about the credit memo, and the managers can approve or decline the credit memo as well. This page is specifically for users who just want to focus on one credit memo at a time, and in detail.

Usability/ A/B Testing

Page view
credit memo 3.png

I used the credit detail wireframe to help in designing the hi-fidelity mock up seen above. Splitting the view allows the user to see both the details and activity thread all above the breakpoint of the screen.

Side Panel view
credit memo 1.png
credit memo 2.png

The side panel design came up when I realized users might want to flip through credit memos while staying on the table.  Users can flip between details on the credit and activity by clicking back and forth on the tabs.

I tested both of these views with all three user groups, and the testing results were nearly split! The side panel view ended up being chosen, as it was slightly more preferred and overall, better met the needs of the users.

Create Modal

The table view allows each user group to see the status of each credit memo, and add notes. The platform would also need a way of being able to create these credit memos in the system. Previously this was done through excel (as shown below).

Previously used form...
New Modal...

Streamlined, easy to use form capturing all of the information a manager or finance team member needs to learn all about the credit memo requested.

Credit Memos Application Demo
What's next?

Credit Memos went live for half of its users at the end of April, and was released to the other half of its users in Mid May 2020. We've already identified phase two items such as in-platform notifications of when a status has changed on a credit memo, an archive of closed credit memos, external notes to send to the customer about the credit and more.

© 2020 Erika Friend