Modernizing legacy finance tool

Led the re-design of a legacy finance tool in a cross-functional team. The outcome of this project resulted in enhancing client relations and more projects with the firm.

4 min readAug 16, 2020

Description:As a result of customer experience assessment, the client wanted to redesign their old legacy system and give it a modernized lift. I came into the team to lead the UX/UI efforts and also solve the challenge of making the tool easily accessible for quick data entries.

Role: UX/UI design lead. My role in this project was strictly limited to producing hi-fidelity wireframes.

Process

I came into this project with an existing customer experience assessment. My starting point was to understand the needs and pain points identified in the assessment, understand the goal and the current state of the legacy system and identify the objectives the business was trying to solve from the re-designed system.

I could validate from the existing research and client discussions that the users would not be comfortable with migration to a new system. Hence using the current legacy system as the mental model of the user, I started building wireframes to replicate the comfort of navigating pages with “Tab” key that was a favorite feature of the legacy system but still being able to incorporate UX principles for forms design.

Along with regular feedback on the wireframes, I also mapped the user flow and utilized click-through prototypes to identify gaps in the prototype.

Design Decisions

Since this was a redesign of an existing process, I had to keep the processes same as legacy systems but had the creative freedom of enhancing the experience using the design decisions.

Ability to save for later use

The users often time do not have all the information in order to complete the form, but this feature did not exist in the legacy system. A good UX would provide a user to start creating an entry and come back to it whenever they have the rest of the information. A “save as draft” saved the user entry in the Drafts section and would be readily available for the user to continue editing the form.

Keep the primary actions visible

Users prefer the easiest form of data input: upload. However there are some edge case scenarios where users would want to enter data manually. For this purpose I decided to use split button functionality to highlight the primary action and encourage users to take the easy method of entering data. The least used(and time-consuming) method was to add information manually and was hidden under a dropdown.

Accessibility: Do not hide any actions

Users whose primary job is to enter data want to be able to quickly jump to the desired section of the page in few clicks. Hiding away those sections makes it harder for people to find information and also does not give complete context on what all can be achieved on that page. For that reason I designed the screens to be able to display important information and keep secondary information grouped under buttons which explicitly call out the purpose of the button.

Visual Feedback

Based on sprint demo testing, I found that users were having trouble identifying the rows they had selected for bulk actions (edit and delete). To simplify this without impacting the developed tool, I introduced row highlights so that users can have visual feedback as they continue selecting rows.