Sections

Koios: Building a Decentralized Learning Platform for 300 Students

4 min reading time
Phil Wornath
webdevelopmentproductdesignblockchainedtecheducation

The Name: Koios

The name "Koios" comes from Greek mythology, where Koios was the Titan of intellect and understanding. His name derives from the Greek word meaning "to perceive" or "to question" - perfectly fitting for a platform designed to facilitate learning and intellectual growth. Just as the ancient Titans represented fundamental knowledge, Koios the platform serves as a foundation for educational discovery.

The Challenge: Scaling Education for 300 Students

The Hague University needed a learning platform for their "Introduction to Blockchain" minor program. With 300 students across different devices and time zones, traditional platforms were too rigid and distracting.

We built Koios - a decentralized learning platform that treats education as a common good, accessible to everyone without barriers.

What We Built: A Platform That Delivers Results

Key Metrics:

  • 300+ daily active users
  • 5 courses running simultaneously
  • Mobile-first design serving emerging markets
  • Responsive across all device sizes

Core Features:

  • Full-screen learning interface that eliminates distractions
  • Dark mode optimized for night-time learning
  • Reward system that encourages engagement
  • Decentralized architecture using IPFS storage

A new codebase gave us new options to make it mobile-first for the emerging markets (Ghana) we work together using more phones in classes. Making it more fun and ethically addictive for the students was another part. also creating learning habits and incentives would back these goals

Technical Innovation: Figma-to-Code Workflow

Custom Figma Integration

When we started, Figma lacked dark mode, variables, and code generation capabilities. We built a custom system that:

  • Converts Figma files directly to working JavaScript
  • Uses custom tags to trigger specific behaviors
  • Maintains design consistency across the platform
  • Reduces design-to-development time from days to minutes

This approach enabled real-time iteration and eliminated the traditional design handoff bottleneck.

Koios Figma Hacking - We already named the buttons in Figma so frontend could distinguish between. Also adding tags like destination screen could map the screen connections designed in figma to the same screen in the app
Koios Figma Converter Tool - We created a tool to convert Figma files to a JSON format that can be used to generate the app code. This way we could use the same design system for the app and the website.
Koios Figma Hacking - We already named the buttons in Figma so frontend could distinguish between. Also adding tags like destination screen could map the screen connections designed in figma to the same screen in the app
Koios Figma Converter Tool - We created a tool to convert Figma files to a JSON format that can be used to generate the app code. This way we could use the same design system for the app and the website.

Technology Stack

  • Frontend: JavaScript, CSS with custom dark mode implementation
  • Design: Figma with custom API integration
  • Storage: IPFS for decentralized content storage
  • Collaboration: Airtable, Miro for remote team coordination
  • Version Control: GitHub

Koios Figma Darkmode - Building a dark mode in Figma was tricky back then - no modes or variables. We had to use a lot of custom CSS to achieve the desired effect but a simple trick helped us getting a headstart: Inverting and defining elements that should not be inverted.

Development Process: Small Team, Strategic Impact

Team Structure

3-person remote team with specialized roles:

  • UX Designer/Researcher (myself)
  • 2 developers
  • Content creators
  • Blockchain experts
  • University lecturers

Our process consisted of ideation, creaton, testing and iterations. Whiteboard (2019, Pre-Covid) were succesde by Lofi prototypes and Hi-Fi prototypes

UX Process

  1. User Research: Direct student interviews and needs analysis
  2. Rapid Prototyping: Paper → Whiteboard → Figma → Code iterations
  3. Heuristic Evaluation: Applied Nielsen Norman's 10 heuristics
  4. Remote Testing: Developed frameworks for remote user testing
  5. Collaborative Design: Miro for ideation, Figma for detailed design
Koios Collaboration in Miro - we mapped user testing to our board- defined the user journey and stories but also the backend. Eveything documented on one board. Small teams allow short distances and fast iterations
We used Teams for remote user testing in unstructured interviews. We mapped user testing to our board- defined the user journey and stories but also the backend. Eveything documented on one board
Koios Collaboration in Miro - we mapped user testing to our board- defined the user journey and stories but also the backend. Eveything documented on one board. Small teams allow short distances and fast iterations
We used Teams for remote user testing in unstructured interviews. We mapped user testing to our board- defined the user journey and stories but also the backend. Eveything documented on one board

Key Challenges and Solutions

Remote Collaboration

  • Developed frameworks for effective remote user testing
  • Implemented collaborative ideation processes using Miro
  • Created structured handoff processes for small teams

Cross-Platform Compatibility

  • Designed mobile-first, starting with iPhone SE
  • Resolved Android browser interface issues
  • Implemented seamless full-screen mode activation

Development Workflow

  • Established non-linear development processes
  • Built close designer-developer collaboration
  • Created component-based design systems

Results: Measurable Impact

  • 300+ daily active users with consistent engagement
  • 5 courses successfully running on the platform
  • Improved UX maturity across the development team
  • Enhanced student completion rates compared to traditional platforms

Future Vision: Community Ownership

Koios is evolving into a Decentralized Autonomous Organization (DAO), where the community will own and operate the platform through democratic governance.

Project Details

Timeline: December 2019 - January 2021
Role: UX Designer & UX Researcher (Part-time)
Tools: Figma with API integration, Airtable, GitHub, IPFS, Miro, JavaScript

Key Learnings

  1. Structured Design Process: Developed systematic approaches to responsive design using Figma
  2. Engineering Mindset: Learned to create production-ready designs that scale
  3. Component-Based Design: Mastered design systems and responsive prototyping
  4. Cross-Functional Collaboration: Bridged design and development workflows effectively
  5. Remote Work Optimization: Created frameworks for successful remote collaboration

"Koios - A place to learn. A place to earn."

Interested in the Figma-to-code workflow? Let's discuss how custom design tools can accelerate development.

Related

Flasq: When Your Water Bottle Becomes Your Work Buddy

PetsetLife - Your Petsitting Toolkit In A World Full of Platforms

SmoothRide

© 2025 Phil Wornath