To support thousands of 401k participants to invest in stocks, we collaborated with Fidelity to let users apply for Brokerage Accounts online.
We only have 1 month to complete the B2C product, including development, so the design needs to be handed over in one week.
Only one Slavic employee is responsible for all the communication with each participant and Fidelity via email across the entire process.
From step 1 to 8, three parties, PEO, Slavic, and participants need to communicate via email or phone to finally receive application forms.
The process includes both Internal and B2C products. They are operated with different design systems.
How can participants individually complete the Brokerage Account application process with limited communication needed between three parties?
How?
Pros
Cons
How?
Pros
Cons
How?
Pros
Cons
Select fund FSDBA → input % of contribution → Fill out application form → upload documents → submit
Due to the technical constraint at the beginning, I design it based on the Idea #1: PDF form. After one week’s research, the backend team could extract the data on the customized form and put it on the pdf on DocuSign, so ideas 1+2 would work. In the end, DocuSign could even allow us to upload documents on the Sign step directly. Thus, our final solution turned into idea 2+3.
The pdf application form is always available online and users need to upload the form and documents on the page.
Users can download the pdf application form at any time in the Brokerage Account enrollment.
Participants still need to complete everything simultaneously, but we provide a customized form instead of a PDF.
Users don’t need to download the PDF form. Instead, they can fill out the form online.
A customized online form is available to provide a better experience.
Allow participants to fill out the form when they are available.
Users can complete the enrollment first and then come back to fill out the customized form later via the link on the email.
The first step of the customized application form.
We allow participants to upload their DL later. But how to communicate with participants?
Let users know the alternative to upload the ID later if there is no photo ID at hand. However, “Send me a reminder email” and “Who required?” use the same font style but serve different purposes. And it is too easy for users to know and take advantage of it, which harms our business.
The alternative to “Send me a reminder email” is prominent to users.
Create a small barrier but also provide an alternative. The only thing is to remind the dev team to send out the email after users complete the allocation.
The message that uploading the Driver’s License is optional now is hidden in the modal to encourage users to complete the process now.
Users can upload documents in the second stage after completing the form.
A Checkmark represents tasks that have been completed.
Due to business requirements and technology constraints, we end up only allowing users to upload before submitting their application form. This can reduce our employee’s workload.
Users are required to upload documents at the last step.
How do we design the stepper for idea 2 so that participants will know their progress?
Three options: Top navigation, side navigation, and expand steps.
Based on our design convention, it’s a better place to indicate a Higher-level navigation. However, it is redundant when I only have two steps: filling out the application form and uploading documents.
A good place to show different sections of the application (secondary navigation). And since document upload can be after the form submission, it is not included in the navigation section.
It allows users to go through everything on one page. However, due to the large number of questions, users need to keep scrolling to complete it.
Provide an intro page showing the high-level steps. And use the side navigation for the secondary steps.
Introduction of the primary steps on the first page of the application form.
Side navigation is used as the secondary step when the application starts.
Sometimes, the solution with the best user experience may not be able to be built due to various reasons. Discussing with stakeholders in advance or having one or two backup plans can push the project moving faster.
As an MVP was built in one month, we received additional requirements from different roles.
I designed a progress tracker as our internal tools to help the Trading team to track the participants’ application progress.
A progress tracker to help the Trading team to track the participants’ application progress.
Learned how to use grid layout for form design that is easier to implement on responsiveness.
Grid layout for the form design.