It also reinforced how crucial contextual data is to collaboration, when you bring customer insights into shared planning spaces, alignment and productivity improve naturally.
For the best experience, please open this site on a desktop device.
Connecting HubSpot and Miro: Designing a Private App for ServiceRocket’s CoE Rollout
- Case study
- Muhammad Azhari
🧭 Introduction
What is HubSpot for Miro, and why does it matter?
ServiceRocket teams use Miro, a digital whiteboard for collaborative planning, and HubSpot a CRM system for managing customer data like contacts, deals, and meetings. But these two tools didn’t talk to each other.
The result? Teams had to manually copy and paste information between platforms, leading to time loss, inconsistent data, and a lack of context during planning sessions.
The HubSpot for Miro app was designed to fix this. It’s a private internal tool that allows users to pull live HubSpot data directly into Miro boards bringing customer context into visual planning workflows, and helping Sales and Strategy teams align faster and more accurately.
📌 Overview
ServiceRocket’s management entrusted the Fusion squad with the responsibility of building this app, recognizing us as one of the most efficient, fast-moving teams that consistently delivered high-quality work. As part of this high-performing squad, I was honored to lead the product design of a private Miro app that enabled internal teams to seamlessly connect and manage customer data from HubSpot within collaborative Miro boards. This app played a key role in supporting the rollout of the company’s new Center of Excellence (CoE) framework.
🧩 The Challenge
Context
With the launch of the CoE, ServiceRocket needed a structured, collaborative way to plan and track key components such as roadmaps and stakeholder maps, across teams. The core problem: information in HubSpot was disconnected from Miro, leading to silos, inconsistencies, and inefficient workflows.
Key Problems
Constraints
I worked under a tight timeline, which meant skipping traditional discovery methods like user interviews and in-depth UX research. Instead, I had to rely on:
- Client-provided requirements
Coda shared detailed pain points and product goals based on their own internal research and vision. These became my primary design guideposts throughout the project. - Design System Limitations
The header and footer were fixed with limited customization, while some layout and behavior constraints were only discovered during the design spike.
Miro’s design system and developer documentation occasionally conflicted. For instance, a color labeled as
--blue900in the design system showed up as--indigo700in code. This caused confusion and required close coordination with developers to ensure visual consistency.
🎯 Goals
- Enable contributors to access and display HubSpot objects within Miro boards.
- Maintain consistency of data between Miro and HubSpot.
- Streamline internal collaboration around CoE planning.
💡 The Solution
We designed a private Miro app with secure HubSpot authentication and dynamic data handling to bring customer context into visual collaboration spaces.
Core Features:
Secure Authentication with HubSpot
Smart Importing of Contact, Company, Deal, Meeting, and custom object: Quarterly Action Plan
Search by Company for fast filtering
Live Object Cards with essential fields and detailed modal view
🧭 Design Process
🗣️ User Research (Skipped – Strategic Decision)
Given the tight 4-week timeline and the internal nature of the app, we did not conduct formal user research. However, the product vision was informed by clear business needs and prior conversations with sales and CoE stakeholders.
The target users: BDRs, Sales, and internal consultants were already known, and the problem space was well understood by the business.
✍️ Wireframes (Skipped – Time Efficiency)
To maximize time, I went straight to high-fidelity design. My previous experience designing the Coda for Miro and Autodesk for Miro apps enabled me to rapidly build production-ready UI without needing a wireframing phase.
🔁 User Flows (Embedded in High-Fidelity Designs)
Rather than creating separate user flow documents, I incorporated all user flows directly into the high-fidelity mockups. These designs clearly illustrated how users would:
Authenticate and connect their HubSpot account
Search for and import objects by Company
Interact with object cards (view summaries, expand for details)
Refresh or remove outdated objects
I reviewed these flows weekly with the PM and engineering team before development began, ensuring alignment and a smooth handoff.
🎯 A/B Testing (Card Design)
I also conducted an A/B test to evaluate two card design options. The goal was to find out which design made it easier for users to identify and differentiate the app cards. I asked users why they preferred a particular option to gather qualitative insights that informed the final design choice.
🧪 Feedback & Iteration
After delivering the MVP, we gathered informal feedback through a dedicated Google Chat group where BDRs and Sales team members could share suggestions, report issues, and propose improvements. This included:
Observing how users searched for and placed HubSpot objects
Collecting input on data visibility, layout, and terminology
Surfacing feature requests such as object linking and filtering, which were added to the roadmap
These insights helped validate our design direction and informed iterative improvements to the card content and modal details.
🖌 My Role & UI Highlights
As the sole product designer on the Fusion squad, I:
Highlights:
Took initiative to begin design during engineering’s spike phase
Delivered polished high-fidelity mockups, skipping wireframes
Created dynamic UI components for each object type
Built modular modal layouts with structured data hierarchy
Partnered closely with devs to ensure real-time API data mapped cleanly to UI elements
Modular & Adaptive UI
I designed reusable UI parts like cards, tables, and dropdowns that could adjust automatically depending on where the content came from—either Miro or Coda. For example, a card showing data from Coda would show more structured info, while one from Miro would focus more on visual notes.
This way, users could easily understand what they’re looking at, and the design still felt like it belonged to both platforms. It helped keep the experience simple, consistent, and visually clear.
Visual Language Fusion
I combined the clean and minimal style of Miro with the expressive and colorful feel of Coda. My goal was to make the interface feel familiar to users from both platforms, while also keeping it easy to read and fun to use.
- I used soft backgrounds and gentle shadows to make sure the content stood out without feeling too heavy.
- I added bright highlights that matched each brand’s colors to help guide users’ attention to important actions.
⚡ Rapid UI Testing
I conducted two rounds of focused user testing to guide key UI decisions:
Exporting Sticky Notes to Coda
I tested two UI variations: one using switchable tabs and another using a dropdown selector. Initially, users had a higher misclick rate with the switchable tabs (85.6%) compared to the dropdown (52.3%), likely due to being unfamiliar with the navigation. However, during the second task using the dropdown, navigation became smoother as participants got more comfortable with the interface. Despite the initial challenges, all participants (100%) preferred the switchable tabs. They rated the experience an average of 8.2 out of 10. I also collected open feedback to explore further improvements.
- Importing Coda Rows into Miro
I explored how card content should be displayed on the Miro board: vertically or horizontally. Most users (67%) favored a vertical layout for better readability and visual alignment with the flow of a Miro board.
These insights helped me confidently shape a user interface that felt natural, clear, and aligned with user expectations in a fast-paced collaboration space.
📈 Impact
The app is now used daily by the BDR and sales team for planning and customer engagement alignment. It’s become a key tool for CoE rollout, and early success has led to requests for new features, a strong indicator of adoption and value.
Success Indicators:
- Reduced manual data syncing between Miro and HubSpot.
- Higher accuracy and consistency in customer information during planning.
- Positive feedback from internal users and leadership.
- Ongoing expansion of the feature set based on active user requests.
Stakeholder feedback:
Design to Impress! Great work
Wow - really like this nice UI for sticky vs cards
Despite the lack of ongoing analytics, this project served as a strong showcase of creative UI work within a tight timeline and across two product ecosystems.
Horea’s video teaches users how to use the Coda for Miro app, but it shows an early test version of the app that isn’t fully finished yet.
🔍 Reflection
This project showcases the power of lean, confident design under pressure. By trusting my experience and moving quickly, I was able to drive clarity and speed into the product development process.
If I were to extend the app, I’d explore:
- Real-time sync indicators.
- Object relationship maps (e.g., Contacts linked to Deals).
- Permissions management within larger teams.