A case study about how I introduced save as draft functionality into a multi-invite form process.
Project background
While working in the enrolment lab at Canada Life, I was working on an enhancement to allow multiple employees to be invited to enroll for their benefits. An admin being able to save their work naturally became the next priority. By thinking about the different ways that someone could leave and return to our application, I was able to create a solution that would allow HR admins to seamlessly return to and send out abandoned invites without suffering the consequences of losing data that was entered if they leave.
Skills used
UX consultation
Usability research
Wire-framing
UI design
AODA requirement research
Tools used
Sketch
Zeplin
Microsoft Teams
Process
To begin this dashboard/invite enhancement, I had to discover the business requirements, as well as the back-end limitations. One of the key business requirements was that an invite that was started must be completed and sent out by the end of the day (11:59pm EST). The date the invite is completed indicates the correct policies to pull information from, so if the administrator returned to complete after the day they started the invite; it could create errors on their invite. With this in mind, I first started by looking at the single invite flow. I wanted to understand the different reasons that someone may want to leave the application, or that the application may throw errors that force the invite into draft status.
I conducted interviews with internal administrators who also use the manual invite process to understand their current pain points. I discovered that there are 4 main reasons an admin may need to save as a draft:
1. Information that is asked in the enrolment invite is not readily available to the HR administrator that is completing the form.
2. Something came up (like a meeting) and the HR administrator needs to return to complete the invite later. 3. An HR administrator accidentally (or intentionally) navigates away from the invite that they are currently completing. 4. A system error occurs where the HR administrator is interrupted and needs to return later to complete and send the invite.
Where can people save as a draft?
From understanding the reasons that our users may have to leave, I started to look next into the places where these experiences could happen.
There were ultimately 3 places in which someone could leave the enrolment invite form:
1. While creating an employee's invite to enroll for benefits
At any point, while an invite has been created but not completed, it can be abandoned.
2. On the 'what would you like to do next?' page
After creating an invite, the administrator is prompted with the question, "What would you like to do next?" They are given the option to add another employee or proceed to review and send the created invites. The admin could leave from this page, never preceding to the review page to send the invite(s).
3. On the review page
On the page that invites are sent, an admin could choose to abandon.
Finish later button
To ensure that introducing a new button would not interfere with other button locations, or change the priority of their actions, I performed a small button audit on the invite process. After making sure that the button location and priority level was not going to break the experience, I placed it in the bottom right-hand corner of the form. This was a new button style that was less prominent than our secondary buttons, but more prominent than our ghost buttons (which don't have outlines).
This button will only appear after the user has completed the first part of the form and clicked on continue. This shows a level of commitment to us and prevents us from having to save invites with mostly incomplete data.
In the event that the user does not complete the first or last name, their invite will not be saved as a draft, as it would cause us to show an empty invite, or someone's information without knowing who they are.
Button language
Due to the restrictions on invites being sent the same day, it was decided to use the language, 'finish later'.
Both 'Save for later' and 'save as draft' were contenders, but they implied that the user may have a longer period of time to finish than they actually do. Using 'finish later' felt more immediate that the user would need to take action later.
Confirmation Modals
Anywhere that a user can save as a draft, or can navigate away from the page they should be prompted with a confirmation modal. 2 confirmation modals were created, 1 modal that is triggered during the single invite flow that uses singular language, and another for the multiple invite flow that uses plural language. The confirmation modal shows dynamically based on the situation.
The purpose of the modal is to provide the admin with a heads up that they must come back tonight to finish and to encourage them to finish now if they can.
Recovering saved invites
When the user returns to the admin dashboard on the same day, any incomplete or complete invites that are not sent will be saved for them to finish.
If the user fails to return before midnight, unfortunately, their invite(s) will be lost. To make it easy for users to pick up where they left off, they will return to a familiar-looking page with a summary of their progress, and dynamic instructions on how to proceed.
The user would proceed to send their invites as normal. To do this, they would proceed to the review page when they are satisfied with the number of invites that they have created. On the review page, they must review the information that they have provided about their employees, and send out their invites. Check a high-level view of the process below by clicking into the gallery.
In the event that they need to leave again, they are allowed to do so - as long as they return by midnight (like Cinderella's glass slipper).
Testing the new functionality
To capture feedback about the site's usability, we had 10 of our internal administrators go through the experience in our testing environment using fake personal information, and asked them to perform the following.
Testing usability
1. Please enter the information that we have provided you for 2 or more of the invites
2. Pretend that you were suddenly interrupted by a phone call.
What would you expect to happen to these invites if the experience timed out while you were on your call?
What would you do if you wanted to come back to this information after your phone call?
3. Please try and save the invites you created.
Is that where you expected to find the save button? Why?
Does the suggested language make sense to you? Why?
4. Please try and find where your invites were saved to.
On a scale of 1 - 10, 1 being easy, and 10 being difficult. Please rate how you found this process
How long do you expect your invites to be available to go back to?
On a scale of 1 - 10, 1 being unhelpful, and 10 being helpful. Please rate the saved invite copy on the dashboard.
If you were to click on your saved invites, what would you expect to happen next?
5. Please click on your saved invite(s)
Where would you click if you wanted to finish an invite?
Where would you click if you wanted to check over the information you previously entered?
What would you expect to happen if you left this page?
Findings
We found that our assumptions were fairly in line with our user's behaviour.
90% of users found the process to be easy, with 20% rating it somewhat easy.
80% of users found the copy to be helpful, with 20% rating it somewhat helpful.
We received a few suggestions that it would be nice if the admin could come back the next day to complete the invite. Unfortunately, due to business rules isn't possible at this time.
We also received feedback that it would be helpful to be notified via email to be reminded to come back before midnight so the admin doesn't lose the invite data. Just in case they don't come back to the dashboard after a quick.
Implementing our findings
We took our user's suggestion and tried it out. We created an email to be sent out to administrators so that they would be reminded to come back and finish the invites. Understanding that most admins work 9am - 5pm, but that they work across many timezones I suggested that the best approach would be to send 1 email reminder an hour after the admin has left, and 1 more at 4pm in their corresponding time zone to ensure they had an adequate amount of time to come back and complete the invite process. I created 2 versions of the email:
For when an invite was abandoned or intentionally saved as a draft
For when multiple invites were abandoned or intentionally saved as a drafts
Below are the wireframes that I created.
Singular invite draft email
Multiple invite drafts email
Final product
Results
100% of plan admins were provided with the ability to save their invites to finish later.
We have seen 89% of clients use the save and finish later functionality.
On average 1 in every 6 invites manually sent out is saved to complete at a later time.
Feedback from admins that they were pleased with the new feature.
What I would do next
If given the opportunity I would have liked to do some usability testing after development with external plan admins who are less familiar with the environment. I think that it would bring value to us to better understand whether this functionality works for admins outside of our internal admins.
I would have loved to test the content to understand if there were better words to describe the action of finishing later. I would have done this by explaining the functionality of the button and asking admins to name the button for themselves. Collecting that data might be helpful to improve the understanding and expectations of what the button would do without the need for a modal. I also would have enjoyed working with our developers to clean up the UI.
Our UI is supposed to be consistent with our design system. Unfortunately, our final product didn't look exactly like my high fidelity wireframes due to time constraints and developers not being able to deliver the proposed design. I think more time for developers to be able to explore how to clean it up with some additional assistance during the visual quality assurance check would have helped to better align designs to our design system.
Comments