ChartHop Configurable Approvals
Fully customizable approval workflows for org planning
When
MVP: Nov 22- Jan 23
Final designs: Jan 23- April 23
Responsibilities
UX design, Visual design, Task flows, Usability testing
Collaborators
Product Manager, Engineers, Design Systems Manager
Tailor automations, streamline approvals
ChartHop's main product offering was an org chart that allowed employees to view their company structure and for admins to visualize org changes and the costs associated. Admins employed the Scenarios tool to make drafts of those changes before publishing them to the org at large.
Our aim was to release a feature that required Scenarios to go through an approval process before being published to help with the productivity bottleneck that admins were facing.
My contribution
I was responsible for designing the end-to-end Approvals feature, including the workflow builder and the end user experience.
About Charthop and Scenarios
ChartHop is a product that consolidates people operations data from various sources. One of its features is a visual org chart that enables employees to view their departments and teams, and allows admins to assess headcount and budget plans.
Unfortunately, there was a significant issue with the Scenarios tool: changes made within it would be published organization-wide without any safeguard.
Consequently, only admins had the ability to create headcount plans and projections.
Opportunity
During my meeting with the lead Product Manager, we discussed the problem and opportunity at hand:
How can we enable admins to establish a process that allows the majority of organizational members to propose changes using the Scenarios tool?
User insights
Since I wasn't able to talk to our user base, I interviewed internal SME's and stakeholders to gain more insight into our user needs and potential paint points. I identified 3 main users that would be a part of this process:
Approval requester needs
- Ability to explain why the change is needed
- Understanding of rejections & approvals
- Approval deadlines
- Progress updates
Approver needs
- Context for the proposed change
- Ability to explain the reason for rejection
- Ability to ask questions
- Knowledge of all stakeholders
Admin needs
- Key stakeholders are notified and aligned
- Uninterrupted flow if approver is unavailable
- Ability to check on approval status
- Customize the approval process based on org
Approval requester needs
- Ability to explain why the change is needed
- Understanding of rejections & approvals
- Approval deadlines
- Progress updates
Approver needs
- Context for the proposed change
- Ability to explain the reason for rejection
- Ability to ask questions
- Knowledge of all stakeholders
Admin needs
- Key stakeholders are notified and aligned
- Uninterrupted flow if approver is unavailable
- Ability to check on approval status
- Customize the approval process based on org
Prioritization
Next, I created a high-level task flow, considering each user type as a touchpoint. We used this to map out and prioritize the iterations of the feature.
Defining
To establish a strong foundation for the MVP, I mapped the current states of Scenarios and integrated the new approval states. Throughout the process, I sought feedback from the engineering team to ensure a smooth integration of the new states with the existing ones, allowing users to adapt easily.
After finalizing the states, I developed a comprehensive task flow showcasing the concurrent experiences of the three user types as they progressed through each Scenario state. This flow served as a valuable tool for providing context to stakeholders.
To ensure thorough design coverage and documentation, I assigned numbers from each task node to corresponding design screens, allowing me to address all edge cases effectively.
Click the task flow above to enlarge
Competitive research
I looked at various sources familiar to our user types, such as Greenhouse and Airbase, to study their approaches to dynamic approval workflows.
To ensure ease of implementation, I reviewed examples from companies that utilized the
React Flow library, which our engineering team would be using.
Workflow builder ideation
During the MVP development, I focused on enhancing the admin experience for setting up approval workflows. I explored different representations of the approval workflow display and finding effective visual organization methods for configuring each stage within the workflow builder.
Feedback
Users appreciated how familiar the visual elements were to other products they were used to, including existing ChartHop features. They also liked the ability for full customization.
However, users were confused with the differentiation between the 2 types of approvers and the accompanying copy. Concerns were also raised about the potential of users abandoning the query builder since it seemed like it needed time investment.
This feedback highlighted a critical user need:
The workflow builder needed to be approachable so that users at all levels would not find it overwhelming
Updates to the Side Panel
Instead of dividing the approver types, I decided to present each approver as a single entity. From there, the user could specify the user type.
Updates to the Query builder
To improve the query builder, I refined the copy and switched the order of operations: Now users would assign variables to selected approvers, referencing them from a pool of tags. Any variables that were unassigned would be assigned to the fallback approver.
Updates to the visual workflow
Lastly, I worked with our design systems manager to clean up the visual design of the visual workflow and ensure that it was aligned with components across the product. I also took this time to adjust the widths of all the nodes to be consistent.
Outcomes
Following the MVP release and over the course of 6 months, ChartHop successfully onboarded numerous new customers who had been awaiting an approval process to purchase the product for their organizations. Additionally, existing customers upgraded their accounts to leverage the configurable workflow builder.
Although the project transitioned to a different team upon the final iteration's completion, the design would serve as a blueprint for creating approval workflows across other ChartHop features. There are also plans to extend its application to non-approval task automations in the future.
.png)
.png)
.png)
