Employee registration form design
This project was the first deliverable in the design of a new internal management product for a Brazilian public bank.
The form's purpose is to modernize and automate the registration of the institution's employees. My goal was to design a user-friendly flow.
Context
The client required a new product for internal management use, to automate excessively manual work routines that were leading to problems due to outdated data and operational risk.
The product to be developed by the technical team was a platform to centralize information and thus facilitate the management of employees and contracts. It also made data consultation more accessible, improving its reliability and availability.
The first deliverable was a form for filling in employee data. The flow was supposed to help the user fill in the data quickly and answer questions along the way, reducing the likelihood of errors.
The biggest pain mapped out was the lack of standardization and centralization of data. So it was necessary to compile everything needed to start designing the new flow.
Process
Project - Create a form to register the bank's employees.
Problem - Using forms filled out on spreadsheets, the information on employees and contracts was decentralized and out of date. The main consequence was the difficulty of managing employment contract data.
Solution - Automate the process to make it more reliable and up-to-date. Create a form to register employees and centralize information on people and employment contracts for better management. Design a modern interface and build a user-friendly flow.
Phase 1 - Discovery
The initial process was to map out who the users of the product would be with the help of the client, as well as understanding their needs. From there, we highlighted what the product would need to have to solve the pains of the customers and users.
In conclusion, it was necessary to design a form with a practical flow, so it could be filled in quickly, that had a simple, conversational interface, to generate as few doubts as possible, preventing the user from abandoning the process.
Overview of the mapping of product users and their needs.
Phase 2 - Ideation
Research
Once the client's needs were understood, the next step was to start researching.
-
Benchmarking to learn about best practices in building forms;
-
Searching for visual references;
-
Researching usability studies focused on building forms.
Based on this research, we defined four points that had to be met in this MVP to meet the client's needs and create a good user experience. See below:
-
Responsive design
-
Breadcrumbs to help the user find themselves in the flow
-
The system needs to provide error feedback and mandatory fields
-
Complete information when possible
Presentation of the characteristics of user-friendly forms.
Wireframes
The client gave me a list of the fields they needed employees to fill in on the form.
I separated this information into five categories:
-
Personal data
-
Education (level of schooling)
-
Professional (contract details and place of work)
-
Health (blood type and emergency contact) - optional
-
Diversity (gender, sexuality, ethnicity) - optional
To help guide the user through the process, I used the “stepper” component in the UI Kit. The intention was to use it as a breadcrumb, showing how many steps the form has and indicating which of the steps it is in until the registration is completed.
Presentation of the “stepper” functionality which will help track the user in the flow
After the workflow had been approved by the client, I began to build a medium-fidelity prototype. Including the fields according to the given requirements.
Prototype of the first registration page
Phase 3 - Validation
Prototyping
The next step was high-fidelity prototyping. This stage allowed all the previous requirements to be included in the user story, including feedback on errors and mandatory fields as well as automatic completion.
It was necessary to build a navigational prototype, including the menu with the titles of the pages that would be developed in future sprints.
First version of the menu
Testing
To solve some questions about the flow, I suggested testing with users.
The problem was that there wasn't much time, but the client nominated three employees to take part in the test, which was done remotely. The volunteers received a link to the prototype and had to navigate the form as if they were going to fill it in while answering a few questions. The screen was recorded as they navigated through the screens.
The users' comments included:
-
Inconsistency of titles in the menu - two users questioned why “Terceirizado” and “Colaboradores” were chosen, generating doubts.
-
Lack of a “go back” button - all users missed the option to go back, one of them said it made him feel insecure not being able to check the previous stage of the flow.
-
Although exhausting, the flow was well signalized - users understand that the flow is long, but they praised the fact that there was clear feedback showing which stage they were on, which one had already been completed, and how many there were left to signal.
I presented the client with the results of the tests carried out and what improvements needed to be made. Some adjustments were required:
-
Change the term colaboradores” to “terceirizado” in the menu;
-
Include a “back” button in steps 2 to 5 of the registration flow to allow the user to return to the previous screen;
-
Build a summary screen at the end of the registration flow, where the user has access to all the information filled in to check their data. At the end there will be two CTAs: a primary button to confirm and send the data and a secondary “edit registration” button, which takes the user back to the start of the flow and allows them to edit any information.
Conclusion
After the changes, based on the feedback received in the testing stage, the project moved on to the development phase.
Comparison between the first and last versions of one of the prototype pages
In general, the interface has been adapted and usability improved with the development of the new platform, which will solve the problem of standardization and the lack of centralized data, making management more efficient.
In the future, there is a need to test the data summary and confirmation stage, as well as focus on improving the accessibility of the interface.
Before and After
Check out what the interface looked like before and what it looks like after the design project described.
The bank interface before
Interface delivered with improved usability and modern features