A now trite, but well worn phrase: A picture is worth a thousand words
Anyone who has worked closely with me will quickly reflect on my deep love for whiteboards. I love the open blank space and the flexibility to draw and redrew, to frame and reframe.
As Matt (Head of Growth) and I got started building Coda, we spent countless hours on whiteboards, and gradually took our techniques and formalized them. In doing so, we developed a shorthand that made it both easier to develop the right frame and for others to quickly digest it.
Insight: Using colors as a shorthand
Originally this happened by chance. We had a small box of whiteboard markers with a fixed of colors and we started rotating through them. We quickly discovered that if we agreed in advance on what each color meant, it was much easier to collaborate. In fact, we often would start with one of us framing a problem, and then switch places where the other one could finish.
Over the years, these color assignments have stuck with us. Here are the colors we arrived at:
Questions (Black): Setting the space. Defining the big questions. From these, one or two will be the eigenquestion(s).
Options (Blue): Used to help think broad — defining possible answers or options.
Tangible examples (Grey or Brown): Used to make an option concrete. What's the visual?
Callouts (Purple): Highlighting the important concept in a concrete example that demonstrates the blue option. Often used for emphasis or to draw the eye.
A choice (Orange): Points out a decision or space where we’re leaning among the options.
A problem (Red): This has potential issues or could be really tricky. Caution.
A benefit (Green): This seems really good — pointing out potential greatness.
That's it, a simple system, but a very useful shorthand. For example, we could look a diagram and say things like:
"Looks like you're still framing, it's still all blue"
"Ready for tradeoffs? Let me grab green/red"
"Decision time? Here's the orange pen"
"Perhaps these aren't the right questions? Let's return to black pen"
An example (and a template)
While I love physical whiteboards, over the years, as our team became more distributed, I turned more frequently a digital alternative. My digital whiteboard of choice is Miro (more on that in a separate post).
This is an example of how this coloring technique works in practice! If you want to go deeper check out this doc, Eigenquestions: The Art of Framing Problems.
Shishir Mehrotra
Co-Founder & CEO @ Coda
Long-term productivity nut finally getting a chance to build my dream doc. Previously built products at YouTube, Microsoft, and Centrata. MIT alum. Live in the Bay Area and married to college sweetheart, with 2 wonderful daughters.
Categories
Similar templates
Website Wireframing Template
Website Wireframing Template
Wireframing is a method for designing a website at the structural level. A wireframe is a stylized layout of a web page showcasing the interface elements on each page. Use this Wireframe Template to iterate on web pages quickly and cheaply. You can share the wireframe with clients or teammates and collaborate with stakeholders. Wireframes allow teams to get stakeholder buy-in without investing too much time or resources. They help ensure that your website’s structure and flow will meet user needs and expectations.
Online Sketching Template

Online Sketching Template
Before you go full steam ahead with a promising idea, look at it from a high level — to know how it functions and how well it meets your goals. That’s what sketches do. This template gives you a powerful remote collaboration tool for the initial stages of prototyping, whether you’re sketching out web pages and mobile apps, designing logos, or planning events. Then you can easily share your sketch with your team, and save each stage of your sketch before changing it and building on it.
App Wireframe Template
App Wireframe Template
Ready to start building an app? Don’t just imagine how it will function and how users will interact with it—let a wireframe show you. Wireframing is a technique for creating a basic layout of each screen. When you wireframe, ideally early in the process, you’ll gain an understanding of what each screen will accomplish and get buy-in from important stakeholders—all before adding the design and content, which will save you time and money. And by thinking of things in terms of a user’s journey, you’ll deliver a more compelling, successful experience.
Website Wireframing Template
Website Wireframing Template
Wireframing is a method for designing a website at the structural level. A wireframe is a stylized layout of a web page showcasing the interface elements on each page. Use this Wireframe Template to iterate on web pages quickly and cheaply. You can share the wireframe with clients or teammates and collaborate with stakeholders. Wireframes allow teams to get stakeholder buy-in without investing too much time or resources. They help ensure that your website’s structure and flow will meet user needs and expectations.
Online Sketching Template

Online Sketching Template
Before you go full steam ahead with a promising idea, look at it from a high level — to know how it functions and how well it meets your goals. That’s what sketches do. This template gives you a powerful remote collaboration tool for the initial stages of prototyping, whether you’re sketching out web pages and mobile apps, designing logos, or planning events. Then you can easily share your sketch with your team, and save each stage of your sketch before changing it and building on it.
App Wireframe Template
App Wireframe Template
Ready to start building an app? Don’t just imagine how it will function and how users will interact with it—let a wireframe show you. Wireframing is a technique for creating a basic layout of each screen. When you wireframe, ideally early in the process, you’ll gain an understanding of what each screen will accomplish and get buy-in from important stakeholders—all before adding the design and content, which will save you time and money. And by thinking of things in terms of a user’s journey, you’ll deliver a more compelling, successful experience.