Final

Visit site

A cross-platform credit product that enables young professionals to give a unique credit card number to every merchant, eliminating the hassle associated with a cancelled cards, fraud, and theft.

The Problem

Managing your credit card(s) today sucks. There's always a huge amount of hassle associated with a cancelled card, fraud, and theft. You're forced to waste time re-establishing payment relationships, worrying about missing bills, or constantly checking bank statements. There is a burning need for a credit product that solves all of these problems, which is what we created at Final. The main challenge was finding a way to create a unified experience across a range of environments that makes it easy to create and manage both physical and virtual credit cards.

. . .

Users & Audience

The target users of Final are young professionals with high income who work in the tech and/or creative industries. Because these users tend to be affluent and active, their spending habits are generally focused on technology, health/fitness, and travel. It’s important to note that many of these users are extremely passionate about their financial security. This is usually a result of going through frustrating experiences with other banks where they found it very difficult to manage their financial security and solve problems (e.g. identity theft) quickly and effectively. As such, these users will initially put up with more product issues just to have access to something that addresses their issues (and alleviates their pain).

. . .

Team & Role

I worked closely with a team of engineers, a PM, a compliance officer, and several third-party stakeholders (banks, legal, etc.).As the Lead Product Designer on this project, I designed all products for Final’s new credit card platform across mobile and web environments, tested designs with users, and delivered innovative design solutions in a rapid and innovative manner.

. . .

Design Process

When I joined the team, Final had some early concepts of what they wanted their product to do, but nothing really designed or built out. I worked closely with the rest of the product team to ideate on these early stage concepts and over time, built them out into fully fleshed products across multiple environments. As always, this process started with sketching in order to quickly visualize what the product might look like across environments.

Initial rounds of sketching and discussion revealed to us that much of the problem of consistently displaying the same pieces of financial data across environments could be solved by using a card-based approach. We found that if we could create cards that displayed the same core pieces of data, then we could rearrange information based on platform and consequently retain a feeling of continuity and consistency across environments.

This led to initial UI explorations which experimented with varying amounts of data display. Through these explorations we soon discovered that there might be an overwhelming amount of data displayed to users, so we thought that this might need to be pared down. So, we conducted a series of guerrilla usability tests (both remote and in-person) to validate our assumptions. The results indicated that indeed users where overwhelmed by the data dense concepts, so we created and tested new concepts that progressively reduced the amount of data being displayed. This allowed us to refine our concept until it had just enough information to be useful and clear. As Antoine de Saint-Exupery eloquently put it, "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."

. . .

iOS App

The iOS app was an interesting challenge in that we knew that users are generally less likely do their shopping on mobile than they are on desktop. As such, we needed to create a way for users to generate and manage cards from their phones that integrated seamlessly with their web experience. We did this by creating an experience that allows users to create a card on their phone, then either use it with a different app or site on their phone, or access it via the web interface on desktop. Also, coming down the pipeline is integration with Apple Pay - the result of all of this is a platform that enables users to easily create and manage virtual credit cards across all environments.

Because Grin is an internal app, users sign in with their company gmail account and password. It’s nice for users not to have to create yet another app account.

Users can easily scroll through a feed of all grins (no newsfeed algorithm here). They can see who made each grin and who it was addressed to. They can also create a new grin with the single push of a floating action button. They can navigate to settings (swipe right) or to browse profiles (swipe left).

When searching for someone specific, users can filter between departments using the tab bar, making it easy to quickly find who they're looking for, even if they don’t know that person by name.

Big, beautiful pictures that let the person's personality shine through. If users want to directly contact a person, they can easily to do so by clicking the ”contact” icon. Users can also write a grin with a single push of a button.

When searching for someone specific, users can filter between departments using the tab bar, making it easy to quickly find who they're looking for, even if they don’t know that person by name.

One of the primary features of the app is the ability to generate virtual credit card numbers at the push of a button. Because this is a new behavior to all users, it's important to make it a fun an engaging experience that makes users want to engage with their credit card more, not less. To accomplish this, I created an animated card generation experience that eases anxiety around this new interaction through the use of calming colors and playful animation. Additionally, the card configuration UI is easy and tangible - there's no need to call anyone or fill out forms to get a new credit card number. This all makes for a truly easy and enjoyable experience.

. . .

Web Dashboard

The web dashboard was the most feature-rich out of all the products as a result of our user research. After speaking to many users, it was clear that for the more heavy duty financial tasks (payments, bank account linking, etc.), they wanted a web dashboard.

The aim of this layout was to insure that users can access their most frequently used tasks while minimizing the effort (number of clicks) required for them to get there. We found that the two most important uses for the web app were monitoring (and if need be, disputing) transactions, as well as generating new virtual cards. That's why a list of transactions is the first thing users see upon logging in, and the ability to generate a card is only one click away (while keeping the list of transactions in view).

. . .

Web-Based Signup Application

One of the first and most important parts of this project that we tackled was the web-based signup application. The main challenge was balancing compliance and regulatory requirements with a painless user experience. This was accomplished through close collaboration and iteration between team members and third parties.

The interaction model for the signup application centers around a scroll based model in which the blue bar on the right stays fixed while the various form sections scroll on the left as the user completes them.

. . .

Outcome

When I joined the team, Final just had a concept for a product. I helped them to flesh out their vision and bring their product into reality. As a result, the product made it to beta launch and received overwhelmingly positive feedback from users (with 100% of signed up users remaining active).

Seeing the product vision realized helped to fully bring our bank partner on-board, which ultimately helped the company to receive its BIN (bank identification number) sponsorship, without which it would not be able to do business.

One of the biggest things I learned from this experience is that when working in a domain (i.e. finance) that is not in your area of expertise, the earlier you collaborate with domain experts in the design process, the better.