Zapchat: A Nostr App Design

Nostr-specific UX/UI for conversations and monetization around any content type, using interoperable communities.
Zapchat: A Nostr App Design

This design system has two goals:

  1. Being the basis for the development of a design-first, native Nostr app focused on exceptional zapping and chatting, relay-based communities and beauty
  2. Serving as inspiration for builders that need coherent UI building blocks for their own apps with a different scope but overlapping needs (chats, threads, zaps, articles, highlights, events, wikis, …)

Design System

Check it out here.
This is by no means finished and will be continually updated and completed as we go along.

Project description

Check it out here

Niel Liesmons
Dec 12, 2024 13:33

Value Proposition

Exceptional zapping & chatting

  • Converse on anything
  • Value-for-Value on anything
  • Interoperable, monetizable communities

  • Niches with reach
  • Organic discovery, maximal edge effect
  • Price lists / micropayments all the way down
  • Onboards people to Keys, Relays & Money

  • Engaging, visual Key generation and handling
  • Relays (+ Media servers) as Communities and Hosting solutions
  • Money as Community banks
  • Premises & Philosophy

    Chat is the universal interface

    This is true in two ways:

    1. Action vs Reaction (or very similarly Input vs Output) is the most basic UX pattern of any software

    2. Chat is the only content type that is by default constrained to the Community / Group only. Other content types can be published in multiple communities/groups at once. This makes Chats the content type that is most universally useful to any Community / Group.

    Nostr is omnivorous

    1. It will eat most content types.

    2. It gives all those content types a reply section, a way to get zapped, a unique universal identifier, …

    Nostr incentivizes owning a relay

    Having your own relay (+media server) is the most efficient way to stack an infinite list of desirable features with the simplest UX:

  • speed
  • privacy
  • computation
  • un-ruggabilty and back-ups
  • sharing specific content exclusively with a specific set of profiles
  • People naturally organize around common interest and goals (i.e. Communities)

    Different types of communities use different content types

    Interoperability thrives on simple building blocks and big, blurry edges

    Quality > Quantity

    In terms of Product:

  • Testing is 50% of the work
  • Prototypes aren’t Products
  • Regarding Customers

  • 100 true fans > 100K uninvolved sheep
  • Cashflow fast

    Mistakes are cheaper on paper

    Walk the talk. Eat the dog food.

    Win-Lose isn’t profitable without slaves

    Design Patterns

    Chat UX

  • Swipe left-right + Long press actions
  • Readable, conversational threads
  • Bottom Bars

  • Access to main actions
  • Slide-up modals only
  • Tabs

  • Displayed under most publications to access different aspects of it (longer content, replies, shares, public bookmarks, details, … )
  • Every tab looks like a button, because it is a button (long-press if needed)
  • Travel Back

  • Granular control over what you want to go back to
  • A way to go back all the way to the home screen in one action
  • Emoji icons

  • Easiest icons to be interoperable on
  • Audience

    Customers

    Devs and early Nostr power users that:

  • have sats
  • use Android (mobile) and native chat apps on Mac / Linux / Windows (desktop)
  • need and use chats with swipe actions, reactions, GIF’s, …
  • are readers
  • are excited about Nostr as a communal knowledge base
  • are curators
  • are collaborators, not lone wolves
  • are creators (app builders, writers, designers, ..)
  • don’t fit into a neat little iNfLuEnCoR box of things they publish about
  • value targeted publication
  • want apps to work offline / in airplane mode
  • appreciate beautiful design
  • Customers of Customers

  • know how to use chats
  • know how to read their inviter's instructions in the chat (if needed)
  • The No-No lIst

    Things Zapchat will not have, do or show:

    An official website

    Instead: Zapchat Npub + Community + Signed releases + Stories + ...

    NIP-05 handles

    Instead: Npub and Colour + Imposter warnings

    Slave terminology: Accounts, Log In, Sign Up, …

    Instead: Profiles, Get Started, Secret Key, Public Identifier, ...

    Kind-1 reply sections

    Instead: Kind 1111 generic replies

    Reposts

    Instead: Sharing to different Communities, Quotes, Highlights, …

    Non-Nostr Link previews

    Instead: Purple URL, that’s it

    Lists for Follows, Bookmarks, …

    Instead: Labels, Relationship statuses, …

    Grants, VC money

    Instead: Business model with early cashflow

    A global onboard flow

    Instead: Focus on Invites (personal and community)

    Marketing as a Nostr or Bitcoin app

    Instead: Excellent tool for community chat

    Monetization

    Hosting, Compute & Privacy

    Zapcloud

    Offer or partner with an all-in-one hosting solution that combines:

  • Relays
  • Blossom media servers
  • optionally: Community Lightning node / cashu mint
  • optionally: Private Computation
  • Pay per use of:

  • Storage
  • Bandwidth
  • Charge a high enough price because:

  • The infrastructure is independent (i.e. not Amazon/Google/...)
  • Early adopters happily pay extra for scarce products/services
  • Publication tools

    Zapstore

    Collaboration with Zapstore as a tool for releasing and monetizing App releases

    Zaphunter

    Service that computes for you where your publication is probalisticly most valued (i.e. zaps, conversation around it, …)

    Community

    Zaplab

    https://chachi.chat/zaplab.nostr1.com

    Publicly readable community where the Zaplab crew walks the talk, gets feedback, builds, markets and ships the app releases (and dev packages).

    Write access will have a price list.

    App Releases & Other publications

    Value-for-Value

    Zapwalls

    Only releasing X publication after XX amount has been zapped

    Merch

    Zaphats

    Marketing

    Community

    Building in public in the Zaplab (and other overlapping communities):

  • Targets the exact customers we're going after
  • Proves the value prop of the app
  • Keeps us honest
  • Invites

    Nothing involves new users like a personal invite to a scoped community.

    App Releases

    Published on Nostr (zapstore, …) with a monetized conversation around it.

    Profile & publications

    The Zapchat npub, The Zapcats community, ...

    Fun Nostr stuff

  • Emoji pack
  • GIFS
  • Memes
  • Feature Roadmap

    General plan

    Priotize that which fosters:

  • Collaboration of the team
  • Early cash-flow
  • Steps

    1. Monetizable relays

    2. Chat

    3. Posts

    4. Repos

    5. Wikis

    6. Articles

    7. Stories

    8. Products

    Tech Stack

    Main language & Framework

    Dart, Flutter

  • It draws the pixels
  • It’s neat and incentivizes having clear building blocks (widgets) all the way down
  • It has very limited third party dependencies
  • Logic & Heavy lifting

    Golang

    Hypernotes: Widgets, Stories, ...

    Nostache: {{Mustache}} templating + Nostr functionality

    Most prominent NIP’s and event kinds

  • General replies
  • Kind 1111
  • Relationship Status
  • NIP-81, kind 30382 and 31382
  • Relay info, pricing, services
  • NIP-66 and a highly needed new "Spin up a relay"-service NIP
  • Team

    Get in touch on the zaplab.nostr1.com relay 🎉

    This is a very first bullet-point-style draft to set the tone and is open to change, hence it being a wiki.

    Explanatory videos

    This list of videos will also be continually updated and completed as we go along:

    1. Chat as the universal interface
      https://cdn.satellite.earth/43ccc6224a373dd22b7ae92edb70a0b9a3facabef27dff037de7f4fcf3ee7f37.mov

    2. Your Nostr Dashboard
      https://cdn.satellite.earth/20fa9683dbf815c7deafa8a532c1d1e99cddbaac622fbf075b33b70fb0bdef22.mov

    3. Keeping Tabs on all these Content types https://cdn.satellite.earth/a15ab05b55db1787349863f0f92c465dcde828b90c2cb61a92bd712a0012e9c6.mov

    4. Design entered the Chat
      https://cdn.satellite.earth/7c25215262125562c847412c0d9a7d027e087028838204b6c447b5c07830979a.mov

    5. Targeted publication & The blurry edges of interoperable communities
      https://cdn.satellite.earth/160c9431f53e7be108ad37f8d368e2af840690a8a936d1caaa68b468c9b1e0a9.mov

    6. Travel Back
      https://cdn.satellite.earth/36d38027e6208e91c1fa27b0560f70fbad7d3e31c22d659c9a53a5c4cf90a876.mov


    No comments yet.