Case study: NodeBB Harmony theme

Overview

NodeBB is the forum software – you might be surprised to know that forums pre-date blogs, social networks and smartphones. NodeBB itself was born in 2014.

I've been working with NodeBB team to create a new default theme.

Roles

  • Prototyping;
  • Design system development;
  • UI design;
  • Front-end development.

The previous theme evolved without the oversight of a designer, and did not have a consistent style guide. It also started to feel outdated, due to its age.

NodeBB - previous theme

We discussed the project requirements, preferences and limitations, and the work has started. There has been a lot of research, analysis, discussions and experiments; I wrote dozens of documents!

Notion - Journal Notion - Sample article

After we identified the areas for improvement, the time has come to open Figma.

NodeBB design in Figma

To present my ideas to the team, I used Figma's prototyping features a lot. Below is a screencast of one such prototype, showcasing various ideas: collapsible sidebars; unified pop-up designs for search, chats and notifications; etc etc.

Later, for more complex prototypes and also for better developer handoff, I re-created the design system in code (using Tailwind CSS). It allowed me to prototype many pages faster.

NodeBB Prototype NodeBB Prototype NodeBB Prototype NodeBB Prototype NodeBB Prototype NodeBB Prototype

Take a look at the Harmony theme in production at community.nodebb.org.