Skip to content
  1. Work
  2. NOD Messaging app
ScrollConvinced?Book a call

Start a project

Have an idea? Send it over and we'll come back with an honest quote.

Start a projectSend an email

Index

  • Home
  • Work
  • Services
  • About
  • Contact

Socials

  • Dribbble (opens in a new tab)
  • LinkedIn
  • Instagram
  • GitHub
  • X (Twitter)

Catalyst Design Lab

Catalyst Design LabCatalyst Design Lab
Designed with science and love

TangierGMT--:--:--

© 2026 Catalyst Design Lab
CCaattaallyysstt DDeessiiggnn LLaabb0 %

NOD Messaging app

A messenger for people who run projects, with the tools inside the chat.

Try the prototype (opens in a new tab)Book a call
nod-messaging.vercel.app
NOD prototype landing page: 'Talk it through. Keep what matters.' above a phone showing the app
9:41
NOD inbox with project chats, unread counts and tabs for Chats, Mind, Dashboard and Explore
Client
NOD
Role
Product design in Figma and the interactive prototype for testing
Team
3 front-end developers, 1 project manager
Timeline
6 months, ongoing
Prototype
nod-messaging.vercel.app (opens in a new tab)

Overview

The work happens in the chat, so the tools live there too

Teams plan in group chats, then lose decisions, tasks and money in the scroll. NOD keeps them in the conversation, and Mind keeps what matters after the chat moves on.

  • The problem

    Group chats are where projects get planned, and where decisions, tasks and payments get lost.

  • What we did

    We designed NOD in Figma and built a live prototype that behaves like the real product, for testing with people.

  • The result

    A prototype two people can use together in real time, with every core flow working.

Context

WhatsApp meets Pinterest

NOD is a messenger for people who run projects. Every team gets a space, and the things projects need, like polls, checklists, boards and payments, live right in the thread.

Mind is the other half. You can save anything from a chat, organise it into collections the way you would on Pinterest, and send it back into any conversation.

Constraints

  • Familiar enough that nobody needs a tutorial
  • Capable enough to replace a separate project tool
  • Testable with real people long before the production app ships

Key decisions

4 choices that shaped the design

  1. Cards, not links

    Polls, checklists, project boards, plans, reminders, payments and bills are live cards in the thread. People vote, tick things off and settle up without leaving the conversation.

    Instead of Links out to separate tools.

    9:41
    A NOD team chat with channels and a live poll card: 'Standup time?'
  2. Mind as memory

    Anything worth keeping can be saved from a chat into Mind, organised into stacks with list, grid or shelf views, and found again later.

    Instead of A 'starred messages' list.

    9:41
    NOD Mind: collections of saved items shown as a grid of cards
  3. Sharing people already understand

    Collections share like a Google Drive file: view, edit, anyone with the link, or make a copy. Before sending one into a chat, NOD asks whether to give the people in that chat access.

    Instead of A new permission model to learn.

    9:41
    NOD share sheet with people, view or edit access, and link settings
  4. A prototype that behaves like the product

    The prototype works in real time between two browser tabs, keeps drafts and attachments, and reads receipt photos for bills. Tests and demos feel like using the app, not clicking through slides.

    Instead of A clickable Figma prototype.

    9:41
    A NOD direct message with a project board card showing to-do, doing and done

Prototype

Try the prototype

Try this first

  1. 01Open a project chat
  2. 02Vote in the poll
  3. 03Save something to Mind
  4. 04Share it back into a chat

Open it in a second tab to chat with yourself.

Open in a new tab (opens in a new tab)

Screens

More screens

9:41
NOD inbox with project chats, unread counts and tabs for Chats, Mind, Dashboard and Explore
9:41
A NOD direct message with a project board card showing to-do, doing and done
9:41
A shared Mind collection arriving in a chat as a live card

Process

How it was made

Our part is the product design in Figma and the live prototype used for testing. The production app is built by NOD's front-end team.

Tools
  • Figma
  • Next.js
  • React
  • Real-time between tabs
Product design and interactive prototype

Catalyst Design Lab

Front-end engineering

NOD team, 3 developers

Project management

NOD team

Outcome

A prototype two people can use together in real time, with every core flow working.

  • 66months of product design, ongoing
  • 88kinds of live cards in the thread
  • 22people can test it together in real time
Open the prototype in a new tab (opens in a new tab)
  1. Overview
  2. Context
  3. Key decisions
  4. Cards, not links
  5. Mind as memory
  6. Sharing people already understand
  7. A prototype that behaves like the product
  8. Prototype
  9. Screens
  10. How it was made
  11. Outcome
Next projectGattaca GenomicsMaking embryo science feel human.
Gattaca home page: 'Pioneering the future of genetic innovation' over a blue ripple, with a clinical-trial announcement