Increased value and revenue for Miro's most used feature — Diagramming.
Increased value and revenue for Miro's most used feature — Diagramming.
Key contributions
Growth Design
Product Strategy
User research
Cross-functional Leadership
Workshop Facilitation
Growth team
Senior Product Designer (1)
Lead Product Manager (1)
Sr. Software Engineer (4)
Senior Growth Analyst (1)
Timeline
3 weeks
Year
2023
Outcome
Discoverability of use case increased by 9x times.
Discoverability of use case increased by 9x times.
By smartly leveraging unused real estate in the product, we enhanced the discoverability of paid and advanced packs for the smart diagramming use case. As a result, users now experience value more quickly in the journey, easily locating and accessing the advanced features, ultimately driving higher engagement.
By smartly leveraging unused real estate in the product, we enhanced the discoverability of paid and advanced packs for the smart diagramming use case. As a result, users now experience value more quickly in the journey, easily locating and accessing the advanced features, ultimately driving higher engagement.
+76%
Increase in teams feature adoption and teams adding flowchart shapes
+43%
Increase in conversion and nARR for Business plan
+873%
Significant increase in discoverability of use case
Context
Smart diagraming is a high willingness-to-pay use case.
Smart diagraming is a high willingness-to-pay use case.
Diagramming functionality is of strategic importance for Miro, as it is one of the most popular use-cases, which is why this is considered a strategic and high willingness-to-pay use case and demonstrates product stickiness.
Diagramming functionality is of strategic importance for Miro, as it is one of the most popular use-cases, which is why this is considered a strategic and high willingness-to-pay use case and demonstrates product stickiness.
Solution
Organic and better discovery of advanced shape packs.
Organic and better discovery of advanced shape packs.
By implementing solutions such as integrating advanced shapes more prominently, providing visual context with motion and animation, and prioritizing popular packs like AWS, we achieved a significant result. This approach not only increased conversion rates but also elevated the perceived value of our offerings, resulting in better discoverability and a more rewarding user experience.
By implementing solutions such as integrating advanced shapes more prominently, providing visual context with motion and animation, and prioritizing popular packs like AWS, we achieved a significant result. This approach not only increased conversion rates but also elevated the perceived value of our offerings, resulting in better discoverability and a more rewarding user experience.
Problem
Users were not aware of the full range of what Miro has to offer.
Users were not aware of the full range of what Miro has to offer.
As competition rises, Miro needs to stay ahead with competitors be the tool of choice for diagramming and flowcharting. New paid features such as diagramming were hardly discoverable for new users and users were not aware of the full potential of their plan and the value Miro has to offer regarding this use case.
As competition rises, Miro needs to stay ahead with competitors be the tool of choice for diagramming and flowcharting. New paid features such as diagramming were hardly discoverable for new users and users were not aware of the full potential of their plan and the value Miro has to offer regarding this use case.
Opportunity
How might we improve time-to-value for paid features?
How might we improve time-to-value for paid features?
We saw an opportunity to improve and communicate there is so much more they can explore and choose from and that Miro has a lot to offer by addressing the challenges of hidden functionalities.
We saw an opportunity to improve and communicate there is so much more they can explore and choose from and that Miro has a lot to offer by addressing the challenges of hidden functionalities.
Goal 1 👀
Increase discoverability of paid shapepacks and drive adoption.
Goal 2 💸
Increase both free-to-paid CR and ARR.
Timeline & Process
The design process
🔎 Investigate: I always start by assess the current experience from a 'Psych framework' perspective. We look into quantitative and qualitative data to identify pain points, allowing us to prioritize the most impactful problem to tackle first.
🧠 Design & Iterate: With a clear problem in focus, I facilitated a team workshop to brainstorm solutions and suggest ideas. These ideas were refined through multiple iterations, ensuring we landed on an optimal design before finalizing the UI.
📏 Measure & Adapt: We launched A/B tests and continuous research initiatives to gauge the design’s effectiveness. Data and user insights then guided our next steps.
⚖️ Balance Constraints & Cross-functional Teams: This cross-functional project required balancing growth initiatives with core product priorities, coordinating dependencies across teams, and introducing changes carefully to avoid disrupting user mental models.
🔎 Investigate: I always start by assess the current experience from a 'Psych framework' perspective. We look into quantitative and qualitative data to identify pain points, allowing us to prioritize the most impactful problem to tackle first.
🧠 Design & Iterate: With a clear problem in focus, I facilitated a team workshop to brainstorm solutions and suggest ideas. These ideas were refined through multiple iterations, ensuring we landed on an optimal design before finalizing the UI.
📏 Measure & Adapt: We launched A/B tests and continuous research initiatives to gauge the design’s effectiveness. Data and user insights then guided our next steps.
⚖️ Balance Constraints & Cross-functional Teams: This cross-functional project required balancing growth initiatives with core product priorities, coordinating dependencies across teams, and introducing changes carefully to avoid disrupting user mental models.
Approach & Strategy
Value first,
Monetise second.
Value first,
Monetise second.
We recognized that before monetization, users must first grasp the product's value—experiencing that crucial "aha" moment. To achieve this, we focused on delivering immediate value by optimizing the flow to showcase relevant content at first glance. This involved presenting a small set of previews and advanced shapes, allowing users to browse shapepacks organically while communicating the vast range of options available, encouraging deeper exploration.
We recognized that before monetization, users must first grasp the product's value—experiencing that crucial "aha" moment. To achieve this, we focused on delivering immediate value by optimizing the flow to showcase relevant content at first glance. This involved presenting a small set of previews and advanced shapes, allowing users to browse shapepacks organically while communicating the vast range of options available, encouraging deeper exploration.
Focus 1
Drive discoverability and awareness 🔍
Improve discoverability of packs
Focus 2
Increase CR Free-to-paid 💸
Improve upgrade touchpoints & reduce friction
Focus 3
Increase adoption + perceived value ✨
Create visual clarity and cues through user delight
Research & Key Insights
Users were unaware of paid features Miro had to offer.
Users were unaware of paid features Miro had to offer.
Together with the PM, I set up a discovery research and user interviews to uncover painpoints. We quickly observed the following problems;
Lack of discoverability: New paid features such as diagramming were hardly discoverable and were hidden behind many steps.
Banner Blindness: Users have learned to ignore content that resembles ads, and often completely missed the nudges towards the paid packs.
Lack of perceived value: Users were not aware of the full potential of their plan and the value Miro has to offer regarding this use case.
Together with the PM, I set up a discovery research and user interviews to uncover painpoints. We quickly observed the following problems;
Lack of discoverability: New paid features such as diagramming were hardly discoverable and were hidden behind many steps.
Banner Blindness: Users have learned to ignore content that resembles ads, and often completely missed the nudges towards the paid packs.
Lack of perceived value: Users were not aware of the full potential of their plan and the value Miro has to offer regarding this use case.
Painpoints & UX audit
Advanced features were too hidden in the workflow.
Advanced features were too hidden in the workflow.
Next to interviews I mapped out the current experience and found advanced shapes and smart diagramming functionalities buried in the workflow.
❌ Users had to resort to manually typing in the search bar, like "AWS", to access paid shape packs.
❌ Visuals lacked context and failed to provide clarity.
❌ Paywall surfaced late in the process, rendering it practically undiscoverable.
❌ Relying solely on pop-up paywalls posed the risk of banner blindness, potentially causing users to overlook the value of paid packs.
Next to interviews I mapped out the current experience and found advanced shapes and smart diagramming functionalities buried in the workflow.
❌ Users had to resort to manually typing in the search bar, like "AWS", to access paid shape packs.
❌ Visuals lacked context and failed to provide clarity.
❌ Paywall surfaced late in the process, rendering it practically undiscoverable.
❌ Relying solely on pop-up paywalls posed the risk of banner blindness, potentially causing users to overlook the value of paid packs.
Hypothesis
These issues highlighted the need for a more intuitive and contextual integration.
This highlighted the need for a more intuitive and contextual integration.
After our focus and problem statement was clear we devised the following hypothesis;
After our focus and problem statement was clear we devised the following hypothesis;
"We believe that by increasing visibility of the advanced shape packs and surface this feature earlier, we will drive discoverability and awareness and see an increase in smart diagramming retention and ARR for this use case."
"We believe that by increasing visibility of the advanced shape packs and surface this feature earlier, we will drive discoverability and awareness and see an increase in smart diagramming retention and ARR for this use case."
Ideation
Leveraging growth principles to maximize “aha” moment
Leveraging growth principles to maximize “aha” moment
Together with the team we run a workshop where we focused on HMWs, ideas, design principles, effort sizing and prioritisation of the roadmap. It’s good to do a session like this with the whole team, including engineers so everyone is on the same page so we can get a grip on feasibility early and things get done within proposed timelines.
Together with the team we run a workshop where we focused on HMWs, ideas, design principles, effort sizing and prioritisation of the roadmap. It’s good to do a session like this with the whole team, including engineers so everyone is on the same page so we can get a grip on feasibility early and things get done within proposed timelines.
Solution 1: Drive discoverability & Awareness 🔍
Shape pack integration for easy discovery
Shape pack integration for easy discovery
Implemented several key enhancements and iterations to improve the overall user experience.
Paid shape packs are now smartly integrated and visible by default, allowing for organic discovery.
To reduce cognitive load, we show only a maximum of previews at any given time.
Added a clickable copy indicating that users can browse and view all shapes if desired. This eliminates the need for manual searches, streamlining the design process significantly.
Implemented several key enhancements and iterations to improve the overall user experience.
Paid shape packs are now smartly integrated and visible by default, allowing for organic discovery.
To reduce cognitive load, we show only a maximum of previews at any given time.
Added a clickable copy indicating that users can browse and view all shapes if desired. This eliminates the need for manual searches, streamlining the design process significantly.
Solution 2: Drive discoverability & Awareness 🔍
Providing a more direct entry point
Providing a more direct entry point
Reduced extra steps by providing a direct entry point for features previously hidden behind an initial icon.
Retained the original icon for its familiarity, preserving established user behavior.
Increased the discoverability of the diagramming sidebar, helping users quickly perceive its value.
Clarified the UI by making selected icons and actions easily identifiable and improving naming conventions.
By providing both options and a more direct entry point on default there is a higher chance users discover the paid packs more easily while still being able to draw as usual.
Reduced extra steps by providing a direct entry point for features previously hidden behind an initial icon.
Retained the original icon for its familiarity, preserving established user behavior.
Increased the discoverability of the diagramming sidebar, helping users quickly perceive its value.
Clarified the UI by making selected icons and actions easily identifiable and improving naming conventions.
By providing both options and a more direct entry point on default there is a higher chance users discover the paid packs more easily while still being able to draw as usual.
Solution 3: Increase CR Free-to-paid 💸
Enhanced clarity with intuitive UI and upgrade patterns
Enhanced clarity with intuitive UI and upgrade patterns
Made several enhancements to the upgrade patterns to promote user upgrades.
Added a lock icon to indicate locked shape packs and included a tooltip with an upgrade link to encourage users to upgrade.
Also provided additional information about the shape packs on hover.
Furthermore, the "+ [value] shapes" text is now clickable, offering another entry point to the paywall.
Made several enhancements to the upgrade patterns to promote user upgrades.
Added a lock icon to indicate locked shape packs and included a tooltip with an upgrade link to encourage users to upgrade.
Also provided additional information about the shape packs on hover.
Furthermore, the "+ [value] shapes" text is now clickable, offering another entry point to the paywall.
Solution 4: Increase adoption & perceived value ✨
Visual context and user delight for more clarity
Visual context and user delight for more clarity
Focused on bringing more visual context and clarity to the shapes modal and paywall.
Infused the visuals with more user delight through motion and animation.
Teaming up with a solution architect, I provided visual context by showcasing shapes in action.
Utilizing user data, we placed the most popular pack, AWS, at the forefront.
This collaborative effort resulted in a more engaging and informative paywall experience.
Focused on bringing more visual context and clarity to the shapes modal and paywall.
Added new visuals with more user delight and motion
Teaming up with a solution architect, I provided visual context by showcasing shapes in action.
Utilizing user data, we placed the most popular pack, AWS, at the forefront.
This collaborative effort resulted in a more engaging and informative paywall experience.
Monitoring & Learning
How we measured succes and mitigated risks
How we measured succes and mitigated risks
Because this was a very cross-functional project, there was a lot of back and forth with the core team in order to make sure risks were mitigated as much as possible.
Primary metrics:
# of users who interacted with paywall
# of users who upgraded since change
Free-to-paid
New ARR
Guardrail metrics:
Monitor usage for both Diagramming & Shapes with only new users
2 week pilot first for internal Mironeers to mitigate usage risk
% of free teams creating 1+ diagrams and shapes
% of free teams retaining diagramming use
Because this was a very cross-functional project, there was a lot of back and forth with the core team in order to make sure risks were mitigated as much as possible.
Primary metrics:
# of users who interacted with paywall
# of users who upgraded since change
Free-to-paid
New ARR
Guardrail metrics:
Monitor usage for both Diagramming & Shapes with only new users
2 week pilot first for internal Mironeers to mitigate usage risk
% of free teams creating 1+ diagrams and shapes
% of free teams retaining diagramming use
Final Result
Increased conversion rates and feature adoption.
Increased conversion rates and feature adoption.
We achieved significant increased in discoverability, free-to-paid and nARR in our treatment, compared to control.
We achieved significant increased in discoverability, free-to-paid and nARR in our treatment, compared to control.
👀
The experiment resulted in a 9-fold increase in discoverability, and 75% increase in adoption favouring shapes like flowcharts.
📈
Activation rates in the treatment group saw positive trends, with corporate domains showing +43% higher conversion rates.
✨
We observed a higher retention rate and +14% increase free-to-paid CR due to the refreshed visuals that better showed the value.