Star Icon - Colorfolio X Webflow Template
Web 2.0
Star Icon - Colorfolio X Webflow Template

Flinks

Flinks is the easiest and most efficient way to use financial data. Our open banking API and no-code platform let you connect accounts, enrich data, and utilize it to power your products.

Flinks
Timeframe
May 2020 - May 2022
Platforms
Mobile & Web
Focus area
Fintech
Star Icon - Colorfolio X Webflow Template
Project overview
Star Icon - Colorfolio X Webflow Template

Dashboards + Developer Handoff + a Design System oh my!

Context
I was their first product designer despite them being ~3 years old because they realized they needed one to manage their entire product suite
Problem
There wasn’t a B2B/enterprise-facing product: the Client Dashboard;there was however a Dev Portal + a Client “Portal” and they had no design system
Goal
To redesign Flinks Connect and design the Client Dashboard by merging both Dev + Client portals as well as their entire design system
Happy Path (B2B)

Signs up/into the client dashboard from the Flinks.com main website or via invite > configures Flinks “Connect” and/or views and takes action on “Insights”

Competitors

Plaid, Nordea, Nordic, Fidel, Neonomics, Tellerio, Saltedge, Mono, Stitch.money, Okra

Methods

Competitive/Contemporary Analysis, MECE, applying Design Principles, Dogfooding

Personae

Technical & Nontechnical business users & working professional end-users

Outcomes

Flinks Connect: 150% increase in connections by the end-user (our B2B2C customers)
Client Dashboard:
helped to induce a 250% increase in sales (with our B2B customers)

Happy Path (B2B2C)

Selects “LINK/CONNECT BANK” from within our client’s application/service > selects financial-institution > logs in > selects account > goes through 2/M-FA > COMPLETE

Contemporaries

Stripe, Argyle, Passbase, Square, Shopify, Braintree, Silamoney, Swan.io, Contra, Token, Marqeta

Tools Used

Figma + Figjam + Adobe Design Suite
Google Docs/Sheets + Miro + Azure

Sample Size

15 Competitors/Contemporaries, 10 to 20 internal stakeholders, and 5 to 10 external stakeholders

End-2-End Designs

All of these are mostly ground-up designs due to the fact that the original Flinks Connect had no designers beforehand. Overall, the original Flinks products contained a lot of inconsistencies, outdated UI, and a weaker UX. The timeframe for each of these projects includes designer-to-developer handoff and any/all iterations thereafter. The Flinks Connect designs have a mobile-first design whereas the Client Dashboard designs are web-based only given that there’s good demand/need from our business customers to use a mobile-version of the dashboard. It shoud be noted that for some of these designs there is also a French version, Sandbox vs. Production mode, and various flows associated with the 2 broad personaes - technical vs. nontechnical; however for the sake of brevity these designs will focus on English and Production designs, as well as the more utilized use cases.

Partial-Redesign and Ground-Up Design of the Embedded solution for Flinks Connect

Flinks Connect is the flagship product of Flinks which allows its users to connect their financial institution to whichever client of Flinks’ that the user is interacting with. Flinks Connect has 2 solutions - one called “Embedded”, the other called “Express”. This is the “Embedded” one named after the fact that it’s “embedded” into our client’s software in terms of an API integration. This is one sample flow but there are a multitude of other flows, for which are all designed. From error states to Canadian banks to certain steps being disabled due to the client’s needs.

Partial-Redesign and Ground-Up Design of the Express solution for Flinks Connect

Flinks Connect is the flagship product of Flinks which allows its users to connect their financial institution to whichever client of Flinks’ that the user is interacting with. Flinks Connect has 2 solutions - one called “Embedded”, the other called “Express”. This is the “Express” one named after the fact that its setup is “express”-ly fast due to how it’s Flinks’ no-code solution for its nontechnical clients.

Partial-Redesign and Ground-Up Design of the Client Dashboard

The original Client Dashboard didn’t exist, rather there was a highly under-utilized Developer Portal as well as a highly-utilized but mainly internally-speaking by Flinks Admin product called “Portal”. Essentially the Developer Portal became the “Connect” dimension whilst the “Portal” became the “Insights” dimensions of the Client Dashboard respectively. The reason why these products were separate at the time was due to the fact that Flinks operated in a just-in-time way previously - building only what was necessary with little-to-no planning/strategizing beforehand due simply put to the scrappy nature of its early-startup days.

Embedded Configurator & Express Configurator (the latter of which is on hold right now)

The Client Dashboard comprises of 2 major dimensions for Flinks’ business customers - the “Connect” Configurator for both Embedded and Express solutions to Flinks Connect as well as “Insights”. The latter of which is all about providing the client with analytics pertaining to their customers’ usage of the Flinks Connection API.

Requests + Invites + Reports

The Client Dashboard comprises of 2 major dimensions for Flinks’ business customers - the “Connect” Configurator for both Embedded and Express solutions to Flinks Connect as well as “Insights”. The latter of which is all about providing the client with analytics pertaining to their customers’ usage of the Flinks Connection API.

Onboarding + Home + Settings + Profile/Account

It may seem counterintuitive to have this part of the Client Dashboard be focused on at a later stage but it was determined to be as such given that the initial onboarding wasn’t extremely problematic and therefore wasn’t as urgent of a need. We needed to design the interior first before the entrance to the interior because we ran the risk of scaring our existing clientele away if we had enticed them with a beautifully designed onboarding but nothing to show for after they migrated from the previous status quo to this new one.

External Data

This is a unique feature and it’s all about providing our clients with a way to uncover certain attributes on their customers’ data. This feature along with the following one makes up the “Flinks Enrichment” solution. This solution is the smart analytics layer on top of your raw retail and business banking data. How it works is as follows: the client can sync their raw financial data in any format, the data is cleansed, organized, and categorized into a standardized format, with high accuracy labelling and nearly zero miscategorizations, then the client can choose from over +1,800 attributes that provide enriched data output via our Attributes library Thusly, Flinks offers their clients tailored and ready-to-use data in the form of trends, ratios, and predictive insights.

Queries

This feature is also a unique feature that’s all about providing our clients with a way to conduct compliance on their customers’ data. What this means and how it works is similar to the above except this feature is more tailored towards investments data. So, similarly the client will upload customer data wherein said data will be their customers’ transactions that pertain to investments Then our dashboard will provide a way for our client to search through their data so as to see if the data is sound as well as to find specific details regarding said data that may or may not implicate the client’s customer.

Design system

Ground-Up Design inspired by original look/feel

This design system has various aspects to it of which there are 2 sets of components, each pertaining to the B2B2C and B2B products. This design system is very comprehensive as it contains not only the typical typography, iconography, and colour schemes found in any design system but given the nature of what Flinks does - it also contains three sets of logos. These logos take on the form of Flinks’ financial institutions - both Canadian & American, as well as Flinks’ clients (both real and dummy ones). The extensiveness of this design system is a result of a year’s worth of work and it’s continuously growing & evolving to account for the various states (Sandbox vs. Production), user-types (technical vs. nontechnical), platforms (Web vs. Mobile), products (B2B vs. B2B2C), and the various statuses of each component - turned on vs. off, maximized vs. minimized, as well as the various data packages, etc.