As Director of UX/UI design for a financial software company with dozens of products, many of which are outdated or have usability issues, I worked with our financial analyst to pull data and reports on product effectiveness, product closing ratio on demos, and user satisfaction to prioritize which products were most in need of redesigns.

Our Sage 50 integration emerged as one of the least used and least successful products of ours, so my team and I set out to redesign the application. 

Before & After

Usability issues & user pain points

We began the redesign with a series of steps I often begin projects with:

• We conducted heuristic evaluations, cognitive walkthroughs, and a competitive analysis of other Sage 50 payment integrations
• We conducted user feedback sessions and user testing in order to identify the usability issues, needs, and wants of our existing users
• We reviewed all incoming and past feature requests for the application to narrow in on missing functionality
• We interviewed customer support members to hear the pain points they have heard from users over the years
• Lastly, we interviewed members of the sales department to hear the points of resistance they hear when demoing the integration and reasons for failed sign-ups of prospective merchants

Defining personas, workflows, and use cases

Once we identified usability issues and pain points, we spent a great deal of time defining who the users are, why they're using our application, what workflows they're currently accomplishing, and brainstorming about new features or enhancements that could be added to automate and streamline some of these workflows.

Wireframes & early feedback

Armed with user insights, design solution ideas for usability issues, and defined requirements for the new application, we used Balsamiq to create wireframes for design sessions and informal A/B testing. 

UI Styling​

Since we are redesigning an existing desktop application with certain development restraints in a short time-frame, we decided on using a theme from Telerik UI for WPF for the UI styling. We made design decisions within the constraints and made high-fidelity mockups based on our wireframes.

The Redesign

The redesigned application incorporates the feedback and feature requests we received from existing users, and reflects the usability improvements we came up with. The designs are currently in user testing and are subject to change based on feedback.

We created a larger, more responsive plugin that has more features, added customizability, a more modern UI, visual consistency, and clearer indicators of actions and status.  

Overall, we added more error prevention, auto-populated fields, and confirmation messages throughout, as well as info icons with tool tips that appear upon hover in order to accommodate novice users and reduce the need for users to recall everything from their initial training.

New Transaction

The layout of this core screen was changed to better utilize the screen real estate and reflect the most common workflows. 

The navigation is now on the left-side, and can be expanded or docked by default depending on user preference.

We improved customer selection by adding the ability to search with real-time results for customer name, customer ID, or company name. 

An expandable/collapsible side panel was added to display the most recent transaction from any part of the app. Color and icons are used for easier and quicker scanning. ​

Selecting payment method

Successful transaction

Transaction History

For transaction history, we made rows more spacious for better readability and changed formats of some columns to be clearer (e.g. we changed the payment method format to the card type icon + "ending in 2342"). 
​
Selecting a specific transaction expands a side panel that allows users to drill into more details of the transaction and complete further actions. We conducted card sorting with users to reveal mental models that helped determine how the transaction data is grouped on the detail panel. 

Recurring Payments

We added the ability to set up recurring billing for customers based on feedback and market research. 

Email Pay 

This screen allows users to email their customers with a link to a secure web form where the customer can view and pay off their invoice via a secure web form. 

We changed the selection layout so users can now send requests to multiple customers at once, instead of only being able to send requests to one customer at a time. 

We also added the ability for customers to edit a customer's email address and the amount they want to collect from their customer with editable fields in the table. We also added a clearer and more visual way to add invoices to the emails to be sent list on the right.

Batch Transactions

This section allows users to process payments on many invoices for varying customers in one bulk transaction. This section generally had good user satisfaction, but we added a few enhancements.

For example, we added a log tab. After a bulk transaction is processed, the log tab displays which transactions were successfully processed and which were declined. The log can be exported as this was a feature request from multiple users.

Customers

We completely changed the way users view their customer list, following a similar pattern to transaction history. Key customer information is shown in the data table, while further information and actions can be accessed by selecting a customer and revealing its detail panel.

Managing a customer's payment saved methods is now significantly more visual and spacious since this is a common task within our application.  

Current Progress

My team and I in the user testing phase so we are actively conducting user tests, gathering feedback, and making design changes.

Next Steps

Once we have completed testing and design changes, we will provide the prototype and static designs with CSS to our developers and will work with them as they develop the redesigned application.

< Back to all projects