Vitaly Dulenko

Wirex Business

Financial app

- ROLE

Lead designer — discovery, user research, design, animation, testing


- FOR

Wirex


- DATE

2018


- TYPE

Web app


Wirex Business is the world-first cryptocurrency solution for business. This app allows SME owners easily create and top up accounts in traditional and crypto currencies. They can add or invite their counterparties to Wirex platform, send, exchange and request money; invite users with customs roles and permissions; set up payrolls.


Objectives

Launch the world-first cryptocurrency solution for business.

Problem Definition

I was lucky to be involved in creating the new product from the start. I had the complete freedom to conduct research and shape the product concept together with product managers. My first task as a designer was to outline the product definition to clearly understand what we are creating and for whom. I started with searching for "why" to find the core need our users have.

Research

User interviews


To find the answer, I conducted several surveys to find out the current problems the SME are facing now. Also, I collected numerous tweets followed with hashtags #banking #hate on Twitter. I like analyzing customers' social posts. If you read between the lines, you can find out interesting and useful information the users won’t tell you during the interview. Also, I made the competitors research to analyze the current solutions for SME businesses.

I used the 5 Why's methodology to get to the core problem:


1. Why our users need Wirex Business? — To make business transactions fast and easy.


2. Why? — Current banking system is outdated, slow and unreliable. The blockchain-based solution allows users to send and receive money in seconds, with low fees and high level of security.


3. Why? — Modern business works all over the world. They have suppliers, counterparties and customers in different countries, so they need an all-in-one solution to maintain business.


4. Why? — To spend time less on transactions, and give more attention to grow business and make their products/services better.


5. Why? — They want to get the profit, duh.


Personas


I used personas method to better understand my users. I had two main types of target users  —  freelancers and SME owners.


According to the research, one of the most important indicators for entrepreneurs was understanding the current state of their business. We formulated this in the form of a question asked by a business owner logged into the application — "How is my business today?" We cannot help the user to earn more or build a successful business, but we can help them to control and effectively manage their finances, which is one of the components of successful entrepreneurship. This includes the ability to easily see the current balance and its change, transactions that require attention (pay, confirm, reject, remind counterparties to pay invoices), make payments, etc.


We defined the core problem our users would want to achieve — to get profit and take control over their funds. How can we help them?

I used personas method to better understand my users. I had two main types of target users  —  freelancers and SME owners.


Usage Scenarios

Having defined the goals of business and users, we have built usage scenarios — the core actions that help achieve these goals. Each scenario was written in detailed steps, taking into account the legal requirements and technical limitations of the product.


For fintech, the active user is the one who performed at least one operation. What does it take to perform this operation? Take the first step — adding money. What is needed for this? Entering data from your card or bank account. But in order to top up the account, the user must register and pass the verification first. Here we have found basic custom scripts to build the others from.


Registration -> Verification -> Add Funds -> Make Transfer


Usually I collect the results in a text document. Text allows me to focus on how the product works — to create a holistic history and check for flaws in the logic of the product — without being distracted by the visual part.


User Flows and Journey Maps

Next step is building a visual structure of custom scripts in the form of a flowchart. This allows you to see how the product works in the form of a system of elements and their relationships — where the user will start, where they will go etc. 


Using a mind map, we build and combine user actions into one whole (where and where) and think of states (what if?). At this point, you can see the key links that are important to the business that are worth paying attention to. For example, in one place the user has to make a certain choice (how to organize in the best way?), in the second — to enter data (how to make it more convenient?). This approach also helps to identify recurring patterns to reuse and optimize.


Journey maps helped us to process each flow in details, taking into account the users goals, thoughts, desires and emotions of the user at each stage.


User Interface

Then we started working on the interface. I used freehand sketches and wireframes to quickly visualize and evaluate the interface. We use modularity and systematic in the design of interfaces, which allowed us to use general principles and approaches in solving the same problems.


I like to regularly create and test clickable prototypes because users don't work with static screens in Zeplin. They interact with the buttons and input fields, get feedback, and all off this creates a holistic impression of the product. One of my main tools for this is Framer. It allows you to create code components, add real logic, validation, data, and get the full experience of interacting with the product.


I also worked on creating emails and promotional materials, because the user experience does not begin or end with the application. It covers everything that is included in the product, and it is important that all activities provide a holistic experience.


Testing and Verifying Hypothesis

We launched Wirex Business in the test mode, which allowed us to receive feedback from users and conduct surveys. Based on the data obtained, we tested our initial hypotheses and metrics, and made changes if necessary. Feedback such as "The interface is too user-friendly" has supported us in our quest to create a great product.


As a result, we have created a comprehensive product that carries a common message to users in all places. Thanks to the modular approach, we can easily remove or add new features without compromising the consistency of the user experience.


Design System

To create a consistent experience, we create a modular design system, redlining every component and layout templates. Developers now can implement the design ideas in code with no problems. Also, after the production, I performed a design review session testing every screen of the app.


Component documentation

Layout template

And One More Thing

To maintain the product working, I also designed the new admin panel that allows the support team to easily solve any users issues.


Fully clickable coded prototype