Wise Business Banking

Application Experience

The process behind creating the web based
account application experience

Project Intro

In January of 2019 I joined two of my previous co-workers as a founding team member of Wise; a digital bank built specifically for small businesses. It combines banking and payments into a single experience that allows the business owner to earn 2% APY on their checking account while being able to make and accept instant payments. Our goal at Wise is to optimize cash-flow and help small businesses grow.

Important:
To comply with my non-disclosure agreement, I have omitted confidential information in this case study. All information is my own and does not necessarily reflect the views of Wise. 

My Role

As the Product Design Lead, I currently lead the efforts in all design related areas. My role starts with writing product specs and ends with app store screenshot delivery.

Main Tasks

- Market Research
- Customer Insights
- User Interface & Experience
- Product Management

My Design & Product Tool Kit

sketch-mac-icon@2x-1

Sketch

Whimsical

Whimsical

mac_icon-103e1b4328ccabecc9d2e2742179adb9e91580b333b53d62c89e3a88f25e0c68

Flinto

1iCbgYeG6OgaNOmAKZvWOVw

Abstract

1051px-Adobe_After_Effects_CC_icon.svg

Adobe AE

Unknown

Adobe AI

Unknown

Adobe PS

images

Jira

Unknown-1

Notion

OpenSigns-02-1

Understanding Small Businesses

In order to successfully provide a banking experience small business owners would enjoy, we set out to interview 20 business owners across multiple different industries. Arjun, our CEO, even spent a few days in the back offices of small businesses from friends and family.

We interviewed restaurants, freelancers, online retailers, motel owners and many more. Our goal was to deeply understand their banking needs and uncover points of friction in their day-to-day operations.

Once we had finished our initial research two things jumped out to us:

  1. The similarity between different verticals in the SMB space when it came to banking and payments.
  2. How many different applications were being used to manage cash-flow related tasks.

Based on these findings, we figured that we could have a successful first version of our product by "simply" solving the problem of a disjointed banking and payments experience.

Understanding the Business Owner

While this may seem very similar to understanding the business itself, it was also very important for me to further understand some of the key characteristics of small business owners. The research for this was conducted in the same interviews as we used to understand the business itself. I used the findings of this research to guide me in the visual and interaction design and decision making process.

Some of the most important characteristics I gathered in these interviews are listed to the right.

Based on the findings, I knew that Wise would have to be very simple and easy to use. We also had to make a great impression on our customers. And most importantly, we had to show how to leverage Wise to run their business more effectively. 

WebsiteArtwork-03

Designing The Account Application Process

This was something new to me, and a challenge that definitely excited me. Unlike previous projects I worked on, this required a comprehensive application process before even allowing applicants to access the main product. We focused on keeping this process as light as possible, while fulfilling the legal requirements and collecting all of the necessary data to approve or decline an application.

WebApp-Hero-Copy-1

The Process & Our Thesis

To get the product development kicked off, we started by closely collaborating with our banking partner BBVA Open Platform. They helped us get a good understanding of the legal restrictions and requirements to keep in mind while designing the application process. But after running a few initial usability tests, I realized that there were too many steps involved in the application process to use a traditional form. Even after stripping out all unnecessary fields and pre-populating the ones we could, the form was still long and tough to navigate.

We started thinking about processes in the real world that require you to answer a bunch of questions before you get the result. Maybe it had something to do with the fact that it was around lunchtime, but it didn’t take long before one of us remembered the last time they were at In-n-Out and ordered a customized burger and the simple experience they had:

  1. Select your menu item from a short list
  2. Answer the cashier’s questions specific to the selected item
  3. Eat exactly what you asked for

We realized that this was, in fact, a pattern spanning across all successful restaurants. They had found a way to reduce information overload by only having a handful of meals on their menu and allowing customers to change them based on applicable options to the menu item. Why should digital product design be any different? Users want a fast and easy way to complete their everyday tasks, and not be overloaded with 50 different irrelevant options on a menu.

This eventually led us to come up with our Hamburger or Hotdog design pattern. It’s simple: what would you like today, a hamburger or hotdog..? Open a bank account for a business that is an LLC or a corporation? We decided that the best way to navigate users through the complex forms that are required to open a business checking account was by offering them bite-sized and straightforward choices that take them down a customized path for their needs.

The User Flow

A business banking application requires two important parts, an identity verification of the person applying, and a business verification. The application process varies greatly depending on the entity type (Sole Proprietor, LLC, or Corporation). Because of this, my goal was to make this process as contextual as possible, showing only the questions required of a specific entity type.

Onboarding-updates

The Wire Frames

Now that the flow for all of the scenarios was established, my next challenge was to come up with a framework that would work for all of the different scenarios that could come up. That's when I went into wire framing, to be able to think strictly about how to organize information on the page to allow for a consistent pattern throughout the flow.

Post-MVP-Onboarding-Wires2
Post-MVP-Onboarding-Wires-2

The high-level questions are simple but definitive and lead the applicant down a contextualized path for their specific needs — there is no irrelevant information cluttering up the User Interface anymore. Based on previous answers from the user we ask the more specific questions, which enables us to create a truly customized on-boarding experience that offers helpful and relevant content such as FAQs and tips in a stationary panel on the right side of the screen.

The Visual Design

My goal with the visual design was to keep it friendly and easy to navigate. I wanted to keep possible distractions to a minimum and only emphasise the information that required input from the user. Here is a quick snapshot of the key visual elements.

WebAppUI-1

Colors

The brand guidelines and logo were determined by the founders of the company before I was part of the team. The friendly and playful approach to business banking had not been taken yet by any other product in the United States.

Because the green demands so much attention, I decided to supplement it with tons of white and subdued blue-grey tones. For the text, I went with a dark blue-grey to work together with the green and also pass accessibility standards. 

WiseColors2-05-1

Typograpgy

Because our customers where are focused on efficiency and simplicity, I decided to keep it simple and go with a single sans-serif typeface – Circular.

To differentiate between headlines, titles, and body copy, I restricted myself to different sizes and weights. This allowed us to achieve a clear type hierarchy without complicating the design.

WiseType-07-1

Illustrations

My goal for the illustrations was to find a modern and playful style that worked well with our typeface, minimalist color scheme.

Due to the tight deadline for this project, I decided to outsource the illustration design to a talented Illustration designer, Pablo Fernández Coronel.

Pablo was able to create custom illustrations based on the direction we wanted to go. His style and quick turnaround was outstanding and helped us get to a polished product much faster than if we did this work internally.

WiseIllustrations-08

The Impact

Switching to this approach not only made it a lot easier for applicants, but it also enabled our Customer Success team to provide the right resources and answers right away. Because we separated the application flow into bite-sized pieces we were able to implement accurate screen event tracking through Intercom, which lets us know where, and why, the applicant is stuck. Now we are able to offer help without asking a ton of questions to diagnose the issue — saving ourselves and our applicants valuable time. Since moving to the fast-food inspired design standard we have seen a significant decrease in the time it takes users to submit their applications, as well as an increase in success rate!