Coda Community

This was a 2-week project I completed during the end of my summer at Coda.

Role

Product Designer

timeline

Sept 2021

Team

Me (Design)

+ Community Manager

+ Design Team Support

+ Brand Team Support

Tools

Figma

What is the Coda Community?

The Coda Community is a space for Coda power users to collaborate and share their work and knowledge of the product. Here, makers (Coda users) can search for answers, troubleshoot a problem with fellow makers, create a topic for discussion, browse posts, and learn how to use Coda through the assistance of the community.

The current community page, built on Discourse.

problem

The current community page doesn’t feel welcoming for people new to Coda.

The current community page hasn’t been redesigned since it was first created, and is outdated and difficult to navigate, especially for new visitors. As the go-to page for anyone who has any questions or thoughts about Coda, our community page should reflect both our branding and our attention to a great user experience, and for this happen, the current community page needed quite a number of improvements.

Who is this for?

Experienced makers

People learning Coda

Community Champions

But right now the community page experiences activity mainly from experienced makers, and not so much from people new to Coda . . .

As someone visiting the Coda Community, I want to:

1. Know where I am
2. Know how to search in the community
3. Feel excited about Coda

To ensure I explored designs in the right direction, I made sure I wrote out and understood the intended outcomes for people visiting the community page.

Outcome

A more vibrant community that feels distinctly Codan.

Although I didn’t have a ton of time to work on this project, I focused heavily on using visual elements to create a community page that felt more welcoming. Feedback received during design critique provided a lot of opportunities for quickly iterating and improving.

Homepage

Redesigned

For the home page, I heavily incorporated our updated brand colors to emphasize Coda’s identity. I also added illustrations at the top of the page to further highlight the search box, which I deliberately placed at the top to encourage information-seeking for people new to the Coda Community.

Categories Page

To make it easier to navigate the community page, I added a categories page using the icons we use in product.

Post Page

Search Results

About Page

Learnings

Seek feedback early and often.

Since I completed this project under a pretty tight time crunch, it was super crucial to frequently seek feedback instead of waiting for scheduled design critiques and other meetings. Sharing asynchronously using tools like Loom helped me iterate as quickly as possible and make sure everyone was on the same page as me as I designed.