MRR Movement View Customization
Period
2023.06 - 2023.08
Team
ChartMogul
Tools
Figma, Notion, Slack
Project Overview
Develop the customized view of charts to provide precise insights
ChartMogul MRR Movements chart plays a pivotal role in providing users with insights into changes within their subscription’s Monthly Recurring Revenue (MRR). In our continuous effort to empower users with deeper insights, we’ve enriched the MRR Movements chart by introducing the capability to isolate specific MRR Movement types. This enhancement empowers users with the flexibility to customize their view, enabling them to extract the precise insights they seek from the MRR Movements data.
As the product designer spearheading this project, I was intimately involved in end-to-end process. My responsibilities encompassed gathering valuable customer feedback, conceptualizing and proposing design solutions, meticulously managing the release schedule in collaboration with our engineering and marketing teams, and providing comprehensive explanations of the new feature to ensure a clear understanding across all team members.
Context
ChartMogul's MRR Movements chart offers a comprehensive visual representation of the evolving MRR trend throughout a specified timeframe.
At the heart of ChartMogul's functionality lies the ability to analyze shifts in Monthly Recurring Revenue (MRR). MRR Movements provides a visual representation of how your MRR has developed over time. MRR Movements for each period are stacked vertically and color-coded (blue and pink) to show where you’re gaining and losing MRR based on movement type.
Each vertically-stacked band represents a specific MRR movement type. New Business, Expansion, and Reactivation are blue. Contraction and Churn are pink. Blue represents MRR growth and appears above $0. Pink represents the loss of MRR and appears below $0. MRR grew in a period when the combined height of the blue bands is greater than the pink.
Problem statement
We aimed to elevate the functionality of the MRR Movement chart, recognizing it as one of our pivotal chart features.
We had a goal to improve the method of gaining insights into MRR Movements, which track changes in subscription MRR. To accomplish this, providing users with a clear and intuitive visual representation of the chart is of paramount importance.
However, the current MRR Movements chart follows a stacked visualization approach, making it challenging to grasp the movement trends quickly. For instance, when users want to isolate and examine the movements related to new business, the presence of other movements stacked together can be distracting and hinder a clear understanding.
How might we encourage users to get more useful insights into MRR Movements chart?
Goals
Allowing users to personalize and customize their view of MRR movements.
Facilitating users in extracting meaningful insights with simplicity and ease.
Empowering users to harness the full potential of our MRR Movements chart, thereby enabling them to make more informed decisions and drive their businesses forward.
NDA
NDA
User interview
Users expressed it is challenging to oversee the movements they’d like to focus on considering the current UI.
For deeper understanding about the function, I’ve conducted user interview with internal team members who are actively using MRR Movements chart for sales and marketing. They expressed it will be more helpful to be able to view specific MRR movement without getting influenced by other types of movement, to focus on what they’re trying to get insight of.
Ideate
I’ve come up with a few UI design options and how to display the isolated MRR movements.
Eye icon switch
Toggle button
Dropdown on the chart
Populating from the bottom of chart
This approach makes it easier to analyze the chart trend as it provides clear differentiation in heights for each isolated movement.
Populating from the middle
With this option, the movement bars remain static regardless of which movements the users turn on. This provides a consistent visual representation of the movements without moving effects, allowing users to focus on comparing the data without distractions.
As is
To be
Design Strategy
Enable users to customize MRR movement types by toggling the eye icon on/off.
After careful consideration, we have chosen a design approach that incorporates an eye-icon for toggling MRR movement types on and off. This decision was made to ensure that users can easily customize the chart and isolate specific MRR movement types. The intuitive design of this approach simplifies the process of chart customization, making it readily accessible to our users.
Implementation
As we progress through the development process, we have been deliberating on how to implement the new feature to cater to various use cases.
Case when all switches are off
While initially contemplating whether at least one MRR movement should be displayed, we decided to grant users the flexibility to turn off all movement types. This approach aligns with the anticipated user behavior and offers maximum customization.
Distinguish MRR movement types
Distinguishing between New Biz and Reactivation movements, which shared the same color, posed a challenge. Although we initially considered visual separation by adding a borderline, we recognized that this could affect the overall consistency of charts across the app, potentially leading to a suboptimal user experience. Ultimately, we decided to prioritize the common user scenarios over this relatively rare use case.
Allow to save the customized chart
For better accessibility and customization of charts, we implemented the ability to save MRR Movements chart with the customized view & filters. Users can easily find their customized chart with only one simple setup.
Deliver
After establishing the essential functions and conducting a thorough QA review, we have successfully launched this feature.
Results__User feedback
After releasing this feature, we received positive comments on social media. Additionally, one of our users was inspired by this feature and developed a Google Sheets plugin based on it.
Results__Statistics
We witnessed a 150% increase in the number of saved charts, and a 35% surge in the number of active users compared to the previous figures.
2 months before releasing
Last 2 months
Last 2 months
2 months before releasing
Takeaway
Experience of project management
I’ve been involved in the project actively managing the process - I described problem statement based on the previous discussion among team members a while ago, and discovered the right design solutions, and managed release schedule to make sure to deliver the updates on time.
End-to-end design process
I learned how to present the overall feature, functionality and purposes. It provided some ideas to internal team members to market the new product updates properly.
Growing background knowledge of the product
As I lacked knowledge of the product and the business goal at the beginning, it took a while to understand the meaning of project and come up with the solutions. As I proceeded the project, I got to know how it could impact user’s behavior and experience in the app. I believe I could more proactively suggest the solutions based on better understanding of the product.