Case study · Komunitná appka

↳ Produkt · UX · UI · Design systém

Jedno miesto namiesto
piatich rozhovorov.

Komunity a spolky doteraz držali pokope WhatsApp skupinami, Excelom a nástenkou vzadu pri dverách. Navrhli a postavili sme appku, ktorá to nahrádza jedným miestom — na webe, iPhone aj Androide.

Product · UX · UIRola

Web · iOS · AndroidPlatformy

Next.js · Expo · SupabaseStack

V prevádzkeIteruje sa ďalej

Domovská obrazovka appky KomunitaZvon s prehľadom vecí na vybavenie a nadchádzajúcich akcií — **Domov.** Zámerne nie nástenka noviniek, ale zoznam úloh — „Na vybavenie" hore ukazuje presne to, čo musí rada dnes doriešiť.

↳ 01 — Kontext

Komunita nie je firma — ale potrebuje rovnaký prehľad.

Komunita Zvon má desiatky členov, desiatky dobrovoľníckych služieb (hudobníci, technika, upratovanie), skupinky, pravidelné aj jednorazové akcie — a popri tom bežia kurzy a poradenstvo pre ľudí, ktorí do komunity vôbec nepatria. Predtým to všetko držali pokope čiastočne funkčné nástroje: WhatsApp na dohadovanie služieb, Excel na zoznamy účastníkov kurzu, papier pri dverách na prihlasovanie sa na brigádu.

Zadanie nebolo „spravme appku". Bolo to: navrhnúť dva oddelené, ale prepojené svety — členov komunity a externých účastníkov programov — tak, aby si nikdy neprekážali, no aby sa dali prepojiť tam, kde to dáva zmysel (napr. člen komunity vedie kurz pre cudzích ľudí).

2nezávislé svety používateľov — členovia a účastníci programov

3platformy súčasne — web, iOS, Android

1chatový systém pre event, službu, skupinku aj kurz

0appiek navyše na inštaláciu

↳ 02 — Riešenie

Tri rozhodnutia, ktoré nesú celú appku

Každý modul má zodpovedať na otázku, ktorú si komunita reálne kladie — nie zrkadliť štruktúru databázy.

01Kalendár

RSVP + obsluha akcie

Akcia nesie nielen dátum, ale aj kto sa jej zúčastní a kto ju v ten deň obsluhuje (zvukár, moderátor). Prihlásenie do služby automaticky nastaví aj RSVP — netreba to robiť dvakrát.

02Adresár

Členovia s viditeľnosťou po poliach

Telefón, adresa či narodeniny — každý člen si sám nastaví, čo z toho ostatní v komunite vidia. Appka to rieši na úrovni jedného poľa, nie celého profilu.

03Chat

Jeden systém, štyri kontexty

Event, služba, skupinka aj kurz majú vlastný kanál so správnym prístupom — bez toho, aby appka musela mať štyri rôzne chatovacie obrazovky.

Kalendár akcií so zoznamom a mini-kalendárom — **Kalendár.** Zoznam podľa mesiaca vľavo, orientačný mini-kalendár s bodkami aktivity vpravo.

Detail akcie s možnosťou odpovedať Idem/Možno/Nejdem a tabmi Prehľad, Obsluha, Dokumenty — **Detail akcie.** RSVP, obsluha a dokumenty pod jednou strechou; tento event je navyše otvorený aj pre externých účastníkov.

Zoznam členov komunity so zručnosťami a príslušnosťou ku skupinke — **Adresár.** Hľadanie podľa mena aj zručností, badge príslušnosti ku skupinke či službe.

Profil člena s bio, zručnosťami, telefónom, adresou a skupinkou — **Profil člena.** Len polia, ktoré daný člen zviditeľnil; appka nikdy nečíta osobné údaje priamo, len cez pohľad, ktorý toto pravidlo vynucuje.

Zoznam chatových kanálov zoradených podľa poslednej aktivity — **Chaty.** Jeden zoznam kanálov naprieč eventmi, službami, skupinkami aj programami, zoradený podľa aktivity.

Zoznam dobrovoľníckych služieb s tlačidlom Požiadať o vstup — **Služby.** Vstup do dobrovoľníckej služby ide cez žiadosť a schválenie, nie automaticky.

↳ 03 — Design systém

„Ohnisko UI Kit"

Appka rástla obrazovku po obrazovke skôr, než mala jednotný vizuál — farby, medzery aj typografia sa naprieč webom, mobilom a portálom rozchádzali. Postavili sme zdieľanú komponentovú knižnicu naprieč všetkými troma appkami: farebné tokeny, typová škála, konzistentné odsadenie a jedna sada ikon namiesto emoji ako ikoniek.

Dôraz bol na to, aby tmavý režim naozaj fungoval — nielen na spodnej lište, ale v celom obsahu obrazovky — a aby appka zostala čitateľná aj pri zväčšenom písme v prehliadači, preto je celá typová škála v rem, nie v pevných pixeloch.

brand-600bgpaperinkmutedline

Zoznam skupiniek — Skupinky — rovnaký kartový vzor ako Služby, komponenty zdieľané naprieč appkou.

Bilingválne stránky komunity — Stanovy, Poslanie, Členské poplatky — Komunita — bilingválny obsah (SK/EN) s vlastnými prílohami pre každý jazyk.

Prihlasovacia obrazovka appky — Prihlásenie — bez hesla, cez odkaz alebo 6-miestny kód v e-maile.

Domovská obrazovka appky v tmavom režime — **Tmavý režim.** Tie isté tokeny, prevrátená hodnotová škála — kontrolované na reálnych obrazovkách, nie len na komponentoch v izolácii.

↳ 04 — Pre radu

Čísla, ktoré rada predtým nemala odkiaľ vziať

Admin časť pre radu komunity dostala vlastnú sekciu reportov — účasť na akciách, obsadenosť kurzov, aktivita v službách, rast členstva aj odhad príjmu z programov, s CSV exportom pod každým. Navyše voľná otázka v prirodzenom jazyku, ktorá si sama vyberie spomedzi vopred pripravených, dáta komunity rešpektujúcich funkcií — appka nikdy nepustí AI k voľnému SQL.

Administrácia programov so stavom publikovania a čakajúcimi žiadosťami — **Programy.** Prehľad kurzov a poradenstva podľa mesiaca, stav zverejnenia na jeden klik.

Stránka reportov s poľom na voľnú otázku a prehľadmi obsadenosti programov — **Reporty.** Sedem pripravených prehľadov plus prompt na voľnú otázku o dátach komunity.

↳ 05 — Mobil

Rovnaké rozhodnutia, menší priestor

Členovia komunity žijú v natívnej iOS/Android appke, nie v mobilnom webe. Rovnaký informačný model ako na webe — „na vybavenie" hore, kalendár pod tým — len prerobený na palec, nie na kurzor.

Mobilná domovská obrazovka appky — Domov (iOS)

↳ 06 — Výsledky

Stav appky dnes

Hotové a v prevádzke:

Multi-tenant appka s izoláciou dát na úrovni databázy — pripravená na druhú aj tretiu komunitu
Jednotný design systém naprieč webom, mobilom aj portálom, vrátane skutočne funkčného tmavého režimu
Reportingová sada pre radu s CSV exportom a promptovým vyhľadávaním
Push a e-mailové notifikácie na pozadí, vrátane webových push pre externých účastníkov bez appky
Prihlásenie do služby automaticky rieši aj RSVP na akciu — jeden úkon namiesto dvoch

Produkt aj dizajn v jednej osobe — od prvého wireframu po appku, ktorú si komunita dnes reálne poklikáva.

Ďalšie práce
Späť na Case studiesZobraziť všetky →

Jedno miesto namiestopiatich rozhovorov.