Retirement Plan Establishment
Planning for the future has never been easier
These are screens from a data entry application for opening a new retirement plan for which I was the sole designer. This was an entirely new application that was built to replace a manual process. This project took place in 2018.
Working with product owners, business analysts, and business stakeholders, we decided to organize the data collection into sections and subsections to create a wizard experience that limited the amount of information users would see or interact with at any one time. This helped prevent users from feeling cognitive overload.
Data entry flexibility with trusted error handling
We wanted to provide users flexibility to skip entering data until later, while also making sure they were well-informed about any required data they may have been missing. To achieve this, if a user attempted to move forward with incomplete data, they would receive a message informing them of the missing data and provide options to skip for now or to go back and fix their missing fields.
Here is an example of the inline error messaging we introduced for this project that appears when the user returns to the page to fix missing data. This directed the user to the specific fields that may have been skipped previously but were required to submit the plan.
If a user completed all required information in a section, they would see the indicator of that section animate into a green checkmark icon signifying the completeness of that section.
Conversely, if they skipped required information, they would see the section indicator become a slow pulsing yellow exclamation point icon which would remind users to go back and complete missing data or fix incorrect data.
In addition to the section indicators at the top of the screen, we also gave the user a visual representation of the number of subsections in each section.
This helped the user keep track of their progress through the wizard.
Card-based design to keep track of information sets
For instances where we might need to collect the same set of information for several people, we avoided having to repeat those fields by allowing the user to save the data for each person into a card and then be able to reuse the fields to collect the data for the next person.
We stacked these cards vertically which worked well as there was a maximum number of three individuals that could be collected for the plan.
Tablet-friendly selection UI for a flexible user experience
The services screen required us to display multiple lists of services that a financial professional might select to provide for their client.
In order to make it visually clear which sets of services were selected vs. not selected, we created a checkbox tile element that not only checked the box of the selected list but also changed the color of the tile to visually indicate that the tile’s services had been selected.
This gave the users a tangible sense of selecting service options á la carte from the total provided.
Clearly indicated progress to make plan review easy
Once the user completed all of the data entry in the wizard, they would review all of the entered data on a final summary screen.
This status flag would indicate the status of the plan.
This progress tracker would also help inform the user of the progress of the data entry on the plan. If any sections had missing data, the indicator above that section would be a yellow exclamation point icon instead of the green checkmark and the user could click on the icon to go to that section to make any edits.
Each section also has an edit button that would navigate users directly to that section in the wizard so they could update or change any data if need be.
At the bottom of the review screen, we had a paperwork section where users would either initiate the DocuSign process or download the paperwork packet to have the client sign. After wet signatures were obtained, the user would return to this section to upload the signed paperwork.
Completing the plan’s paperwork would submit the plan for review by the home office.
Below the paperwork section, the user would also have access to any available actions that could be taken on the plan depending on the status.