Invoice System
Proving the value of design through innovation in the construction industry
In 2016, the product and technology team of one of the business units of the largest IT company in Santa Catarina, Brazil, did not have any UX Designer. Despite having about 40 developers, the interfaces were built without a standard, following an obsolete guideline, creating a bad user experience. We were blind to the desires and needs of our target audience.
Given this scenario, I presented a project to implement UX Design in the business unit, focusing on 3 goals:
Overview
Company: Softplan Planejamento e Sistemas
Product Type: ERP, Web App, B2B, SaaS
My Role: Sr Product Designer
Interface Standards
Team
1 Product Owner
1 Product Designer
1 Scrum Master
3 Developers
My role
Since this project was the first one we run, I was the only designer within the business unit.
Consultancy within the business teams
Dissemination of Knowledge
At that time, the teams were not mature in design, so the strategy of focusing efforts on User Interfaces made more sense, as it would be very difficult for teams to notice value in a research report, for example.
Decrease in support tickets
We drastically reduced the tickets in the support team for the most problematic features, directly impacting the ROI of the products.
Maturity of the P&T team
By focusing on interfaces, we were able to show value and increasingly include design steps in the development process, especially usability tests.
Results Achieved
Pilot Project: Invoice System
The Invoice System
The main project during the implementation of UX Design in the business unit was the refactoring of the invoices feature. There were several problems, from system navigation that was complex and out of order, to technical nomenclatures that were not understood by users.
The information architecture was the feature's most latent problem. We made several dynamics to solve this problem, before develop the prototype that would be tested with the users in the future.
Prototype Versions
We built a lot of versions for the new Invoice system. In the current scenario, the user needed to perform actions on 4 different pages to complete the task. In the last version of the prototypes, we reached 1 single page.
The first version aimed to reduce the complexity of use. Here is the list of updates:
The functionality was all centralized in 1 single menu item, before it was distributed in 3 menu items.
In an attempt to reduce the number of clicks needed, the number of pages was reduced from 5 to 3.
The module works around 3 functionalities that must be executed sequentially.
The settings page was a separate menu item. To simplify access, a shortcut was added on the main pages.
Unimportant query filters were removed to make the page cleaner.
Button names also began to externalize the idea of flow.
The button's label became “Next”.
Some better designed buttons have been added to make it easier for the user to understand.
Second Version
The second version of the prototypes had the following changes:
The upper part has been changed to make the flow even more transparent to the user.
The buttons were enlarged and an icon was added that visually represents the objective of the action.
Some feedback messages were added to show the processing and result of the action to the user.
Third Version
The third version of the prototypes had the following changes:
The upper part was changed by tabs to be simpler, making the screen less polluted;
We got good feedbacks about the feedback dialogs. We started to explore this type of resource even more;
To reduce the amount of user clicks, an option was added that allows the user to select several records at once to proceed with other operations;
To make the page cleaner, one of the data table columns that was responsible for presenting a key of almost 50 characters was changed to a button. When clicking, the information goes to the clipboard.
Field names have been changed to make them easier for users to understand.
Final Version
After some validations, the team concluded that it was possible to make the system even simpler. To make this possible, some actions that were previously managed by an entire page were abstracted from the user, making only small dialog boxes available to give feedback or collect a decision when necessary. The result was the reduction of 3 pages to 1.
UsabilityTests
After we build the wireframes and the first navigable prototype, we started looking for system users to perform the usability tests. The tests were performed with 5 users, following the good practices, studied by nngroup.com
Tests Results (examples)
Translating to English:
All tests were successfully performed by users and the complexity was noticeably decreased after refactoring and test results.
Besides the decrease in support tickets and the strengthening of the design culture, we had the sales record of the invoice system and also the best satisfaction rating after the refactoring.
Sales, User Experience and Satisfaction
Working With the Marketing Team
There's no point in developing something excellent if you don't promote it properly. Therefore, in order to achieve one of our objectives, which was to increase the number of customers, we had essential support from the Marketing team. Together with the PO, the Marketing team defined the plan for promoting the product. The result of the work was a landing page demonstrating the main benefits of the new feature. The landing page also presented a competitive analysis with other similar products on the market. In the figure below a brief demonstration of part of the landing page.
