Fundia - ako sme postavili online vzdelávaciu platformu

Navrhli a postavili sme online vzdelávaciu platformu pre stredoškolákov - kurzy rozdelené do krátkych lekcií a vlastný editor, v ktorom tím Fundie tvorí interaktívny obsah lekcií.

Informácie

Typ projektu

Online vzdelávacia platforma s vlastnou administráciou obsahu

Čo sme dodali

Produktový návrh, UX/UI dizajn a full-stack vývoj

Odvetvie

EdTech, vzdelávanie

Stav

V produkcii

Kde to nájdete

fundia.sk

O platforme

Fundia je online vzdelávacia platforma, ktorá primárne mieri na stredoškolákov a maturantov. Študent má na výber z viacerých kurzov, vyberie si ten, ktorý práve potrebuje, a prechádza ho lekciu po lekcii.

Materiálov na internete je pritom veľa, no študent v nich stráca čas. Videá aj skriptá idú zoširoka, veľa vecí opakujú a to podstatné je roztrúsené na desiatich miestach. Kurzy na Fundii preto stoja na opačnom princípe: bez omáčok a presne v rozsahu, ktorý maturant naozaj potrebuje vedieť.

Platforma mu pritom ukazuje, ako napreduje - nechýba séria dní učenia, denný cieľ ani odznaky za dosiahnuté míľniky.

Druhou polovicou produktu je administrácia, v ktorej tím Fundie sám tvorí kurzy a články. Nový obsah tak vzniká v prehliadači, nie v tickete pre programátora.

Výzva

Vzdelávacia platforma na prvý pohľad pôsobí ako „web s článkami“. Pri vývoji sme však narazili na niekoľko problémov, ktoré bežný web nerieši:

• Obsah, ktorý nie je len text. Lekcia potrebuje vykresľovať matematický zápis v LaTeXu, striedať rôzne typy obsahu v ľubovoľnom poradí a niesť aj interaktívne simulácie či testy. Bežné CMS to riešia rozšíreniami od tretích strán, ktoré sa nedajú prispôsobiť na mieru, takže autor potom skončí pri vkladaní obrázkov namiesto skutočného obsahu.
• Študent, ktorý sa vráti aj zajtra. Samotný obsah človeka pri učení neudrží. Platforma preto musí vedieť, kde presne sa študent v kurze nachádza, koľko z lekcie už má za sebou a čo ho čaká ďalej, odmeniť ho za pravidelnosť odznakmi a sériou a dať mu možnosť s obsahom naozaj pracovať, nielen ho čítať. Znamenalo to sledovať pokrok na úrovni jednotlivých častí lekcie a tieto dáta dostať do rozhrania tak, aby sa nestali ďalšou brzdou pri načítaní stránky.
• Rýchly web nad živým obsahom. Verejné stránky musia byť rýchle a dobre indexovateľné, no obsah sa mení denne. Museli sme teda vyriešiť, čo sa predgeneruje a nacachuje, ako dlho smie cache žiť a hlavne kedy sa má sama zneplatniť, aby sa úprava v administrácii prejavila na webe do pár sekúnd a bez nasadenia novej verzie.
• Produkt, ktorý bude rásť. Od začiatku bolo jasné, že pribudnú nové typy obsahu, predmety aj platené kurzy. Architektúra to musela uniesť bez prepisovania.

Cieľ: postaviť platformu, na ktorej autori tvoria bohatý obsah samostatne, verejný web je rýchly a celé riešenie sa dá ďalej rozširovať bez veľkých zásahov.

Ako sme to postavili

Obsah ako stavebnica

Kľúčovým rozhodnutím bol dátový model. Lekcia nie je jeden dlhý text - kurz sa delí na lekcie, lekcia na sekcie a sekcia na bloky: text, obrázok či video. Autor ich skladá v ľubovoľnom poradí a každý typ bloku sa vykresľuje vlastným komponentom.

Vďaka tomu pridanie novej funkcie neznamená prestavbu systému, ale nový typ bloku. Rovnako jednoducho sme doplnili stavy obsahu (koncept, pripravujeme, publikované) aj úrovne prístupu, ktoré sú pripravené na budúce predplatné.

Vlastný editor namiesto hotového CMS

Najväčšou technickou výzvou bol editor. Postavili sme ho na TipTape a doplnili vlastné rozšírenia, ktoré odborný a interaktívny obsah potrebuje. Autor tak skladá lekciu z hotových prvkov a nemusí nič obchádzať cez obrázky.

Kľúčové je, ako sa obsah ukladá. Lekcia nie je uložená ako hotové HTML, ale ako štruktúrovaný dokument: strom prvkov, kde každý odsek, vzorec či poučka nesie svoj typ a vlastnosti. Obsah tak nezávisí od toho, ako práve vyzerá web.

Má to tri praktické dôsledky. Editor aj verejný web čítajú ten istý dokument, takže autor vidí presne to, čo dostane študent. Zmena vzhľadu je vecou komponentov, nie prepisovania stoviek uložených lekcií. A keďže obsah je dátová štruktúra, dá sa použiť aj inde, napríklad v blogu, kde beží ten istý editor.

Administrácia

V administrácii tím spravuje kurzy, lekcie a blog, nahráva médiá a na prehľadnom dashboarde sleduje, ako sa platforma používa. Rozhranie sme postavili na prístupných komponentoch Radix UI s vlastným dizajnom.

Spätná väzba priamo pri obsahu

Autor obsahu potrebuje vedieť, ktorá lekcia funguje a pri ktorej študenti odpadávajú. Na konci každej lekcie sa preto študenta opýtame, ako sa mu páčila, a hodnotenie sa uloží k danej lekcii. Zaberie to jeden klik, takže odpovedí je dosť na to, aby z nich vznikol použiteľný signál.

Tím Fundie potom v administrácii vidí priemerné hodnotenie aj počet odpovedí pri každej lekcii a rebríček tých najlepšie hodnotených. Spätná väzba tak nekončí v tabuľke, ale rovno ukazuje, ktoré lekcie a sekcie prepísať alebo doplniť.

Druhým zdrojom je samotné používanie platformy. Popri hodnoteniach sledujeme, ako sa študenti v obsahu správajú: koľkí lekciu začnú a koľkí ju dokončia, pri ktorej sekcii postup zvyčajne končí a ku ktorému obsahu sa naopak vracajú. Tím tak vidí nielen to, čo študenti povedali, ale aj to, čo naozaj robia, a podľa toho vie obsah upravovať.

Prečo nie hotové riešenie

Hotové riešenie by prvé mesiace ušetrilo, no každá ďalšia požiadavka by narážala na jeho hranice. Vlastné riešenie stojí na blokovom modeli obsahu a editore postavenom na mieru, takže platforma sa vie meniť spolu s tým, ako sa mení jej obsah.

Výsledok

Dodali sme kompletnú platformu - od verejného webu s kurzmi až po administráciu, v ktorej vzniká obsah. Tím Fundie dnes má:

• rýchly verejný web s kurzmi a blogom,
• editor, v ktorom sám tvorí interaktívne lekcie,
• administráciu s prehľadom o tom, ako sa platforma používa

Výsledkom je platforma, ktorú tím Fundie rozširuje bez závislosti od vývojárov, a architektúra pripravená na ďalšie predmety, interaktívne simulácie aj predplatné.

Tech stack

Technológie, na ktorých platforma stojí:

Podobné projekty

Fintech · Účtovníctvo · B2B

Firemný informačný systém, ktorý šetrí hodiny administratívy

Prečítať case study