Double diamond methodology for user experience design

Avatar img
Andreína Medina Yáquer
UX/UI Designer @ Kushki
diciembre 07, 2020
Lectura de 2 minutos
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

Double Diamond 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.

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

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

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

From startup to scale up: How the entrepreneurial mindset helped me scale a business

From startup to scaleup: how an entrepreneurial mindset helped me scale a business The last time I wrote, was on the big step we took in our entrepreneurial journey: Selling our startup, and start walking along with a regional and much larger payment gateway. But, before that, we already had some time in the game with different businesses, some successful and others not much. The mentality and resilience generated in all these years of entrepreneurship struggle, has served the team and me to be able to flow in highly changing, dynamic, and challenging environments. Everything has happened fast with a bit of an impact, but if there is something we have learned, it is that it is very different from creating a local startup than scaling a regional business. One does not happen without the help of the other: The entrepreneur's path gives you the tools, and most importantly, the mentality to make a company grow quickly. The basics A startup is a small institution or company driven by a basic principle: Solving unsatisfied needs in society. And not by chance, because these natural needs are the ones that are precisely generated, because big institutions are not able to adapt fast enough to the changes we live on from day to day. Additionally, startups use new technologies, and their differentiating element is their ability to move fast. Which is the great objective of startups? Finding a market fit product, that is, a product that solves a market problem. This is when the turning point comes. It is that moment when the market needs more of your product than your small company can provide, where the first big Black Swan has generated: An unpredictable event that is out of normal. What does all this mean? The startup takes off, and becomes what many call a scaleup or high-growth firm. A scaleup? Surely, you are wondering what that concept is. A scaleup is an institution that has growth as its only objective. According to organizations such as the OECD or Endeavor, these types of companies are the ones that really generate impact in countries, and improve economies by providing numerous jobs. They are defined as those having at least 10 formal workers, who have experienced a cumulative growth rate of at least 72% for three years in a row (or a 20% average annual rate). Scaleups use their product and their already validated business model, to grab the largest share in the market. But they have something of a startup too, since they seek to maintain agility to be able to adapt to a sharp growth as well as possible. They are what Google, Amazon, Tesla, and many more were some time ago. Ambitious in their essence, they want to break barriers and tend to monopolies. For that, they use financing, technology and human capital. Everything to maintain exponential growth. It sounds like chaos and, to a certain extent, it is. But it is good chaos, of the kind that achieves genuine solutions to dynamic problems, which are becoming larger and bigger. It is the type of chaos that takes the best of some, inviting others to adapt or take a step to the side. And there are multiple variables in this stage: We work to systematize the processes that were made manually in the startup phase, in scaling sales to increase our reach, in strengthening our product to respond to new demand, in structuring the culture to attract the right talent, and in increasing the sense of belonging of new people joining the team. It is a moment of change of priorities, where the question is moving from how we obtain more resources (money, advisors, talent), to how we can use those resources to generate greater impact. Scaling without dying in the process To grow this fast, the institution has to achieve adaptation in good way. In a dynamic and fast environment like this, that is achieved by delivering a sense of belonging to the people we work with. It is important to generate autonomy because, along with growth, roles are changing, and responsibilities increase. There is a point where you welcome new partners every week, and things out of our control happen and happen. The clearest example is the Coronavirus pandemic. It is something that needs to be dealt with, and fast. There is disorder and there is chaos, but of the type that generates results, motivated individuals and, more importantly, those happy with their work. As in everything, there are good days and bad days, that is what makes it exciting. Founders are no longer the only ones that create dynamics and make decisions. In that growth, there are several validated models to achieve market participation and continue developing a scalable product. But independent of the strategy, there are essential aspects that need to be addressed: First, the key point to be able to grow: Financing. Scaleups use external resources to leverage their exponential scaling. If the company decides not to have external financing, it slows its growth. There is nothing wrong about it, only that it would not be a Scaleup. Second, culture. As scaling happens quickly and challenges are increasing, it is important to maintain the soul of the startup you once were. If there is no clarity of that, it is easy that your values and objectives start blurring in the way, and that your decisions are inconsistent with that. Third, contracts, one of the biggest challenges. It is key to have resilient and dynamic people, that have the ability to adapt to changing environments. This is not for everyone, and that is fine; one must only know how to recognize it when expanding the teams. Fourth, chaos management. A little chaos is positive, it gives dynamism to the working environment, and helps to continue progressing. The important point, is to have it under control, and develop tools that allow each to do their work in the best way, even in chaotic moments. And finally, there are many questions on which I do not have the answer. Nobody is born knowing how to scale a business. Questions are thousands, and they are pilling up in the way, but always with a clear objective: Achieving cohesion in the team to release its potential, thus achieving the greatest impact possible, helping our region to develop. If you like traditional businesses, the structure and the known, working in a scaleup is not for you; but if challenges call you, changing environments encourage you, and you flow in change, I cannot less but recommend you working in a scaleup, that will fill your life with emotion and innovation.
Avatar img
Oscar Quevedo
Country Head de Chile y VP de Marketing @ Kushki
noviembre 05, 2020