Coda for Miro – Azhari | Product Designer

For the best experience, please open this site on a desktop device.

Bridging Ideas and Structure: Designing the Coda for Miro App

Client

Coda.io

Role

Sole Product Designer

Tools

Figma, Maze and Miro

Timeline

4 weeks

📝 Project Summary

I led the full design process for a public integration between Coda and Miro from understanding the problem to delivering the final UI.

Working within constraints, I designed a connected experience that helped users move smoothly between Miro’s boards and Coda’s docs. I collaborated closely with developers, ran quick user tests, and focused on solving key issues like manual copy-pasting and disconnected workflows.

Results:

800+ enterprise installs on the Miro Marketplace
5/5⭐ average rating, indicating high user satisfaction
Praised by an internal stakeholder and a Miro team member for its clarity, design, and seamless experience
Showcased how strong design decisions even under tight constraints can deliver meaningful impact

📌 The Problem That Sparked the Integration

Using Coda with Miro shouldn’t feel like using two separate tools. - Coda

That was the core challenge when Coda approached us to design a public integration with Miro, a fast-tracked project to bridge visual collaboration and structured documentation into one unified experience.

In modern team environments, Miro is often used for brainstorming and planning, while Coda handles structured workflows and task management. But without a built-in connection, users had to switch back and forth between two separate tools which gave me a chance to design a smoother, more connected experience.

🧩 Why the Existing Workflow Was Broken

When Miro and Coda don’t talk, teams lose time and context

Without a native integration, teams were forced to manually copy and paste between the two. This broke flow, caused context to get lost, and introduced inconsistencies, all of which slowed teams down and led to avoidable errors.

Since I couldn’t run interviews or do traditional discovery, I relied entirely on the materials provided by the client, a detailed walkthrough video. That video became my design brief. I studied it closely, drawing out the underlying problems and expectations, which became the primary guideposts throughout the project.

We quickly identified three key problems that were affecting productivity:

Key Problems

Manual Data Transfer

Teams were forced to manually copy and paste content between Miro and Coda. This not only wasted time but also introduced errors and inconsistencies in documentation.

Disconnected Experience

The lack of integration broke the collaborative flow between visual ideation in Miro and structured follow-up in Coda. Teams couldn’t maintain momentum across tools.

No Unified System of Record

Decisions made in Miro were often not recorded in Coda. This caused important details to be missed and made it harder for everyone to stay aligned.

🎯 Turning Two Tools Into One Experience

So what exactly was I trying to solve?

How can I make the experience of switching between Miro and Coda feel natural, connected, and lightweight even with platform limitations in the way?

My goal was to reduce friction in that flow, helping users move seamlessly from visual ideation to structured documentation, while crafting a clean, delightful UI that felt native to both platforms.

But designing for “seamless” wasn’t straightforward. Since day one, I had to work around a few challenges that shaped the way I handled the project and chose what to do next.

⏳ The Constraints We Had to Work Around

From the start, we worked within strict boundaries that affected every part of the design process.

No user interviews or deep discovery.
Because of the fast timeline, I couldn’t talk to users or do proper discovery. I had to rely entirely on what the client provided. So every design decision was made without real input from users.
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 --blue900 in the design system showed up as --indigo700 in code. This caused confusion and required close coordination with developers to ensure visual consistency.
Tight timeline.
We were working in weekly agile sprints, where delays weren’t an option and decisions had to be quick, clear, and collaborative.

💡 The Solution

The Coda for Miro App was designed to make working between Coda and Miro feel smooth and connected. It uses an integration server to keep the data in sync, which allows users to:

Export sticky notes from Miro into specific Coda tables

Import rows from Coda into Miro as App Cards

This enabled a harmonized workflow: brainstorm in Miro, structure and track in Coda.

🔧 My Design Process (Simple Version)

With clarity and speed in mind, I focused on turning Coda’s internal requirements into a clean, usable experience, while staying aligned with Miro’s system constraints and developer needs.

Understanding needs. I translated Coda’s product goals into user flows and wireframes, adding clear annotations to explain how each part should work.
Collaborative alignment. I reviewed flows with the developer and PM early, leading quick brainstorms to agree on functionality and direction.
Creative within the system. I worked within Miro’s design rules, but brought the UI to life through thoughtful color, spacing, and layout decisions.
Rapid UI validation. Instead of testing everything, I prioritized high-impact moments. Where clarity and usability mattered most.
Designing ahead of dev. I kept design just slightly ahead of development, sharing weekly progress and refining details within the sprint to keep handoffs seamless.

Once the core flows and functionality were tested and in place, I shifted focus to what users would actually see and feel. The next challenge was turning a system UI, bound by rigid platform rules into something warm, intuitive, and expressive.

🖌 Bringing Warmth Into a System UI

Once the core flows were solid, I shifted focus: from functionality to feeling.

I wanted users’ first experience to be more than just efficient, I wanted it to feel intuitive, warm, and expressive. That meant going beyond default components and crafting a visual language that blended the minimalism of Miro with the personality of Coda.

Instead of default components, I crafted my own visual language using:

Friendlier color palettes to make the interface feel more inviting
Smoother transitions to create a sense of flow between tasks
Visual spacing and rhythm that made complex layouts easier to read
Micro-interactions that added delight without distraction

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

This was about balance, melding two different product tones into a single cohesive interface.

I combined Miro’s clean, minimal foundation with Coda’s more expressive and colorful tone. My goal was to create something that felt familiar to users from both platforms, while still standing out as a thoughtful, polished product.

Soft backgrounds and rounded containers help reduce the “tool-like” feeling, making the interface feel more inviting.
Illustrations and playful arrows give life to otherwise static screens, helping users understand actions without reading too much.
Coda’s tone of voice shows up in the copy. Friendly, helpful, and clear.
Color choices served as a bridge, neutral enough to sit comfortably within Miro’s world, but warm and human enough to echo Coda’s spirit.

First Impressions Matter. The welcome and setup screens were the user’s first touchpoint. They needed to be clear, intuitive, and on-brand, setting the tone for everything that followed. Every interaction, color, and word was intentional. It wasn’t just about onboarding, it was about establishing trust and creating a sense of ease from the very beginning.

⚡ Focused UI Testing: Small Efforts, High Impact

With no formal research planned and limited time, I took the initiative to test two parts of the flow that I believed could make or break the user experience.

1. Export Method Selection: Tabs vs. Dropdown

What I tested:

To export sticky notes from Miro to Coda, users needed to first choose their export method:

“Select Page” (browse and pick from a list of Coda pages)
“Page URL” (paste a direct Coda link)

I explored two UI patterns:

A dropdown menu labeled “Choose export method”
Switchable tabs, each clearly labeled with one method

What I wanted to find out:
Which layout made it easier and faster for users to understand and select their export method, even if it was their first time using the app?

What I observed:

Users made more initial misclicks with tabs (85.6%) than with dropdowns (52.3%) possibly due to unfamiliarity.
But once they completed the task once, 100% preferred the tab version.
They described it as more intuitive, and rated it 8.2/10 on usability.

Design decision:
I went with switchable tabs. Tabs offered more clarity, immediacy, and easier switching between methods especially for repeat use.

2. Coda Row Imports – Vertical vs Horizontal Cards

What I tested:
Once rows were imported from Coda into Miro, I needed to decide how to display them visually as “App Cards” on the board:

What I wanted to find out:
Which format feels more natural and scannable within Miro’s spatial layout?

What I observed:

67% of users preferred the vertical layout
It matched the way people already arranged sticky notes on Miro boards
It also supported better text hierarchy and visual scanning

Design decision:
I finalized on the vertical layout for better readability and alignment with common user behaviors in Miro.

Why only these two tests?

I focused on these specific interactions because they:

Directly affected how fast users could complete a task
These steps were part of the core flow, if they felt slow or clunky, the whole experience would feel broken.
Involved decision-making that could slow users down
Choosing between export methods or reading card content required clarity, small UX differences could create hesitation or confusion.
Depended on layout and interaction design
These weren’t just backend decisions, the way users interacted with them (tabs vs dropdowns, card orientation) had a direct impact on how smooth the experience felt.
Had the biggest potential to improve speed and satisfaction
Small changes here could make a big difference in how confident and efficient users felt during key actions.

📈 Shipped. Adopted. Rated 5 Stars.

After handing off the product to Coda’s product team, we no longer had access to deeper user metrics, a common situation when clients take full ownership post-launch. However, based on publicly available data:

Enterprise user installs:

800 🚀

Average rating:

5/5 ⭐️

This design didn’t just pass. It stood out.

Design to Impress! Great work

Azwandi

Executive Director Product Management

Wow - really like this nice UI for sticky vs cards

Horea Porutiu

Miro

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.

🔍 What This Project Taught Me

This project taught me how to lead creatively under real constraints, limited research time, tight deadlines, and strict design rules. Instead of getting stuck, I prioritized the areas where I could create the most value. I focused on crafting a clear, beautiful, and user-friendly interface.

The experience also reinforced the importance of close collaboration with developers and the PM. It reminded me to rely on my visual design strengths and trust my instincts, especially when time doesn’t allow for extensive testing. Going forward, I’ll continue to use this approach when navigating similar constraints.