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.
In this case study
Scope and constraints
Approvals for ChartHop was a much anticipated feature that keeping us from appealing to a larger user base. With this in mind, our strategy involved releasing the feature in iterations over a 6-month timeframe.
To accomplish this, I focused on creating foundational designs that could be easily expanded to accommodate future Approvals functionality, while ensuring the initial MVP was streamlined enough for our engineering team to develop within a few months.
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:
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.
MVP
Through a process of rapid ideation and gathering feedback from the PM and Engineering teams, I designed the MVP and completed the handoff process.
My main focus was on finalizing the new components to be integrated into the existing Scenarios tool, providing clear visuals on the approval progress for both the requester and approver.
For the admin, I intentionally created a basic design that supported setting a single approver.
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.
Workflow builder wireframes
After numerous rounds of ideation, we arrived at a promising direction for the overall structure of the approval chain. To showcase the proposed structure, I developed a prototype for internal stakeholders and subject matter experts (SMEs) to review. The design allowed for an unlimited number of approval stages with an unlimited number of approvers. Approver types were categorized into two groups:
1. Specific individuals or individuals based on their relationship to the approval requester, and 2. Conditional approvers determined by an admin-configured query
While I recognized that the design was not ready for handoff, I intentionally paused the process to gather crucial feedback.
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
Final iteration
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.
Final prototype
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)
