top of page
MATCHLY PRODUCT DESIGN
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
.png)
ILLUSTRATIVE STYLE
Ilustrations
Icons
PRODUCT
.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 up page for registered customers
Anchor 1
Anchor 2
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.
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.
Anchor 3
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.
The next step connects to an external connection to the client's bank account.
Steps completed are marked as completted, and if needed, an edit option is given.
Once all verification steps are completed the client gets an explanation about what happens next, mainly Matchly checking that they qualify
Throughout the registration process, as sometimes connecting and loading takes time, empty states are designed as well.
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.
Anchor 4
In the open state of the dashboard you can see the different ways of presenting the information in the dashboard.
bottom of page