Keywords

1 Introduction

This paper reports, from a professional perspective, the process of designing and developing a standard interface component. This project resulted from the need to improve the user experience, decrease the learning curve and the urgency of standardization of processes and interface components experienced by the Conta Azul company, due to the rapid growth of its Research and Development (R&D) team.

The focus of the project in question refers to the use cases in which automated recommendations are made by two artificial intelligence engines of the namesake Conta Azul software, a Brazilian solution for the management of small businesses and accounting firms. These engines carry out (1) the tax recommendation and (2) the categorization of bank statements.

Thus, it was hypothesized that when standardizing the automated recommendations component from a systemic perspective, the experience of using the software in question is improved. This is achieved through the consistency of the visual representation in the use cases listed, regardless of the software screen in which the component is applied.

As a structure, this paper presents a brief theoretical review, followed by contextualization about the Conta Azul company and software, delimitation of the problematic experienced, stipulation of the project objectives and the applied methods, combined with its results. It concludes with general learning and directions for future research, in light of the convergence between user experience and artificial intelligence.

2 Context of the Investigation

This section presents a brief theoretical review, in an introductory character, for the definition of the key terms used in this report. In addition, it also presents the Conta Azul company and software, the general characteristics of the Brazilian market, organizational aspects of the company’s R&D team, focusing on design, and the motivations that led to the stipulation of the project that thematizes this paper.

2.1 Theoretical Review

In order to facilitate understanding of the conceptual fields of this paper, there is the need to review different bibliographical, marketing and methodological sources about the state-of-the-art design processes in the production of software, together with the definition of artificial intelligence aspects with convergence with experience of use.

Design Ops, Design System and Atomic Design.

One of the main concepts, Design Operations (Design Ops), refers to the managerial aspects of design processes in companies. For Malouf [1], the area of Design Ops allows to amplify the value of design in the products created by the companies, removing frictions present in the routine of the designers.

This managerial mentality becomes increasingly relevant as the maturity and quantity of people on the team increases. In short, Malouf [1] defines the area’s responsibilities as providing fluidity to design methods, processes and solutions. Part of the inspiration for creating this concept came from Developer Ops (Dev Ops), a segment linked to software engineering.

Along with this, it is worth highlighting the relevance of the Design System concept, which is present in professional discussions. This term encapsulates the reusability mentality of graphical user interface elements, from principles and design patterns stipulated previously and derived from behavioral characteristics of their target audiences, reported in a guide format. For Suarez [2], Design System is the essential tool to provide scalability to design and design teams in the contemporary workplace.

In order to manage the elements, present in the Design System, from its documentation through implementation to evolution, it is necessary to stipulate a unique pattern of taxonomic organization.

One of the emerging means for this is Atomic Design, which suggests a metaphorical hierarchy that divides the interface layers into atoms, molecules, cells, and organisms [3]. It is worth mentioning, however, that the organization of this type of material comes from the culture of each company, being adaptable. As a recommendation, Suarez [2] emphasizes the importance of considering two fundamental pillars: to foster a standardization structure, together with a componentization structure, which must emerge from design principles.

Artificial Intelligence in the User Experience Context.

Finally, it is worth to highlight the definition of artificial intelligence (AI), directly linked to its applicability in the user experience. Here, artificial intelligence is considered as computational solutions that allow the processing and obtaining of value and meaning in information, from sources with high data volume [4].

For Lee [4], the meeting of design and artificial intelligence allows designers to give meaning to the information registered by users, helping to decipher not only “the what” but also “the why” of certain actions.

Having these terms delineated, the following section details the context of the investigation from the design and organizational challenges of the Conta Azul company.

2.2 The Conta Azul Company and Software

The Technology Company Conta Azul.

Having the same name as the software it develops, the company has seven years of existence and two offices, in the cities of Joinville and São Paulo, Brazil. The motivations for its foundation come from the perception of its partners about the opportunity to create simplified solutions for the complex scenario of Brazilian entrepreneurship.

Recent data highlight that the country occupies the position 72nd in the global competitiveness indicators of the World Economic Forum [5]. Even though it is the eighth largest economy in the world, the bureaucracy to have a business hinders the advancement of the Brazilian entrepreneurs.

For the Brazilian Micro and Small Business Support Service [6], the main reasons for small business mortality, which occurs at a rate of 55% in two years, are the lack of planning, the lack of training on management and the lack of control over revenues and expenses.

Given this opportunity, and with the motivation to improve this reality, the Conta Azul company sought capital in investment funds to accelerate its growth strategies, in order to offer its software to small companies and Brazilian accounting firms, with accessible monthly fees.

The company obtained investment in different rounds, both of Brazilian funds and foreign funds. The latest round of Tiger Global and Endeavor Catalyst, at the end of 2017, worth US$ 25 million, helped the company and its team to double in size [7].

The essential factor, however, is to notice that at the same time that growth allowed the expansion of the company’s channels of action, it brought managerial challenges of greater complexity.

As a direct consequence of this accelerated growth, 250 new professionals were received between January and December 2018, and the complexity of process and people management was increased.

It was necessary, then, to create new models to maintain the quality and consistency of the deliveries of different departments, avoiding inconsistencies that eventually undermined the user experience.

Currently, the company has a total of 420 employees. Of these, 120 work in the R&D area, 20 of them being user experience designers. All authors of this paper are part of this team.

The designers are pulverized in multidisciplinary teams, in the likes of “tribes and squads” inspired by the Spotify model [8]. The other professionals connected to this department are back-end, front-end and data engineers, product managers and compliance consultants.

Regarding the design team, one of the main responses to mitigate the pain caused by the increase in managerial complexity highlighted above was the implementation of a Design System, in order to regularize, describe and manage the applicability of interface components, interaction patterns and software terminologies. Figure 1 shows Magica, the website that describes the Design System.

Fig. 1.
figure 1

Conta Azul’s Design System, Magica

Full size image

Prior to the implementation of the Design System, that occurred in 2017, the company had only one master file in the Sketch software, with bitmap elements, without specification and regularization of its application, which created risks of fragmentation in the projects.

The Conta Azul software.

In relation to its software, developed and marketed exclusively in Brazil, in the SaaS (Software as a Service) modality, Conta Azul is focused on connecting owners of small companies to their accountants. The objective is to assist in the management and exchange of information about the business, through Internet browsers, in the cloud.

Similar to the concept of ERP (Enterprise Resource Planning), the platform presents modules for controlling sales, purchasing, finance, fiscal and, above all, accounting aspects.

One of the possible features is that all the actions registered in the platform by the small business generate accounting debits and credits, in real time, enabling the issuance of accounting books and tax forms automatically. The software homepage, called “Dashboard”, displays the main indicators of the small business in a playful and graphical way (see Fig. 2).

Fig. 2.
figure 2

Conta Azul’s dashboard

Full size image

Once the contextualization of the market, the company and the software has been reached, the next section shows the factors that led to the specific research focus in relation to a standard component of automated recommendations. It also presents the inquiries of the designers of the company, along with the methods planned for the design and development of the component in question.

3 Delimitation of the Problem and the Scope of the Project

Because it is a complex software, with different user flows, the designers of the company raise inquiries at their weekly meetings, called Design Reviews, in order to reach best practices to provide consistency in the interface and user interaction resources.

In one of these meetings, held in January 2018, there were discussions about the need for improvements in the display of automated tax recommendations, a resource belonging to the Fiscal module of the software.

Already considering the systemic mentality required by the Design System, the scope of the discussion was extended to evaluate all the points of contact of the platform that exhibit automated recommendations, independently of the module.

Regarding the automated recommendations, some of them are already generated by two artificial intelligence engines that learn and increase their assertiveness with the growth of the user base. These engines are (1) tax recommendations and (2) categorization of bank statements.Footnote 1

In consensus, the group hypothesized that stipulating a standard to communicate what is being displayed on the screen as an automated recommendation, made by artificial intelligence, could contribute to the improvement of the user experience. However, it was questioned whether, even with recommendation engines and different contexts, it would be possible to stipulate a single design language, both in present and future solutions.

Based on this, a project was created to solve such doubts, based on practical tests. The overall goal was to achieve the design and development of a standard interface component to be used in cases where automated recommendations were possible. And as specific goals:

  1. 1.

    Analyze current screens that display automated recommendations;

  2. 2.

    Study similar software interfaces;

  3. 3.

    Suggest a new component;

  4. 4.

    Test the component recognition with users;

  5. 5.

    Define, document and develop the component.

The methods applied, respectively, for each specific objective were chosen from the standard practices of the company, being:

  1. 1.

    Analysis of support tickets and the existing interfaces;

  2. 2.

    Benchmarking;

  3. 3.

    Generation of alternatives, bitmap prototyping and design review;

  4. 4.

    Usability testing;

  5. 5.

    Writing of documentation and coding in JavaScript (“Vanilla”).

The execution of the project occurred as a parallel activity, in conjunction with other demands of the R&D area, being conducted by Design Ops professionals and completed in December 2018.

4 Project Development

Once the problem was delimited, the team put into practice each method, based on the specific objectives listed. The following section details the methodological progression and the partial results of each step.

4.1 Study of Screens that Use Automated Recommendations

One of the factors that drove the prioritization of this demand was to test it as a possible solution to reduce tickets of usability doubts regarding the issuance of service and product invoices, that require, in Brazil, detailed taxation framings.

Conta Azul’s R&D team had risen this hypothesis before, derived from previous studies of taxation doubts, carried out in the first quarter of 2018.

During the aforementioned study, it was noted that tax input was one of the features that generated the most doubts in the users of the software, corresponding to about 16% of the monthly support tickets openedFootnote 2.

Another factor that motivated the development of the project was the fact that the old version of the software, called the Classic Workflow, had a tax scenario configuration screen. In it, the user or his or her accountant could pre-register specific taxes scenarios. This ensured more agility to the issuance of invoices, since taxes were already parameterized according to that particular business needs.

In the current version of the software, however, it is still not possible to parameterize taxes or scenarios, causing the user or his accountant to manually enter the taxes for each invoice. However, after issuing his first invoice, the artificial intelligence engine learns to make recommendations by cross-referencing the product and customer data, as shown in Fig. 3, in fields with yellow outline.

Fig. 3.
figure 3

Conta Azul’s invoice screen highlighting the tax input form

Full size image

During the study of user doubts, the methods used to verify the possible impact of an improved tax automation solution on the clients’ day-to-day life were: monitoring of incoming calls in Customer Support, reading and categorization of tickets and face-to-face and telephone interviews with impacted users.

During this study, the team identified users that contacted Customer Support up to 17 times in a single month. This finding was important to the R&D team, in order to investigate potential problems of invoices and taxes information.

The data collected during this study were tabulated in a document. In it, the information extracted was separated by categories: problem report, number of occurrences, standardization of reports and – from a fiscal perspective – source of the problem.

For example, errors resulting from failure to communicate with the Brazilian government’s Treasury Department were categorized as “Treasury”. And then there was the description of the problem, such as “dubious error messages”, “usability doubts”, “Classic Workflow versus New Workflow”, and others. Throughout the research phase, the design team had help from support analysts of the company. They also had proximity with the Product Analytics team, extracting quantitative data.

In the same period, the project to redesign the bank reconciliation interface, belonging to the Financial module, with a distinct team in relation to Fiscal, occurred. This other team also noticed the need to visually highlight category recommendations of bank statements, in order to facilitate user experience [9].

Figure 4 shows the reconciliation interface. To the left of the screen, the user sees the bank statement, that is obtained from Open Banking APIs. On the right, there is the entry which will be registered in the Conta Azul software, that has to be categorized.

Fig. 4.
figure 4

Conta Azul’s bank statement reconciliation interface

Full size image

If the entry already exists in the software, as a provision, the Conta Azul software proposes a match between the two, learning from the user’s habit. This project also took into account Customer Support input and tickets, together with other methods.

In carrying out these analyzes, it was possible to notice the importance of standardizing the recommendations component, in order to make the design language compatible with the platform as a whole.

The user’s journey crosses different modules, that is, when generating a sale and issuing an invoice, soon after the user has to indicate if a parcel decurrent of that sale has been received or not. In this way, the division of teams followed by Conta Azul’s R&D department is purely virtual, to facilitate the internal management of people. It should not reflect as silos in the platform, as the user journey is broader.

Based on this, it was also observed the need to evaluate similar solutions in concurrent software, of similar segments, to assist in the design of the solutions.

4.2 Similar Software Analysis

During similar interfaces studies, Conta Azul’s design team realized that, in general, Brazilian competitors already suggested taxes in their software. In some cases, they even offer the parameterization of specific invoice emission scenarios. The same was true for the bank statement categorization, where categories were automatically recommended. Five competing software were analyzed.Footnote 3

In regard of how the recommendations are displayed, competitors did not demonstrate, nor differed visually, any predefined recommendations or parameters. The fields are simply presented with the values of taxes and it is up to the user to check them.

With this, the opportunity to differentiate Conta Azul was even more latent, with the possibility of informing the user when there are recommendations on the screen. Alongside this, there was also the opportunity to evolve the user flow of registration of fiscal scenarios, also enabling accountants to perform this configuration in the New Workflow version of the Conta Azul software, since their technical knowledge may overlap or enrich the recommendations coming from the artificial intelligence engines.

It should be noticed that the possibility of setting up taxes was a request made by the accountants themselves, that is, it opens a technical reflection on the importance of the accountant’s endorsement as a professional responsible for the data of their clients.

4.3 Suggestion of the New Component

From the analysis of the data obtained, five component alternatives were generated. In order to mitigate the change of existing user habits, the team chose to direct their solutions in the scope of new form inputs. The journey that the user has in the software is still the same, modifying only how he or she perceives the recommendations.

Overall, this approach was elected in order to try to reduce the number of tickets resulting from taxation doubts, but without causing considerable visual impact, focusing on highlighting accurate information to users.

The same goes for the bank statement categorization, in which the two-column visuals remained, especially due to this interface’s pregnancy. Providing a complete redesign could cause increased doubt tickets, which did not meet the project aspiration, which was just the opposite.

Figure 5 illustrates the alternatives generated. Some of them took advantage of the yellow highlight already present in the software but increasing its contrast. The designers also tested markers such as a balloon icon, in different layouts – above the label of the field and also attached to the field. Another iconographic variation was a hand cursor, next to the Conta Azul logo, with the caption “recommendation”. Tests were also made with green and blue color variations.

Fig. 5.
figure 5

Recommendation component alternatives generated

Full size image

Alternatives were taken to the Design Review meeting in order to get feedback from all of the company’s designers. As Design System starts from the assumption of standardization, it was essential to expose the options to all the stakeholders, to create consensus on the decisions.

The group commented that the green contouring alternatives looked like validated information, which could confuse or induce the user to accept the recommendations without weighing them and eventually causing fiscal errors.

The yellow version was criticized because of its low visual contrast. And, with this, the best evaluated alternative was the one of blue contour. Iconography, however, was not approved by the group at this time. One of the variations, for instance, suggested as a pencil icon, was assessed as a reinforcement on the need to edit the tax fields, not as a recommendation.

Based on the preliminary results, the Design Ops team returned to the drawing boards and improved the alternatives. After the internal evaluation, it was essential to test the understanding of the alternatives with real users of the platform. The following section details this step.

4.4 User Recognition Tests

In the decision process on the most adequate solution, the team considered factors such as lower user impact, truthfulness and reliability of information.

For the usability tests, the team selected the same users who participated in the interviews, as well as accountants and users with fiscal doubts, but who did not participate in previous interviews. Figure 6 shows the interface used in the tests, created as a bitmap prototype, with the iconography of a lightning and the blue outline in the fields with recommendations.

Fig. 6.
figure 6

Conta Azul’s recommendation component used during usability tests

Full size image

In the case of the bank statement categorization interface, because the inputs are inserted in a rectangle, there was also screen space to implement instructional texts. Texts have been added in the lower left corner of the card to the right of the screen, contextualizing the reason for the recommendation, such as categorization or a match of existing entries (see Fig. 7).

Fig. 7.
figure 7

Conta Azul’s bank categorization interface used during usability tests

Full size image

One of the hypotheses the team worked on was to explain to the user the origin of the recommendation, so that he or she understood who was responsible for presenting those values.

Thus, along with the component, it would be detailed if the recommendation had come from a previous setup by the accountant, whether it was from previously issued invoices, or an AI, automated recommendation of the platform itself. However, when testing this hypothesis, it was noticed that the users were in doubt about the reasons why certain recommendations had come from different sources.

Considering that there are scenarios where the issuer of the invoice is not necessarily the manager of the business, adding this level of complexity proved itself problematic.

For this reason, the team identified that only showing the values of the recommendation, without highlighting the agents of those values, and evidencing the user’s need to verify the veracity of the recommended data with his or her accountant, had more positive answers than to explain the source of the recommendations.

Having these inputs and field assessments with the prototype, the team set out for the documentation and development of the component in JavaScript, with help from two front-end engineers of the Design Ops team. The lightening icon, with blue highlights, as shown on Fig. 6, was the validated version.

4.5 Definition, Documentation and Development of the Component

For greater consistency and alignment among the designers and front-end engineers of the Conta Azul company, a model was created to document components. This implementation was important so that the documentation was produced in a distributed manner, both by the Design Ops team and the pulverized designers. It considers the existing platform components, the usage contexts, definitions, versioning and handoff.

To propose this model, the team conducted benchmarking with different Design Systems from companies such as Atlassian, IBM, Google, Salesforce, among others. With that in mind, the standard structure for documentation proposed was:

  • When to use: Cites the contexts that that component should be applied;

  • Anatomy: The morphology of the component is shown, describing each of its parts in the form of a numbered list, objectively;

  • Good practices: Details the appropriate practices for applying the component. Citing rules and limitations that must be observed by the designers for correct use of the component;

  • Behavior: This topic demonstrates, in a practical way, the behavior of the component, together with all variations with real examples;

  • Do’s & Don’ts: Demonstrates what would be the correct and incorrect ways to apply the component in different contexts.

It was important, at this time, to maintain the proximity between the front-end engineers and the designer responsible for the Design System, as there were doubts or modifications to the components due to technical issues or legacy back-end connections. This trade-off between design and development made it possible to have better components, both on technical and usability perspectives, fostering scalability.

The front-end engineers opted to develop the component using regular, “Vanilla” JavaScript, which allowed better interoperability with frameworks such as AngularJS and Vue. They prioritized not only the automated recommendations component, but also all of the most-common form inputs, creating layers of abstraction that allowed the implementation of specificities with ease.

At the end of December 2018, the project was presented to the whole R&D team and executive directors of company, highlighting the rapid evolution of documentation and the productivity gained through the Design System mindset. As the next steps, beginning in January 2019, the Design Ops team will also be responsible for implementing new components to production environment, going beyond its original attributions, which were only to document them and provide the engineering frameworks.

The automated recommendation input will be one of the first components to be updated in production, allowing the team to measure in real-case scenarios if it will, effectively, help in the comprehension and reduction of doubts of Fiscal, Financial and any other information generated by automated AI recommendations.

5 Conclusion and Further Research Opportunities

The Design System mindset was evaluated as a valid solution to provide the support and scalability necessary to Conta Azul’s growth, even if at first it was interpreted as a creative hold-back, in the sense of following strict rules when generating user interfaces. The design leadership committee of the company had, as a responsibility, to develop the technical skills of the designers in order for them to think systemically, instead of locally. This was an endorsement of evolution in design maturity.

Regarding the process of creating the automated AI recommendations component, it was of great value to have help from Customer Service and Product Analytics. These teams helped the Design Ops professionals to understand the context as a whole, both on the user’s perspective and the manners that the AI engines operated. The downside was the long time taken to implement the components structure in production environment. As a response to this, the company invested in the growth of the Design Ops team, that in January 2019 has receive one more front-end engineer.

In the perspective of user experience, the correlation to artificial intelligence in the context of a small business management software opened discussions related to regimentation of the use and property of information, the expectations of users to understand the factors that cause a recommendation, among other reflections – especially in relation to the insecurity of accountants to trust these suggestions, as they are legally responsible for the Fiscal aspects of their clients.

As further research opportunities, the team intends to share a new paper as soon as the results of the implementation in production environment is done, and also detail some other contexts in new papers, such as date selection, population of tables and, utmost, reports generated by the real-time accounting features, in the light of AI opportunities to foster user experience, satisfaction and retention.