I completed this project during my summer at Coda.
Product Designer
Jun-Sept 2021
Me (Design)
+ 2 PMs
+ 1 Engineer
+ Design Team Support
Figma
Coda is the doc that brings words, data, & teams together. In a world full of applications, why do documents and spreadsheets still run the world? And why haven’t they been updated in over 50 years? Coda is a new kind of doc that brings words, data, and teams together. It comes with a set of building blocks that anyone can combine to create a doc as powerful as an app. Check it out here.
My project involved Coda's formula language and Packs. Coda's formula language offers hundreds of formulas you can use to build and customize your doc. Packs are like plug-ins that can connect your doc to everyday apps to pull live data in or push updates out automatically.The specific goal of my project was to make Pack Formulas easy to discover, use and learn. To approach this problem, I started by looking at where formula documentation lived in the /formulas page and starting thinking about how I might redesign that page to make room for thousands more pack formulas. With the growth of the Packs Ecosystem, non-Codans will soon be able to make their own packs; and that means there will hopefully be tons more formulas to use and learn.
Make pack formulas easy to discover, use, and learn.
To make room for a world where there are thousands of packs, and thus thousands of pack formulas needing proper documentation.
As a doc maker, I want to . . .
Find a formula that helps me solve my problem.
Understand how to use a formula in a pack.
See if a formula in a pack will solve my problem.
How might we . . .
Make formula documentation scale for tons more packs?
Make documentation feel richer and more engaging?
Ensure discovery of formulas aligns with discovery in other places?
Focusing in a little too early . . .
Initially, I focused solely on the /formulas page, trying to explore ways to make this page itself scalable. I explored minor changes like adding a two column layout, adding icons, using color . . .
I explored a two-column layout where documentation would live in the right column while the left column would link out to the packs page. This design, however, still would not scale for many more packs.
I also considered how to make formulas easier to learn. In this exploration, I added an introduction section to the formulas page and thought of ways to include helpful descriptions and link out to our pre-existing formula YouTube tutorials. This still did not address the need for a more scalable method of navigation formula documentation.
I dove a little deeper into what formula documentation could look like, and explored how incorporation of breadcrumbs and tab structures could condense information more cleanly into one page. Feedback for this was that the added elements might prevent people from easily browsing available formulas.
To explore with a more visual focus, I designed a pack formula page that highlighted logos and illustrations while organizing packs into different categories. Although the method of incorporating packs into categories helped with the need for scale, it didn't quite feel like the solution we were looking for.
How can we scale formula documentation for tons more packs?
My initial explorations still didn’t fully address the core problem needing to be solved. That brought up the question, on “Where should pack formula documentation really live?” Since I was focused on the /formulas page, I didn’t initially explore the possibility of having pack formula documentation live outside of the /formulas page.
But with the introduction of the Packs Listing page to the Gallery, we discussed whether it might align more with our goals if we moved pack formula documentation to live in the Packs Listing page in the Gallery.
/Formulas vs. /Gallery
To make a decision, I mocked the two different possibilities: One where pack formula documentation remains in the /formulas page and the other where it would live in the Gallery.
Two different flows based on where pack formulas documentation would live.
This helped weigh each option equally from a high level. Ultimately, we decided to move pack formula documentation to the the Packs Listing pages that would live in the Gallery, since this option best addressed the user goals of understanding a Pack’s formulas (you don’t have to leave the Pack’s Listing page) and determining if a pack formula would solve their problem. This option made more sense given the growth that the packs page will likely experience over time. This resolved the question presented earlier of, “How can we scale formula documentation to accomodate tons more packs?”
Formula documentation ready for the new world of Packs.
After many many iterations based on feedback from the team, I created a final design of pack formula documentation in the Packs Listing page. Below are the final designs! My engineering partner was amazingly fast and got this out into production –– check out my design by using a formula in a Coda doc!
Formulas tab
Formula documentation would live in the doc gallery under the packs listing page, making it easier for makers to find the right pack and formula to solve their specific problem.
Documentation tab
If a maker is more curious about a pack’s formula, they can check out the documentation tab. Here, they can see details about a formula’s inputs and output.
Finalizing the details
When handing off my design to my engineering partner, I made sure I added extra details to ensure as much clarity about my design as possible.
Approach a problem from a high level before diving in too early.
There were a lot of learnings from this project, but the main one was to approach a problem from a high level before diving into the details. This was especially important for a project involving scaling for growth (which makes it super exciting and but comes with its own unique challenges!).