Explore

How to build a doc like a pro

⁠

A doc in Coda is more than just a doc. Often, docs serve as custom business applications. Below are the top tips to think about when creating a space for yourself and others that feels like home. ❤️ Incorporating these best practices in your doc will ensure that users feel comfortable and use your "app" well.

⁠

The Blueprint

Determine the Purpose

Whenever we help clients with their docs, there are a few critical pieces of information that we start with:

Who are the people/personas that will be using the doc?

What are they each interested in seeing?

What do they do with that information?

Based on each persona’s workflow, the goal is to build a Coda page in a way that matches (and optimizes) that workflow.

⁠

⁠

The

Google Launch calendar⁠

is a great example. One section is built out for people who are PMs for a launch, one section is built out for people who need to review launches, and one section is for stakeholders who want a snapshot on recent launches.

The Foundation

Information hierarchy: front-end vs back-end

⁠

Next, you’ll start on your foundation. it’s helpful to start organizing your doc with a front-end section and a back-end section. Think through some of the apps you use. Traditionally they have a flow from top to bottom or left to right (as with most other things like how you read a document or navigate a website).

The most successful pattern we see in a doc is as follows:

🏠 Front-end: Home page and personal space where every user starts off

🏠 Front-end: Reports for managers and stakeholders

🏠 Front-end: Team views for folks to collaborate and work together

🛠️ Back-end: Admin and setup also known as the "back end" or "back stage"

⁠

Screen Shot 2022-09-29 at 1.24.37 PM.png

⁠

Intuitive page names makes it easier for people to find the information they’re looking for without having to do anything (e.g. ‘Design Team Tasks’ page makes it intuitive for people to know where to go to find tasks for the design team.

The electrical and pipes

Admin Section aka “the back-end”

The admin section is like all the electrical and pipes in your house that make day-to-day life work. When you start building the substance of the doc, it’s helpful to create an Admin page. This is where you’ll start creating your databases in an organized and efficient way. Thoughtful setup at the outset means that the doc will be easy to use, maintain, and evolve as your processes change.

At Coda, when we build docs for clients (and for ourselves), we like to use the same iconography for all pages that are in the Admin section. A personal favorite is the gear + table icon 👉

⁠

Screen Shot 2022-09-28 at 8.40.13 PM.png

⁠

When ready to launch your doc to your team, lock and hide the Admin folder. Often this data rarely changes, or isn't as useful unless it's filtered. You can hide those sections so the supporting data is out of the way and is less likely to be accidentally edited or deleted. The rule of thumb is that you should leave Base Tables (those main database tables) alone as they are. Think of them as tucked away, all-inclusive, tables that drive the rest of your doc

⁠

photo of edison light bulbs hang on ceiling

⁠

Closets, Closets, Closets!

Instead of free-flowing text try structuring data into tables

A house without closets is a disaster. Everything is unorganized and everywhere. Similarly, a doc without tables is...messy. Messy docs are hard to use, don’t get good engagement, and become hard to maintain overtime. Because Coda can take a table and turn it into a myriad of other views it’s best to organize data in tables whenever you can.

Coda is a relational database, so keep these two rules in mind:

There are no duplicate tables in the app (on the backend). If you see the table twice in any app, one of them is a view of the base table.

In a table, you order the core, unique, more important items on the left, the less accessed items to the right, and the actions on the far right.

⁠

A few tips when building out your tables:

Thing Tracking: The

display column⁠

should be the first column of your table. The Thing you are Tracking is the most important item and what makes the row unique. Examples are Task for a project, Contact name for contact info, or Feature for a product roadmap. Display columns are often a Text column.

Person: Most things tracked will have a person on your team associated with it. Examples are Assignee, Account Manager, or Product Manager. Having this column close to the Thing Tracking draws closer association of the responsible party. This is often a

People column⁠

. A people column sets you up to make notifications to this person easier as well as pull in metadata like email and photo.

Date: Start or end (or both). Often a

Date column⁠

type, unless you're tracking by Quarter. Using the actual Date column type sets you up for reminders based on that date or using the calendar/timeline view!

Status: Far right, put at the end because it's the action that the user takes after getting context from the other items in the row. Can be a Select List column, but will scale better (and makes it easier to edit) if it's a

Lookup column⁠

type to another table called Status. You can use the Workflow Status Drag n' Drop Template.

The Welcome Mat

A warm welcoming on each page

A warm welcoming is essential within the doc that has clear direction on the steps a user should take to interact and be successful.

Every doc should have a welcome page. A welcome page acts as the first place someone comes to a doc (so you'll share that URL with others). Start docs with the story: the best Coda docs read like "productized blog posts" and give a sense of what the doc is about, who it's targeted to, some of the key information within the doc, and uses mixed media videos, copy, gifs, etc.

⁠

Written instructions on each page after your welcome page (you can make them collapsible) will ensure everyone is aware how the doc works. We love putting written instructions + a video walking through anything specific you need people to do.

Your Goal is to drop new users into a place that can give them context of what to expect in the rest of the doc.

You need rooms

Different users get different views. End users focus on taking action on their work and stakeholders see the big picture.

⁠

⁠

Ever been into a house without rooms? Me neither! Similar to the various rooms in your house (all powered by the same systems), you need to create spaces for the various people who will be interacting in your doc. This view gives end users immediate context for how to interact with the doc by creating a space designed specifically for them where they focus on their own work. Most end users will be adding data (usually related to themselves) and updating their own info, so creating a page for them will allow them to get in, do their work, and get out in the easiest and fastest way.

You then create Views that are portals into parts of the Base Table.

⁠

⁠

Hot tip: apply all your refining to Views:

Hides columns in Views, not Base Tables. Hide columns in views, but keep all columns available in the base table so that when you or others go to it, they can immediately understand the full breadth of the table. You can always hide columns in the views of the base tables. In the example above, we are Content, Lots of Content, Scale, and Number within the view but keeping them in the base table. More on

hiding columns⁠

Filter Views, not Base Tables. If you filter a base table, that filter will apply to all other views. Also, it's just confusing to come to a table that should include all of the data (your customers, all product launches) and you can't find them. More on

filters⁠

Sort Views, not base tables. This isn't that big of a deal, but can mess up filters and other queries sometimes.

Conditionally Format Base Tables, not Views so that all views can inherit those formats. Otherwise, you'll need to re-color each view. More on

conditional formatting⁠

⁠

Decorations

Add Visual Elements and Interest

Have you ever walked into a blank white house? It feels sterile and not at all like a home but more like a museum. Similar to a home, you’ll want to add visual interest to make your doc inviting and feel familiar. And if you aren’t into the home metaphor below are a few statistics of why visual elements are so important.

⁠

⁠

91% of consumers now prefer interactive and visual content over traditional text-based or static media -

Forbes⁠

⁠

65% of the population are visual learners - Inc

Visuals have been found to improve learning by 400% - Shift Learning

The human brain processes images 60,000 times faster than text, and 90% of information transmitted to the brain is visual - Shift Learning

⁠

🖼️ Cover Photos

Your cover photo is important because it’s the first thing that someone will see in your doc and it will appear in any link preview. You want something that speaks to the tone of the doc.

⬜ Icons

Use the icons on the left hand-side of the doc to visually organize and direct people to intuitively navigate to different parts of the doc

👀 Explore Table options

This helps make tables more digestible - groups, conditional formatting, sort, filter, table display, columns

Visualize the table depending on what you want to highlight

Calendar or timeline view: for datasets where dates are important to visualize

Charts: for where the end user may just want to see a visual summary of the information and does not need details

Cards view: paired with images or the unsplash pack, it can create a visual interface that makes it easier to browse through information

Detail view: for use cases where the end user may want to see one row of data at a time

Form: if you want to create an intake form for your table without having the person actually in your doc

Word cloud: quickly get a sense of your data trends/themes in a visual format

Board view: when someone wants to easily drag and drop between groups of data (e.g. change status by dragging a card from in progress to done)

Embedding Content

The best trick if you are taking a URL and dropping it in Coda is to embed that information within your doc. Rather than having URL’s everywhere (🙈). We see this a lot with YouTube links, Spotify Links, Google Slides (and sometimes GDocs and GSheets).

⁠

Give yourself some light switches

Add
Buttons
⁠
and
canvas control filters
⁠
⁠

Every house needs them and you know exactly what they do.

Buttons:

Not everyone will be familiar with what you’ve created. Buttons help illustrate what you want people to do with information and how to do something without needing to find out where in your doc they need to navigate to.

Canvas Control Filters

For pages you do want filtered, it makes it easy for people to see how to filter in Coda and also gives you the ability to filter multiple tables on a page using one interactive filter. An easy way to create a filter is find a column in your table you want people to filter click the drop down arrow next to the title name > filter > interactive filter > create control.

A few common buttons:

Add a row (this can be add a project, add a task, add a person, etc.)

Copy a page

⁠

Email a page⁠

A few common controls / interactive filters:

By person

By Status

By Topic

⁠

⁠

Lock your doors

Locking / Permissions

⁠

⁠

You put locks on your doors to show people that this is your house and they should knock before coming in. Do the same in your doc. Don’t let people guess how you want them to interact with information.

Lock down pages⁠

and give permissions that lead people to the right usage.

🎉Bonus Advanced!🎉

Make your home a smart home

Uplevel through automations

If you can anticipate repetitive and predictable tasks that the end user might have to do, you can use automations and formulas to automate those in your doc.

The rule at Coda is if you are copying and pasting anything you are doing it wrong!!!

⁠

gold Apple iPhone smartphone held at the door

⁠

See your home on Zillow

Internal Publishing Links

Publishing for internal use makes Coda look more like a polished document for consumption. People who are less tech savvy seem to find the top navigation bar much more intuitive and easy to use

Publishing also allows people to be less scared about accidentally editing something they shouldn’t but letting them play around with things as if it’s their own with more confidence that they’re not impacting what other people are seeing

⁠

Your address

Running out of home metaphors but my favorite formula to add instant “ooohh!” is user().totext().

See it in action

Anonymous User

⁠

And voila, you’ve built yourself a home...ehh doc. It’s time to get the keys and move-in! 👏 🍾 🔑

⁠

architectural photography of concrete building

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.