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

image::https://cdn.satellite.earth/596850538c6476dae7f4193028de4688eeb24a3928a4b9555fab464f976a03a7.png[]

= 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


Write a comment
No comments yet.