Coda – Customization for Teams

Monetization Product Design UI/UX

September 14, 2021

Coda – Customization for Teams

We’ve been exploring new features for teams that make them feel lived in the Coda workspace. Coda is a new type of document that blends the flexibility of documents, the power of spreadsheets, and the utility of applications into a single new canvas.

Open Project

Task

Explore the possibility of customization to make our users feel lived in their Coda workspace.

Strategy

Product Strategy, Monetization
Design

Product Design, UI/UX Design
Company

Coda
Tools

After Effects, Figma, Coda

what is coda

All-in-one doc. Everyone gets their way.

Coda comes with building blocks—like tables and buttons—and time-saving templates, so your doc can grow and evolve with the needs of your team. With customizable views, your Trello-loving designer and Gantt-head PM can work off the same data, in their own preferred way. Learn more…

A few of the 25,000+ teams that run on Coda.

overview

Coda now belongs to you. For real.

Customize your workspace for your team for a new Coda experience. From branding to layout.

Play Video

concept

“Home” for teams means belonging and versatility.

To get started, we’ve been doing competitive analysis to explore what “lived in” is in the context of teams, and concluded that it means a sense of belonging. It can be team spirit or team branding. Secondly, a typical home is customizable, things are easy to find, can help with team rituals, and it’s a hub for teams.

* CFT Law 1: Products for life make people feel more lived in than for work.
* CFT Law 2: Low emergency level products make people feel more lived in than high emergency level products
* CFT Law 3: For a certain use, Highly customizable products make people feel more lived in than low-flexibility products

why branding

Our clients are asking for a more branded Coda.

Spotify told us they want to build their OKR tool using Coda, but currently it’s not feeling branded for Spotify like a native tool. Following this, we conducted a short survey. we collected 57 answers of 1,300 users from VSB (Very Small Business), SMB (Small-Medium Business), and Mid-Market, and 26 of 57 participants voted for branding. That means 46% of users want their workspaces to be branded.

To create brand awareness for increasing market share/sales

Better adoption throught the organization for productivity

Users feel ownership of Coda, for us to increase Coda customer loyalty

CUSTOMIZATION ONBOARDING

A new experience for branding Coda workspaces.

For new workspaces, I’m brining a new customization onboarding that helps admins brand their workspace when they create it. This will give them a new mindset that branding can help their team in different ways.

Subdomain

Subdomain makes their workspace branded, but it’s still under Coda. It won’t cause a lot of problems in sharing docs across teams because users will know they’re using the same platform.

Workspace Avatar

We allow team admins to upload a team avatar, and it can be their team/company logo.

Workspace Banner

We allow team admins to upload a branded banner image for workspace background.

Accent Color

We will suggest a color in our system based on their workspace avatar and banner.

color study

Make Coda brandable but still show Coda’s identity.

Many of our clients don’t have a big set of branding colors; instead, many of them have one spot color for branding, and the rest part is black and white. However, we have a brand color scheme that helps establish Coda’s personality as a product. I made a decision to use Coda’s color scheme for accent color theming, and our users can select a color that’s close to their branding color.

Color Themes

Teams can select a color that’s close to their branding color.

Dark Mode

Accent color has great compatibility with dark mode.

homepage

Our clients are urgently in need of a versatile homepage.

We’ve been thinking about the idea of replacing the current homepage that is doc list only. From the same research, we found that 63% of users requested and think widgets are important to them.

Why?

Manage members/docs efficiently for admins
Team rituals/check-ins
Make homepage versatile
Remove unused parts
…

0%

Requested and think widgets are important to them

doc view

Make team docs branded and more distinguishable.

We can give them a sense of branding to show external customers, encourage teams to set their branded covers, help distinguishing internal teams and their docs easily, and improve readability by making docs look separated. We also potentially allow people to define cover photos at the workspace level.

widget line-up

Widgets are just highly customizable like a Coda doc.

We provide different kinds of widgets that everyone can choose they need. This can satisfy users in different roles and levels.

For admins

An admin can use widgets to manage team to-dos, memebers.

For members

Most team members care about docs relevant to them, so they can utilize the “For Me” widget.

folders

Folders as team hubs for large organizations.

In large organizations, there are usually many internal teams. If they use the same workspace, internal teams will need separate team spaces. In Coda, our concept for folders is channels, so folders is our opportunity to create sub team spaces. We provide a ligher banner for the folder, with selected widgets for folders, like pinned docs, members list, internal team check-ins, and docs in the folder.

REFLECTION & SUMMARY

Framing problems and business stragetic thinking.

Customization for teams is a project that’s based on an existing product. Prior to this project, I spent a long time understand Coda as a product, including how it works, its use cases, and existing customers. I was in the Business Platform team, and it’s challenging to balance user requests and our business strategy, especially I need to consider existing resources for research and design. I was inspired by Shishir Mehrotra’s Eigenquestions: The Art of Framing Problems. This helped me in decision making when we have brainstorm sessions and design exercises in the design team.

Back