BoardEffect - Document Approval Workflow
Before I joined the company Diligent, it bought another company BoardEffect and it became a growth brand. I'm working as the only UI/UX designer for this product, collaborating with product owner, product managers and software engineers.
BoardEffect is a Board Portal software, which means it's a type of secure, paperless software or app that allows the users to communicate with other board members, share documents, annotate meeting minutes and more without any of the risks or waste that a paper board book provides.
Feature Background
Prior to a board meeting, aministrator will use BoardEffect to put together the meeting book. however over the past few months we received feedbacks from large volume of users they don't find BoardEffect's book building process that collaborative and easy to use. I then took a look at into the specific comments by users and started working on this feature from Admin's perspective as a start.
Finding the Problem/Pain Points
We want to make it easier for aministrators/co-sec to build meeting books with BoardEffect. The underlying problem is that after Admins uploaded documents into a meeting book, they'll have to contact specific board members individually bak and forth to make sure the meeting materials are final and ready for the whole boards to review. This is problematic because of inefficient time usage, and also there's possible security issues related.
The goal of this project is to come up with a solution to create a simple and streamlined way within BE platform for the Admin/co-sec to be able to collaborate more with other board members when collecting the materials for the book.
The Persona
Carl
Committee Administrator
About Carl
Carl is an office assistant with the Minneapolis Community Foundation, and also serve as a committee workroom Administrator for his Board of Directors. He has been with the MCF for about 8 months and have just begun to feel like a part of the team. His position with MCF is his 2nd job out of college.
Carl is 26 and comfortable with technology.
The BoardEffect system has been in use at MCF for several years now. As a committee Administrator, Carl's role is Mostly about upkeep. He needs to make sure the files and documents are up-to-date and relevant.
Behavioral Considerations
- Frequently needing to reach out to their board directors with questions about meeting materials.
- Very careful about when the meeting materials are ready for all directors to view and when are not.
- Efficiency is the key.
Frustrations
- Certain aspects of BoardEffect have proven incredibly useful — the functions within Meeting Book Building are very powerful, although difficult to locate specific one as they are everywhere.
- It’s been difficult and frustrating to get others' feedback while preparing the meeting book. He uses a separate communication tool with the other board members to gather their comment on the draft.
Goal
- Collaborate with selected board directors in regards of preparation of meeting book content conveniently, without leaving the app.
- Get notification when the status of the document changed/when board directors responded
- Easy to use, not to bury the function behind dozens of clicks.
Solving the Problem
With the findings and assumptions I have in mind, I decided on the following feature statement: Admins should be able to call out board members within meeting book building process and track the status of response.
This will be achieved through these functions:
- Admins will be given an easy way to collaborate with other board members on any documents they uploaded into meeting book.
- Admins will get notifications when someone replies.
- There should be a way for Admins to track the responses and respondents.
- Keep the documents that haven't been approved highlighted and Admins can easily notice and to track the response..
The process contains notifying selected board directors to approve the documents before making the meeting book public to all board members of the workroom, and tracking the status as well. Meanwhile, the Admin/Co-sec should be able to track the status of the approval conveniently.
User Flow
I mapped out the user flow as the start. From the initial user feedback, there are two use cases for the approval process. When Administrator reach out to board directors to ask for approval feedback, the directors may submit their response individually, or respond in sequence - meaning the directors would only be able to review the meeting document after the previous director approved it.
Also since sometimes have hundreds of people in a board, Administrators may spend a long and tedious time just looking for specific directors over and over. I was thinking maybe we can provide an option to save the selected approvers as a template that can be reused to save Administrator's time.
After the approval process is set, the Administrators can always go back to view and edit the process, and track the status from the overview window.
Example Explorations
Sketching some wireframes to start, I had some initial ideas.
Sketch Wireframe
Based on the user flow, I quickly sketched the wireframes on paper. Did some paper prototyping testings and got feedback on them.
In the process of sketching, there're several ways of the element placement and layouts.
I'll focus on the options on the "Select Approvers" part particular here as this is where I got most feedback on.
One idea is we by default let users to choose from template, and from there users are able switch to the option to add approvers manually.
Or both options are presented, it's just by default the template one has been set for users. If they don't have templates to choose from or they prefer to add approvers manually becuase there aren't many, they can toggle between these options.
Draft Option 1
Select the "Add Approval Workflow" from Dropdown menu of the document
The pop up window has the first dropdown option default set to "Select from Template"
Admin can select the template from the second dropdown menu
Admin can also change to select to add approvers with order
Or adding approvers with no order
Admin can click into the document approval detail to view the approval progress, edit the details, or email approvers
Draft Option 2
The document that has approval workflow added will display the status on the side
The "Select from template" and "Select Approvers manually" are appear on the same screen, so users can choose from these two options
And at the same time, users are also able to toggle between "Set as Ordered Approvers" and "Set as Independent Approvers"
A short video demos how users can toggle between Independent Approvers and Ordered Approvers
Draft Option 3
The 3 options of "Selecting from template", "Select ordered approvers" and "select independent approvers" are all presented at front, users choose one to prodceed
If the Independent Approvers approach is selected, the user would just type in search box and select approvers from the dropdown list
The next step is to message the selected approvers that they should review the document. The step is optional
This screen shows the Ordered Approvers approach. The selected approvers will be displayed in order. Users can also drag approvers box to change the order
The added approval workflow will display a brief overview on the side of the document. Admin/Co-sec can hover over to view the current flow of the approval
Or click to bring up the popup window for a detailed overview. Admin/Co-sec can also edit or email the approvers from this view
Internal Usability Testing - Validation & Iteration
Because it's a B2B product, i don't really have direct access to get some feedback from real users. However I managed to schedule rounds of usability testing with customer success team since they know our users quite well.
It was several back and forth discussions and modifications during the long process.
The feedback I received include:
- Admin/Co-secs are often multitasking but meanwhile need to track the progress of the current tasks. Having them jump back and forth will get them lost.
- The more linear and simple the process is, the better.
- For Admin/Co-secs, the most important thing is whether or not the document is final approved. They don't really need to know who the next approver is.
- Often times Board Admin has already set up user category under workroom, it would be ideal for them to save some time if they can import user category instead selecting approvers one by one.
- Having Comment on approval status overview window is beneficial for users to communicate on the topic of this document.
- Admin/Co-secs should have an overview of approval workflows for the whole meeting book on top as well. For example, admin knows there are 2 pending approvals in this meeting book without scrolling down to count the amount of approvals themselves.
- The language "independent approver" is confusing especially for newly onboard users. Instead "Ordered" and "Unordered" are much more clear.
And some general design guidelines for this feature
- Destructive action should have warnings. For example, if user wants to delete a previously added user it should bring up an alert to avoid accidental deletion.
- Make sure the way the process works is very intuitive to the user so there's no extra learning required.
- Utilize familiar/consistent performance, behaviors and interface.
The Final Design
Below is the MVP of the feature, where Admin/Co-sec will just set up the approval workflow, waiting for the response or send out reminder messages.
The feature released at the end of Q2 2018. Based on the feedback and data the customer success team and marketing team collected, the users found this feature extremly helpful and would like the feature comes with more functions like Admin/Co-Secs can force the approval if they get enough feedback to finalize the document - which was implemented later in Nov 2018.
Reflection
I created the prototype using Principle and traditional PDF page by page walkthroughs. Principle prototype is for developers to get an overall idea of screen transition and helped to devlier the rich content in a short video in a few minutes. While the traditional PDF walkthrough is more for the advocates(customer success representative) to help prep training for the new feature. Either way is efficient to communicate and I managed to show the wireframes, the prototypes to test with two teams of users to get feedback.
I noted down some takeaways from my project diary:
- 1. For security consideration we don't have a company account in inVision yet(Edit in 2019: we do have inVision access now!). It will be less time consuming if we can reach out to users with link to the interactive prototypes. Although we do tested with PDF and Pinciple Video, I feel like there's a gap of the feedback from users about discoverability and accessibility.
- 2. The persona we used to use is created by a 3rd party agency few years ago, I did use the original one as reference, and create a new one that I used in this project after talking to quite a few customer success representatives(in boardeffect, they've been collaborating with clients for a really long time) and interviewed some clients. As the market is growing and clients base increasing I see there's a need to update the personas not only for future reference but also help the team members to understand and feel more from users' perspective.
- 3. I have a wonderful team supporting me!