How governments and fintech companies can join in a collaborative way?

Avatar img
Álvaro Maldonado
Gerente Comercial @ Kushki Ecuador
diciembre 17, 2020
Lectura de 2 minutos
How governments and fintech companies can join in a collaborative way?

Slow and bureaucratic. That is the perception that has existed historically about public institutions and the formalities that are conducted through them. A sector that until recently had not been digitized, and that has not yet dimensioned the full benefits of doing so, nor has it counted the savings in the amounts of money and time that digitization could bring. But that pace has already been accelerated, because the pandemic has put face-to-face formalities at risk, forcing to make them available online.

According to data from the Inter-American Development Bank (IDB), a face-to-face procedure costs governments up to 40 times more than a digital procedure, given the resources that must be available. Also, it takes an average of 5.4 hours for a citizen to do a procedure, and up to 11 hours in some countries. In contrast, a digital process can take up to 74% less of that time.

In the European Union, 81% of procedures are online. In our region, only 7% of the population performed its last process digitally way. Data from the Economic Commission for Latin America and the Caribbean (ECAC), position the region at an intermediate development level in respect to other regions of the world in terms of a digital ecosystem. With an index of 49.9 (on a scale of 0 to 100), Latin America is lagging compared to Western Europe (71.06) and North America (80.8). In addition, the annual growth rate in digitization has also been slowed, growing by 6.21% between 2014 and 2018, the lowest of all emerging regions.

Some utilities already offer digital payments for procedures; however, dissemination is low, which does not encourage its use among contributors. In addition, many public portals are complex and user-unfriendly, which derives in a low conversion of transactions, and a delay compared with the different public administrations systems of the world. In fact, ID figures point that 40% of digital formalities are very difficult to understand and cannot be completed.

The opportunity

In Estonia, a leading country in terms of State digitalization, 99% of formalities are made online. One of the main advances are digital signatures, which are used 1.3 million times per week. According to the Government of that country, thanks to that, they save a working week per person per year or 2% of the Gross Domestic Product (GDP).

Other of its advances, have included eliminating the use of paper in procedures, implementing the digital vote, creating virtual residences or e-residencies, and even a digital identifier since a person is born in that country.

All that makes it clear that there much to advance and to imitate from the countries that take the lead and are more developed in this topic. The digitalization process of the public sector has a series of associated benefits: Advances can be reached in an agile and short-term term fashion, with an immediate positive perception and satisfaction of citizens. That is to say, they are measurable and testable in quick deadlines.

Also, the introduction of technology in the public administration generates less corruption, since everything is registered, there is less commuting and vehicle traffic, less pollution and environmental impact, and administrative efficiency with lower costs and bureaucracy.

A technological partner

In Colombia, Sushi digitalized the process for obtaining the Property Transfer Certificate, issued by the Superintendence of Notaries and Registry Offices (SNR). This certificate is required for a series of formalities in Colombia, and provides all the information about the property and its owners. Its demand is high: Between 23 thousand and 75 thousand certificates are issued each day, because it is required to buy or sell a property and apply for mortgage credits, among other things. With Sushi, SNR users can digitally acquire theircertificates, saving time and money in commutes to offices. Obtaining the certificate with this method takes less than a minute.

Another case is the Sole National Transit Register (RUNT), responsible for delivering cars' vehicle records. Through the alliance with Sushi, it is now possible to pay for the document with cards and the PSE, expanding the available payment options.

The virtual counter

In Ecuador, the Municipality of Guayaquil has also started to digitalize with our solutions. Payment of the property tax, a mandatory levy that is charged once a year for each property, can now be made online through a portal with a payment button specifically developed for this entity. The user accepts the payment of a fee for the use of the service, but that equals time-saving and greater comfort.

For the implementation of this project, we have a multidisciplinary team of experts in the online collection, safety and payment experience industry. The current situation of the pandemic worldwide, has enhanced electronic commerce, and also the digitalization of public entities that seek to approach their users easily and safely.

State Transformation

In November 2020, the Sixth Ministerial Meeting of E-Government of Latin America and the Caribbean was held; where it was exposed that Ecuador has achieved substantial changes in digital transformation, rising 10 positions regarding 2018 in terms of application of E-Government at a global level (74th out of 193 countries). Currently, the country records more than 70% of online formalities of the Central Government, and it is expected to be 90% by May 2021.

Although the Cisco Digital Readiness Index 2019 ranked Chile as the most digitally ready country, followed by Uruguay and Costa Rica, countries of the region are still in a fairly low position regarding the global level, which shows that there are still unattended needs to solve by collaboration between fintech companies and governments.

Be the life of the party with the latest information on digital payments.

Subscribe to our Kushki Hub to receive alerts about our new content.

Suscribe illustration
Don't know which product is right for your business?
Does the world of payments catch your attention?

More about our kushki Hub

Double diamond methodology for user experience design

Double diamond methodology for user experience design

Today, most companies seek customer loyalty and to generate conversion through the sale of their products in online stores. This positioning depends on many factors; one of them is the design of user interfaces, which covers the visual aspect of a platform (being attractive), as its usability and usefulness, thus the importance of a UX designer. In this article, I will tell you about what user experience design is, the methodology we use in Kushki, the challenges we have faced in the process, and the reason why we choose to apply the double diamond methodology. The easiest way to explain what a UX Designer or User Experience Designer does, is by sharing an example, something that you have probably lived and become familiar with: Imagine that you are on a website that sells shoes, intending to buy a pair of sneakers with specific features. You already have what you want, so when heading to the sneakers section, you start searching the “filter” button to facilitate your search, but you do not find it anywhere. After seeing pages and pages of the digital catalog, you finally find what you were looking for and go to the pay section. At that time, you discover an extensive payment form that you start filling out discouraged, while you think this is taking much longer time and effort than you thought. Eventually, you surrender and leave the website, and prefer to buy your shoes in another store, or simply to forget about it completely. But, why did you quit? Because your frustration with the process was stronger than your wishes to buy the shoes, that is, the user experience was unsatisfactory. And you ask yourself, what does this have to do with the UX designer? It is simple: The UX designer has the mission of converting the search and purchase process into a rewarding experience, that provides all accessibility elements with a high degree of practicality, for the user to do his/her activities on the website, in a fluid and seamless way, almost “without being aware of it”; this is what we call user experience. In other words, we define user experience design as the development and improvement process of quality interaction between human and computer, and all the aspects of a digital or physical product or service. The challenge is based on creating a useful, user-friendly product, that provides value and acceptance in its use in the shortest time possible. A designer not only has participation in the creation of a visual product, but performs a practical process of research, ideation, and finally, the development of prototypes that allow testing results. To achieve a high-quality UX design, there must be a perfect fusion of multi-disciplinary services. The Double Diamond methodology at Kushki As a team, we apply various rituals of agile methodologies to manage projects with greater efficiency, and focus on the added value of our digital solutions. For this, we use the steps of the Double Diamond framework as follows: Discover: We investigate which improvement opportunities are. In this step, we validate, with real users, which are their concerns. We ask our interviewees to give us a tour of their day-to-day activities to detect the problem, and we also certify the project's scope. Define: With the results of the previous point, an information organization process begins, with the purpose of understanding and mapping which are the required points that can solve the raised problem. In this phase, flow charts and lists of requirements are made, among other tools, which are necessary for the next stage. Develop: In this point, we focus on the visual construction of the product or feature, considering the logic and pain points identified before, that is, prototyping. We also make validations with experts, so that we can ensure that we can make the delivery with a perfect finish. Deliver: It consists of a demonstration of the properties of the features that are proposed in the prototype. Important challenges that we face in the development of the experience As a user experience design team, we worry about our solutions being reliable, useful, and friendly. As a team, we have identified three constant and fundamental challenges to consider in each solution we develop: Make the user feel safe. Not only do we have the best security certifications, but we have also implemented other measures that allow the user to have greater control and understanding in the process. For example, a preview of the configurations they wish to make, alert messages, action confirmation, information edition, etc. The objective is to help users to make good decisions, making them feel safe in the process. Speak in their language. Unfriendly and incomprehensible language can hinder the understanding of transaction processing tools. “Preauthorization and capture,” “dispersion,” “chargeback,” among others, are terms that are not commonly used, and not from the domain of people. This is why the way we communicate with our customers, is a constant and important challenge that we face as a team. To solve these possible understanding difficulties, we have numerous indications, notes and tooltips in the Customer Console, as well as the knowledge base. It is essential to talk to the user in a clear, direct and simple to understand language. Information saturation. It is very easy to confuse the user when it comes to financial transactions. The user needs to have key and concise information at hand. For this, it is essential to know him/her and his/her needs, to be able to propose solutions with an information architecture that covers his/her pain points, reducing the cognitive burden of our user. Why do we choose this methodology? One of the characteristics that we value more from this framework, is the possibility of iteration within each diamond, with the objective of approaching each time to the ideal “as if.” The intention is to have a clear problem when both diamonds converge, resulting in a positive effort-time ratio. The main benefits that we find in this methodology are: It fosters communication between teams. Goes through consultations with experts and other relevant areas. It applies for small, medium, and large projects. The framework can be implemented to find solutions to all kinds of problems. It is adaptable according to the project. It encourages us to understand which the correct methods and activities are to address a problem or opportunity. Clarity in processes. It allows defining the phases with greater accuracy throughout the development of a UX project. Finally, trust and efficiency in developed technologies are really important for the fintech world. By themselves, financial transactions consist of complex processes that require a high level of accuracy and processing speed. Our objective is that, this is a transparent, fast and secure process for the end-user. As a team, we constantly face new challenges that lead us to convert a cumbersome process into one that can develop naturally and intuitively, so we must consider experience design as a global concept that affects the entire interaction chain between brand and customer alike.
Avatar img
Andreína Medina Yáquer
UX/UI Designer @ Kushki
diciembre 07, 2020
The opportunity of digital payments: Why I decided to take the step from Visa to fintechs

The opportunity of digital payments: Why I decided to take the step from Visa to fintechs

When I entered Visa in 1997 as a young engineer, I never thought that I would stay there for 22 years. Without knowing much, I was attracted by the world of payment methods, because it is associated with credits that favor the economic growth of small and medium-sized companies, and because their convenience facilitates our daily life. But, beyond that, it was a good opportunity for a young professional like me. First, I entered the computer area, taking charge of the implementation of microcircuit cards, a type of smart card that, at that time, were quite a novelty. Up to 2003, I was in the area of new Visa technologies. From there, I went to risks and fraud, leading the area in Mexico, the country where there is most fraud throughout Latin America and the world. Zoom to the matter The fraud problem in Mexico is nothing new and gives space for much analysis. According to a survey conducted in 2019, 77% of Mexicans claim not to buy online for fear of being a victim of this crime. That is, the topic is very present among citizens. Moreover, according to data extracted from a study conducted by Visa itself, currently, chargebacks in Latin America occur in 1.7% of orders, and reach 2.3% in Mexico. Data from the National Commission for the Protection and Defense of Financial Services Users (Condusef) says that, during the first quarter of 2019, one million and 188.000 chargebacks had already been claimed in the Mexican nation. The contrast is strong, because in Europe chargebacks barely reach 0.8%. The topic does not discriminate, because, by having worked in fraud and risk areas for so many years, I can surely say that cyber threats attacking fintechs are nothing different from those of any bank or big company. Cybercriminals target big and small alike. That is why, the big difference lies in how we are prepared for these threats. There, I consider that training and awareness-raising of employees is fundamental. As contributors and members of the payment ecosystem, we must understand that we are critical entities to protect the institutions where we work adequately. In my experience, the best tool is education and compliance courses, and stay constantly updated. The emergence of fintechs But, returning to the topic of my professional career, already having some time in the industry, I began to identify the main problems that exist in the region regarding payments. In Latin America, cash use prevails with impressive figures: According to Americas Market Intelligence, approximately USD 1.7 billion in cash in physical stores were spent in the region that same year, representing 81% of total retail spending, compared to 25% in the United States and 18% in China. Electronic payments have had a tough task, trying to expand through the different Latin American countries, often slowed by banks, which have problems expanding their penetration due to the large operating burden they have, which makes it very difficult to exhort these institutions to make changes. All this happens at the same time when businesses need to sell more and more on the Internet, especially due to the pandemic, which brings technological and security requirements that often are out of the core of their business, or that do not have the knowledge necessary to be able to do it on their own behalf. This is when fintechs start to timidly appear. These small and agile technology companies expand the base of e-services by offering greater innovation and competition to make payments, achieving simple processes quickly, such as putting a business in the capacity to sell in a matter of a few days, something unthinkable for a large financial institution. More importantly, they contribute to increasing banking access to the Latino population. According to 2020 LATAM Fintech Report by KoreFusion, Mexico leads the account of countries having the most fintech companies in the region, with 249. Colombia follows with 128. This is mostly due to the creation of the Mexican Comprehensive Fintech Law in 2018, which is a pioneer in Latin America, which has attracted international investment and the rise of financing amounts. In 2020, although the year does not yet end, it is likely that the figures have increased due to the pandemic and the digital payments boom. Kushki Challenge With the boom of fintech companies, and seeing how the ecosystem has grown in recent years, I began to consider the possibility of guiding my career towards this promising world of fintech companies. Over time, it has been clear that not all these companies are going to survive, and only those that have been able to identify market deficiencies very well, by developing versatile, flexible, and convenient solutions, are the ones that are to prevail, even when times become difficult. And that is what I saw in Kushki, where I have been acting as CCO (Chief Governance & Compliance Officer) since some weeks ago. It is a tremendous challenge, since my goal is to guarantee an optimal operation throughout the region, but adapting to the regulations of each specific country. It is not an easy task, because each country is a world unto itself. At the same time, my work is to provide differentiated values that position us as our customers' main technological partner, whatever their category or country of origin.
Avatar img
Eduardo Canton
Chief Governance & Compliance Officer @ Kushki
diciembre 02, 2020
Dynamic user forms with React Hooks

Dynamic user forms with React Hooks

How are dynamic user forms created with React Hooks in Kushki? The creation of forms that will capture information from an end-user can be a difficult task because it must take many factors into account, such as: validation of fields, accessibility, maintainability, extensibility, and subject to change, to achieve it in the shortest possible time, with good practices, among others. And it can be more challenging in the case that the form that we wish to develop is extensive, complex, with numerous sections, or involving generating new forms according to user choices. In Kushki, we perform this work continuously to offer the best user experience in the use of our platform. In this article, we will tell you how we manage to solve all these difficulties for an optimal result in the development of user forms. What are the technologies and libraries to be used? React It is a library for the construction of user interfaces, which mainly offers the possibility of developing complex web applications with data that changes through time. It adapts very well to our needs to constantly collect information in our different products to update them in our platform, in addition to presenting information that continuously changes in an immediate and consistent way. Some significant characteristics it also offers are: Ease of use, reusability of graphic components, and efficiency when constructing complex interfaces starting from simpler pieces. Hooks They are a new addition to React, allowing to write applications with a functional approach, reducing the amount of code necessary, simplifying the complex components previously developed with classes, to a simpler structure, which allows to abstract and reuse logic in these functions, to achieve components easier to understand and maintain. Typescript It is a programming language that compiles JavaScript, and the reason to use it, is that JavaScript was not thought for the creation of large and complex systems, but for the implementation of dynamic functionalities to a website; that's why Typescript becomes that fundamental piece for JavaScript to be highly scalable, maintaining a great level of flexibility. When adding strict typing, we achieve a more robust and solid code, allowing our applications to have fewer errors, being easier to test, and greater maintainability through time, so our adoption of this programming language is very high in our set of applications. React Hook Form It is a library for the construction of forms with React, created with the objective of achieving greater performance and ease when implementing and validating forms. Some reasons why it is recommended to use React Hook Form are: It is intuitive, allowing the developer to use a single function responsible for abstracting the form's entire handling logic. It uses Hooks, getting a neater code when reusing functions responsible for the management of the different parts of the interface. It offers good performance, since it minimizes the number of re-rendering when using Hooks, and isolation from the form fields at the time their status changes. It is light, without any dependence that affects its size when downloading it. It has built-in validation; it is in charge of the control of errors that happen when entering erroneous data in the fields in the form. Integration with Typescript, to maintain a strict typing of the fields that must be collected from the user. With some disadvantages: It requires the use of functional components, so it is incompatible with components made with classes. The use of Hooks, as it is a new feature in React, can assume an additional time to learn to use them correctly. How should it be implemented? React Hook Form is the library used for the construction of the form. In this section, we will focus on describing the development process to carry it out, together with technical explanations that allows to better understand how its adoption can proceed in a project. 1. Define strict form typing When specifying an interface with the fields the form will have, allows us to maintain an understanding in the working team, providing error detection in compilation time. Below we have an implementation of a simple form interface, that will collect data from a customer. typescript interface IForm { clientName: string; clientDetails: { email: string; documentType: string; documentNumber: string; } } 2. Initializes the form with the function useForm() This function returns the methods with which interaction with the API library will take place; it receives a generic typing with the interface that we previously defined, to maintain a strict typing of the form, and we also specified that field validation is with the "onBlur" mode, that is to say, at the moment the element loses the user approach. typescript export const FormComponent: React.FC = () => { const form = useForm <IForm> ({ mode: "onBlur", }); } 3. Wraps the sections of the form with the FormProvider component This component offered by the library, makes use of React's Context API, which solves the problem of passing "props" at each level of the component tree, this is specifically useful in complex forms with multiple nested sections. For the implementation, we have defined that the form will have 2 nested sections, the first will capture the customer name, and the second the customer details. In addition to specifying the "handleSubmitForm" function, which will be responsible for processing the data once the user makes a sending of the form. const handleSubmitForm: SubmitHandler= async (formData) => { // Save fields received from the form }; return ( <ClientNameSection/> <ClientDetailsSection/> <Button style={{ margin: 20 }} variant="contained" color="primary" disableElevation onClick={form.handleSubmit(handleSubmitForm)} > Save </Button> </FormProvider> ); }; `` **4.** Use the [ConnectForm](https://react-hook-form.com/advanced-usage#ConnectForm) component for nested sections of the form It is very common to develop forms that have deeply nested sections within the component tree; in this case, the ConnectForm component is very well integrated, allowing for wrapping the nested component with the library methods without the need to obtain them from the "props." Here we use React's ["renderProps"](https://es.reactjs.org/docs/render-props.html#gatsby-focus-wrapper) technique, to reuse this component in multiple parts of the code. ```typescript const ConnectForm =({ children, }: { children: (form: UseFormMethods) => JSX.Element; }) => { const formMethods = useFormContext(); return children({ ..formMethods, }); }; ``` **5.** In the nested sections of the form, it uses the [TypedController component](https://react-hook-form.com/advanced-usage#StrictlyTyped) This library component will be in charge of registering the element in the form status to track user entries. We will use the "Textfield" component of the [Material-UI](https://material-ui.com/es/) library, which is wrapped within the TypedController in its "render" attribute. Two nested sections, called "ClientNameSection" and "ClientDetailsSection" will be created: ```typescript export const ClientNameSection: React.FC = () => { return ( <ConnectForm\> {({ control, errors }) => { const TypedController = useTypedController({ control: control, }); return ( <div style={{ padding: 20 }}> <TypedController name={"clientName"} rules={{ required: true }} render={(props) => ( <TextField {...props} label="Customer name" variant="outlined" error={!! errors.clientName} required fullWidth margin="normal" helperText={ !! errors.clientName && "Required field" } /> ) } /> </div> ); }} </ConnectForm> typescript export const ClientDetailsSection: React.FC = () => { return ( <ConnectForm\> {({ control, errors }) => { const TypedController = useTypedController({ control: control, }); return ( <div style={{ padding: 20 }}> <div> <Typography variant="h6" color="primary"> Customer details </Typography> <TypedController name={["clientDetails", "email"]} rules={{ required: true, pattern: emailPattern }} render={(props) => ( <TextField {...props} label="email" variant="outlined" error={!! errors.clientDetails?.email} required fullWidth margin="normal" helperText={ !! errors.clientDetails?.email && "Invalid email" } /> ) } /> </div> <div style={{ display: "flex" }}> <div style={{ width: "50%", marginRight: 10 }}> <FormControl variant="outlined" fullWidth margin="normal" > <InputLabel>Type of document</InputLabel> <TypedController name={["clientDetails", "documentType"]} defaultValue={"CI"} render={(props) => ( <Select {...props} label="Type of document"> <MenuItem key="CI" value="CI"> {"CI"} </MenuItem> <MenuItem key="RUC" value="RUC"> {"RUC"} </MenuItem> <MenuItem key="PAS" value="PAS"> {"PAS"} </MenuItem> </Select> ) } /> </FormControl> </div> <div style={{ width: "50%", marginLeft: 10 }} > <TypedController name={["clientDetails", "documentNumber"]} render={(props) => <TextField {...props} id="documentNumber" label="Document number" variant="outlined" error={!! errors.clientDetails?.documentNumber} fullWidth margin="normal" /> ) } /> </div> </div> </div> ); }} </ConnectForm> ); }; `` In addition, the "TypedController" component maintains a strict typing of the form, as we observe in the following code section, when placing a wrong argument in the "name" attribute, the compiler detects an error in running time. **![](https://i.postimg.cc/vT54B0xZ/q-KEm-X6z-PQ-AFNjbr2-KO35-Ljq-QTQim-Kz9y-Z0-N9-C4v-Hn-J4igu-Ge-B-5e-Isfvydelhs-Yr-By-xm-VOYk-RVy1-G6yoh-Bti-QP6sc-YI8-W3r9-J.jpg)** We can see how it would be visualized in the browser with the 2 nested sections of the form. ![](https://i.ibb.co/HGyS0h7/Xnv-Gs-SNKSw-Gu-XXtop-Bcxa-MTGw-Bi-FOfj-Jo-BF6-ESp-Ek-LFC8-V725glw9-L5-Ch-Ura2-Muwq-Fk4z-VS4h-MPs-QP.jpg) **Observe** the changes in the form fields with the [useWatch()](https://react-hook-form.com/api#useWatch) function In the development phase, the need to perform actions according to user entries, for example, to conditionally render, or to validate data in real-time; the useWatch() function, allows us to be listening to the changes of a field of the form, and to act according to it. In our implementation, the function can be used to validate if the "email" field exists at the moment the user enters it in the form: ```typescript export const ClientDetailsSection: React.FC = () => { return ( <ConnectForm\> {({ control, errors }) => { const TypedController = useTypedController({ control: control, }); const email = useWatch({ name: "email" }) as string; useEffect(() => { // Verificar if email already exists }, [email]); ... Send the values of the form with the handleSubmit() function This function will pass the collected data, once a successful validation is performed, to be able to save the form data. const handleSubmitForm: SubmitHandler < IForm > = async (formData) => { // Save fields received from the form }; ... Prior to the invocation of the function, a validation of the fields is performed, as we can observe in the following image, the library is in charge of detecting the errors and updating them in the interface. Finally, with the full fields, we can see how they will be received in the function to be able to process them: json { "clientName": "John Doe", "clientDetails": { "email": "jhon.doe@test.com", "documentType": "CI", "documentNumber": "1764537289" } } What are our results? Currently, in Kushki, this implementation has allowed us to: Build forms in a more efficient way by reducing the written code. Extensive and complex forms are developed from simple components, and the responsibility of validating and controlling them is delegated to the library. Having a standardization in developing them, to achieve better maintainability of the code throughout time within the working team. Achieve performance improvements by minimizing the number of renderings that the browser must make. Detecting errors before the code is in production thanks to the strict typing of the form. Also, it is important to consider these observations before adapting it in a project. There will be an additional learning time until the working team properly implements the library. It can be an excessive solution if the form to be developed is simple and with a few elements. The library has fewer community and collaborators than other older libraries in the market, such as Formik or Redux Form. You can see a complete comparison with these libraries in this link. Finally, I hope that this article has been of help in the project that you are carrying out or planning to do, and that you can adopt this way of constructing forms, so that you have an optimal and efficient development process.
Avatar img
Esteban Aristizábal
Software Developer @ Kushki
noviembre 16, 2020