shutterstock_1012481533.jpg

 MATCHLY PRODUCT DESIGN 

logo.png

Matchly is a new Fintech startup that aims to help people match their employer 401k payments, so they can save for their pension and not let the employer match go to waste. The idea is simple- Matchly loans them the money they need to match their employer 401k payments and the customer can then pay Matchly back over time. After the customer signs up he can follow his progress on a dashboard.

I designed the full cycle of the product- starting from the branding, then the company website and registration process and finally the product dashboard.

BRANDING

COLORS

FONT

Sen

Group 259 (1).png

ILLUSTRATIVE STYLE

Ilustrations

savings illustration.png
Group.png
sign up illustration.png
sign in illustration.png
icon match.png
icon money.png
icon arrow.png

Icons

Group 183.png
Group 189.png
Group 190.png
Group 184.png
Group 187.png
Group 185.png
Group 186.png
Group 188.png

PRODUCT

Homepage Desktop (1).png

HOMEPAGE- PHASE 1

The homepage is the first interaction the clients have with the product. Here they can learn about the product and what Matchly can do for them as well as sign up for the product. The homepage also serves as their portal to enter their dashboard once they are a client.
The header has a calculator that immediately shows the visitor how much money they will get each month and year. 

The next few sections prove the benefits of the service and show exactly how Matchly helps, through testimonials, graphs and simple explanations.

Three steps exemplify how easy it is to sign up for the service and start saving

Transparency is a main tenant of the company and the founders wanted to present it clearly that they earn a percentage from this, as well as show the years of experience they bring to the table (bottom of the page). This also proves that they can be trusted

A video and FAQ section that answer any lingering questions the potential customers may have.

Sign in.png

Sign up page for registered customers

 
 

REGISTRATION PROCESS- PHASE 2

Application flow

Registering for a financial product is more complex than registering for a regular product. The company needs to gather financial information on the potential client in order to mitigate the risks of loaning them money. On the other hand, people are reluctant to give out financial information about themselves, especially online.

The registration process has 2 phases. An initial application and then a verification process.

My main focus in creating these 2 flows was to make them easy for the client to get through and not have them hesitate in giving this much needed, yet private, information.

Each step asks a different type of question, so it allowed me to employ different UX techniques. This helps move the customer along in his journey

Since finances is such a delicate subject and also because many people really don't know about their 401k, it was important there be a clear way to contact support by phone to help anyone who needed it with the process.

email.png
401k.png
match rate.png
vesting.png

Uploading a paystub is a crucial part of the process. An automatic upload loads much of the information needed directly to Matchly's system, so I tried to subtly push the customer in that direction.

Employment & Income Verification.png
Details.png
password.png
check email.png
 

Verification flow

After they finish signing up in the application flow they reach a screen similar to the dashboard of the product in order to get them excited about the product and finishing the process. The dashboard shows them in a clear way how much money they can make by signing up and summarizes their terms.

Congratulations.png

The next step connects to an external connection to the client's bank account.

Link bank account.png
Link bank account-plaid1.png

Steps completed are marked as completted, and if needed, an edit option is given.

verification state 2.png
Application is under review state.png

Once all verification steps are completed the client gets an explanation about what happens next, mainly Matchly checking that they qualify

waiting for plaid.png

Throughout the registration process, as sometimes connecting and loading takes time, empty states are designed as well.

Final terms and signing.png

If Matchly approves your application, you receive an email and when clicking the link, you return to the final stage of the sign up process. All terms are presented and the final step is accepting the terms.

DASHBOARD- PHASE 3

The product dashboard starts with some parts locked. Once the first paycheck comes in, the parts are unlocked. For this stage of the company, the dashboard presents information about the payments, money accumulated and technical information such as bank account.

All Closed.png
All Open.png
 

In the open state of the dashboard you can see the different ways of presenting the information in the dashboard.