Tian Zhao
Product Designer

Flinks

Toronto, Canada (distributed) as a
Digital Product Designer

Flinks is a data company that empowers businesses to provide better financial services to consumers. Trusted by over 200 world-class companies, Flinks enables businesses to connect users’ bank accounts, gain financial insights into their customers and provide better risk products.

We count as clients more than a hundred of some of the world's top financial institutions and FinTechs, including ATB financial, EQ Bank, TransferWise, Paytm, Wealthsimple and many more.

Image alt tag

Flinks Connect

I'm currently working on updating the Flinks "Connect Configurator" and this is what it currently looks like. Below are designs and a link to the present prototype.

Below are the designs for what the Configurator of the Flinks Connect - Embed version will contain.

Flinks

Flinks Connect - Configurator

I'm currently working on updating the Flinks "Connect Configurator" and this is what it currently looks like. Below are designs and a link to the present prototype.

Below are the designs for the Configurator of the Flinks Connect - Hosted version.

Please enlarge by clicking the "Figma" logo in the bottom-left corner.

Scope of Work

Admin

  • Timeline (inclusive dates): May to August 2020
  • Product Platforms: Web
  • Product Type and Status: For-Profit Enterprise | established in 2016

Work

  • Team Structure - I worked with the following people: 6 software developers, 1 product manager, and several senior executives in software and product roles.
  • Client and/or Problem Statement: Flinks has built a great developer-facing product, which is the Flinks API but needs a user-facing product for their enterprise customers so as to deliver their services in a more accessible, robust, and versatile manner so as to satisfy their Open Banking initiatives.

Verticals 

  • Product Summary: B2B/Enterprise SaaS
  • Business Vertical:  FinTech
  • Technology Vertical: Cognitive Computing (AI)

Background

  • Product: https://dashboard.flinks.io
  • Company: http://flinks.io/

Process

Challenges & Objectives

User Problem(s) and Product Goal(s): twofold, Flinks would:

For clients that are typically fintech startups like challenger banks - provide a one-stop shop for these types of clients who typically consist of software and product executives to be able to develop, analyze, learn about Flinks to better build, get support for, and manage their financial technology projects for their customers.

For clients that are typically banks or traditional financial institutions - provide a one-stop shop for these types of clients who typically consist of business and finance executives to be able to analyze, sell/market/support, learn about Flinks to better serve, get support for, and manage their financial technology capabilities for their customers.

Overall - this enterprise portal is the Flinks Open Banking portal. This product is all about providing a way for incumbents and startups to utilize the Flinks product directly instead of indirectly vis-a-vis interactions with business/sales/marketing people.

User Research & Testing
Flinks

Persona

As the fintech sector accounts for 80,000 jobs in Canada, the companies that employ them need access to Canadian consumers through a regulated framework, says Sue Britton, founder and CEO of FinTech Growth Syndicate. “This is going to have an immediate impact on our economy,” she says, noting that fintech attracts $3 billion in foreign investment. “That’s a lot of money, and we need to keep it coming into the country.” ~ Sonia Lagourgue, author of Is 2020 the year for open banking in Canada?

Apart from the above reason, we concluded on this persona in the following manner:

  • Clients that are typically fintech startups like challenger banks who are typically the software and product executives need an easy way to access the codebase of the Flinks API in order to build their fintech startup product(s), analyze the performance of the product(s) they'll build with said codebase, learn about how to use it, get the support they need, and manage their entire back-of-the-office administration details in a highly accessible, efficient, and robust manner.
  • Clients that are typically banks or traditional financial institutions who are typically the business and finance executives need an easy way to access the data that has been shared with the Flinks API by the incumbent, analyze the performance of the product(s) that utilized said data, learn about how all of this works, get the support they need, and manage their entire back-of-the-office administration details in a highly accessible, efficient, and robust manner.
  • The reason for all of this is because currently the Flinks product requires either the startup or the incumbent to read through a lot of documentation that are all over the place, send an email to either the Growth, Support, or Sales teams in order to gain access to either a limited amount of unlimited amount of live users for the startup or the data they need for the incumbent respectively. This process has a lot of friction for both parties.

Empathy  Map

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.

We decided to do an empathy map to best understand the value Flinks is providing for its users so as to have this be a guiding star for us moving forward.

The most important goal of centralizing, consolidating, and optimizing the jury duty experience for a user was chosen by conducting a JTBD exercise.

The steps in the user journey were determined by utilizing a strategy consulting concept called MECE, which stands for "Mutually-Exclusive and Comprehensively Exhaustive". This was used in conjunction with the methodology of Hierarchical Task Analysis.

Additionally, a mix of guerrilla user interviews and secondary user research was carried out to understand how the users felt throughout this user journey and helped me to better understand how to apply existing UX principles and laws into improving the design iteratively.

This empathy map helped to roadmap out new features and how best to update our copy as well as focusing the design of the product on the concepts of "efficiency", "pragmatism", "robustness", "versatility", and "accessiblity".

Ultimately this helped determine the Happy Path that needed to be optimized for:

"I want to access Flinks' services in a front-end perspective not purely in terms of interacting with business people and waiting for their back-of-the-office processes are complete before I can proceed with my business. I want to be able to have a full-service experience using the Flinks product digitally-speaking instead of mostly interacting with people as gatekeepers”

Flinks
Designs & Iterations

MVP Prototype of the "Developer Portal" pilot project

This is the current prototype of the Flinks Enterprise Portal MVP in its Twitter Bootstrap + Angular + Material design system framework.

The reason why this was chosen was because it was the framework used beforehand/originally when I was first onboarded to the Flinks team. Therefore for feasibilities sake in terms of integration into the existing technical infrastructure that Flinks is built on, it would be easier for the developers to work on. Flinks being a Series-A funded startup is still in its early stages and the team working on this product was a junior development team had technical limitations and given that we were operating in an Agile environment made it difficult for us to implement any other more advanced design systems.

The below prototype is a major iteration from the current product - dashboard.flinks.io.

The link to the original web prototype is here: 

https://flinks-enterprise-portal.invisionapp.com/public/share/9E15UKCC2Z

Flinks

Flinks Developer Portal

To the left and below are featured screens depicting the following main sections of the product:

  • "Develop" - this section is all about providing the developers with the necessary tools to build their fintech product using the Flinks API whilst also pathways towards live users (limited or unlimited)
  • "Analyze" - this section is all about providing the user with analytical data pertaining to how their products are being used as well as the system status of Flinks altogether
  • "Learn" - this section is all about providing the user with a knowledgebase essentially
  • "Get Support" - this section is all about customer support/service/success essentially
  • "Manage" - this section is all about managing various aspects of their company account
  • "Profile" - this section is all about managing various aspects of their personal account
Insights & Takeaways
(N/A, as this is ongoing right now)

Insights

This is a work in progress

Takeaways

This is a work in progress

Testimonials & Impact
"Tian has a mad genius kind of personality and we love him for it! But he's also a great team player, he has consistently been able to practice the Pareto Principle in all that he does and has always been there to answer any questions the developers had. He's also always been willing to lend a helping hand to any/all other projects that lie within the Flinks ecosystem. Tian's energy is contagious and we have great faith that he'll go far in his career."
Julien Cousineau - Senior Product Developer
97%
Final Task Success Rate
86
System Usability Scale
96%
Customer Satisfaction Score
3%
Final User Error Rate