.png)
HackQuest is a Web3 education platform that enables users to learn Web3 development, earn certifications, publish their own educational content, and participate in community-driven hackathons. The platform brings together learning, creation, and collaboration into a single, scalable ecosystem.
As the Design Lead at HackQuest, I owned the end-to-end UX and UI design of the product. Working closely with a graphic designer and the engineering team, I translated complex product requirements into high-fidelity, responsive designs that supported rapid iteration while maintaining long-term consistency and scalability.
On the B2C side, I designed the complete learning experience from the ground up, including onboarding, course learning flows, interactive quizzes, progress tracking, and certificate issuance. These experiences were crafted to motivate users, reduce cognitive friction, and guide learners from first contact to successful course completion.
In parallel, I led the design of HackQuest’s B2B and creator-facing tools, including UGC course creation systems and hackathon setup and management workflows. These tools enabled instructors, partners, and organizers to build content, run events, and manage participants within a unified platform.
Beyond individual features, I established HackQuest’s design system from scratch—defining core components, interaction patterns, and visual guidelines—laying the foundation for a cohesive, scalable product that could grow rapidly alongside the business.
Status
Launched
▌OVERVIEW ▌
HackQuest is a large-scale Web3 developer education and community platform that brings together structured learning, content creation, real-world projects, and ecosystem collaboration in a unified experience. The product supports diverse user goals across multiple surfaces, including learning tracks, community interaction, job discovery, idea sharing, and event-based collaboration, on both desktop and mobile.
Below are key metrics that highlight HackQuest’s global reach and ecosystem impact before you explore the product surfaces that make up the experience.
725,000+
active users globally engaging with Web3 learning and developer content
52+
global hackathons hosted, with hundreds of projects and builders participating
2.1M+
annual visits to the platform, indicating sustained engagement and discovery
100+
Web3 ecosystem partners, including Solana, Arbitrum, Mantle, and more
20+
structured learning tracks spanning multiple Web3 domains
30,000+
registered developers and builders, showcased in independent award evaluations
▌B2C FEATURE - LEARN ▌
Empowering Web3 Learners with Structured Tracks, Gamified Motivation & On-Chain Credentials
User Profile
Primary learners: aspiring Web3 developers and Web2 engineers transitioning into Web3
Learning goals: build practical blockchain skills, earn recognized credentials, and unlock ecosystem opportunities
Scale: 30,000+ registered learners across global Web3 communities
Design Requirements
Structured learning paths that clearly guide users step by step
Built-in motivation through progress tracking and milestones
Tangible outcomes via ecosystem-recognized, on-chain certificates
HackQuest’s Learn feature is the core educational engine of the platform—designed to onboard users from zero knowledge to real Web3 competence through structured learning tracks, real-world projects, and motivating progress mechanics. Unlike traditional e-learning, HackQuest combines self-guided courses with on-chain certifications, gamified quests, and ecosystem integrations that unlock both technical skills and real recognition within the broader Web3 community.
As learners progress, they are guided through curated paths aligned with major blockchain ecosystems such as Arbitrum, Solana, Mantle, Linea, and more. These tracks are recognized within the ecosystem and often open doors to hackathon participation, job opportunities, and community credentials.
Explore Courses
To help users quickly choose the right learning path, I designed the course discovery experience around two distinct structures: Learning Tracks and Electives.
Learning Tracks offer a guided, sequential journey that reduces decision fatigue and gives learners a clear sense of progression, while Electives support flexible, topic-based exploration for more experienced users.
This structure balances clarity and flexibility, allowing different learner mindsets to navigate the platform with confidence.
Course Syllabus & Progress Tracking
This page is designed to give learners a clear understanding of what they will learn, how the course is structured, and where they currently are. The syllabus breaks down the course into manageable sections, helping users set expectations before they begin.
Throughout the course, learners can track their progress and seamlessly resume where they left off, reducing friction in long-term learning. Upon completion, users can claim a Web3 certificate that serves as a tangible representation of their skills and achievements, reinforcing motivation and closing the learning loop.
Learning Experience
The learning page is designed to tightly couple knowledge consumption and hands-on practice. Core learning content is placed on the left, while examples and quizzes are positioned on the right, allowing users to immediately apply what they learn without losing context.
Learners progress by completing quizzes tied to each knowledge unit, creating a clear sense of completion before moving forward. A chapter dropdown enables quick navigation across sections, while the persistent progress bar at the bottom continuously communicates learning status and momentum.
This layout supports focused learning, reduces cognitive overload, and reinforces steady progress throughout the course.
The End-to-End Learning Workflow
▌B2B FEATURE - TEACH ▌
Enabling Scalable Course Creation for Instructors and Ecosystem Partners
User Profile
Primary users: Web3 instructors, ecosystem partners, and experienced developers
Goals: create and publish structured courses at scale
Context: non-designers building educational content within a complex platform
Design Requirements
Flexible creation tools to support different teaching styles and content types
Clear course structure to ensure consistency across all published content
Scalable workflows that enable partners to create and maintain courses efficiently
The Teach feature enables instructors, educators, and Web3 ecosystem partners to create, structure, and publish courses on HackQuest. Rather than treating teaching as simple content upload, this feature was designed as a course creation system that supports consistent learning quality while remaining flexible for different teaching styles.
My focus was to lower the barrier for course creation while maintaining platform-wide standards. This required translating complex instructional needs into intuitive tools that allow non-designers and non-technical users to plan curricula, organize content, and publish courses that seamlessly integrate into HackQuest’s learning ecosystem. Meanwhile, admins are able to review and approve/disapprove instructors' generated contents.
Instructor Dashboard
This instructor dashboard provides a clear overview of all courses across different lifecycle states, including published, draft, unpublished, and under-review courses. Instructors can quickly manage existing content or start creating new courses from a single entry point.
Lightweight metrics such as total courses created and total learners provide immediate feedback on teaching impact, while the message panel surfaces review results and system notifications, keeping instructors informed without interrupting their workflow.
A dark-themed navigation distinguishes the creation environment from the learner experience, reinforcing role-based context switching between teaching and learning.
Course Creation Flow
The course creation flow guides instructors step by step through setting up course information and building individual lessons. Instead of presenting a blank canvas, the system provides pre-built lesson templates—including reading, video, and quiz examples—so instructors can immediately understand the expected structure and content format.
From these examples, instructors can create new lessons by selecting the same content types, ensuring consistency while allowing flexibility. A full set of rich text and media tools supports diverse teaching needs, including images, videos, code blocks, accordions, and structured text elements. Interactive components such as code fill-in and multiple-choice questions enable instructors to design practice-driven learning experiences.
The layout separates navigation and content clearly: a persistent left-side navigation helps instructors manage lesson structure, while the main content area on the right focuses on writing and configuration. This structure reduces cognitive load and keeps instructors oriented as courses grow in size and complexity.
Review & Approval Workflow
This review flow supports HackQuest administrators in evaluating instructor-submitted courses before publication. Admins can navigate through all submitted lessons and exercises, review content section by section, and ensure each course meets platform standards.
The left-side navigation tracks review progress by marking viewed sections, while the main content area displays lesson details and quiz items. Admins can leave targeted comments on individual sections and make a final approval or rejection decision at the course level.
Approved courses are published to the HackQuest platform, while rejected submissions are returned to instructors with clear feedback for revision. This workflow enables consistent quality control while maintaining a transparent and collaborative review process between platform and instructors.
The End-to-End Teaching Workflow
▌MULTI-SIDED FEATURE — HACKATHON ▌
Designing End-to-End Workflows for Events, Collaboration, and Delivery
User Profile
Organizers: Web3 ecosystems and partners creating and managing hackathons
Participants: developers and learners joining events, completing tasks, and submitting projects
Admins: platform operators ensuring smooth execution and quality control
Design Requirements
Role-based experiences tailored to organizers, participants, and admins
Clear event structure that communicates rules, tasks, timelines, and progress
Scalable workflows supporting repeated hackathons with different configurations
The Hackathon feature enables HackQuest to host and operate large-scale, ecosystem-driven hackathons within the platform. Unlike standalone event pages, this feature was designed as a multi-sided system that supports organizers, participants, and platform administrators throughout the entire hackathon lifecycle.
From hackathon setup and task definition to participant onboarding, submission management, and final delivery, the experience connects learning, building, and community engagement into a single, coherent workflow. My focus was to design clear role-based experiences that scale across different hackathons while remaining flexible for varying rules, timelines, and evaluation criteria.
Hackathon Dashboard — Participant View
This dashboard serves as the central hub for participants to manage their hackathon activities. Users can view active and past hackathons, track participation status, and monitor key hackathon stats at a glance.
The dashboard also functions as a set of clear entry points into core actions, including exploring new hackathons, submitting projects for ongoing events, reviewing past submissions, and participating in voting for awarded projects.
By consolidating status awareness and next-step actions into a single surface, this experience helps participants stay oriented, reduce friction, and remain engaged throughout the hackathon lifecycle.
Register & Submit Project - Participant View
This page guides participants through a step-by-step flow to register for a hackathon and submit their final project. The process breaks complex requirements into clear, manageable steps, helping users understand what information is needed and when.
By structuring submission as a guided workflow, the design reduces friction at a critical moment and supports successful project delivery without overwhelming participants, even under tight hackathon timelines.
Voting System — Participant View
Hackathon Voting enables participants to discover active hackathons open for voting and evaluate submitted projects within a structured voting system. Once inside a hackathon, users can review all submitted projects and cast votes based on their assigned role and activity level.
Voting rules and constraints are surfaced clearly on the right side, including role-based voting power, remaining votes, total vote allowance, and a real-time countdown. Users can adjust votes per project with incremental controls or quickly allocate votes using max and min actions.
The End-to-End Hackathon Workflow for Participants
Hackathon Dashboard — Organizer View
This dashboard provides organizers with a centralized view to manage all hackathons they have created, including active, draft, and past events. Organizers can quickly understand the status of each hackathon and take appropriate actions from a single workspace.
The dashboard also serves as the primary entry point for creating new hackathons, supporting efficient setup and ongoing management across multiple events. This structure enables organizers to operate hackathons at scale while maintaining clear visibility into each event’s lifecycle.
Create Hackathon — Organizer View
Hackathon creation is designed around progressive disclosure, breaking complex configuration into clear, step-by-step tabs. The top navigation helps organizers stay oriented as they move through the setup process.
Organizers complete each section with guided inputs and contextual tooltips, reducing uncertainty when defining rules, timelines, and requirements. Clear step transitions ensure the setup remains structured and manageable from start to finish.
Hackathon Management — Organizer View
Once a hackathon is live, organizers are taken into a comprehensive management workspace to operate the event end to end. At a glance, organizers can monitor key metrics such as participant count, team applications, and project submissions to understand the overall health of the event.
Detailed management tasks are organized through role-driven tabs on the left. Organizers can review and approve team applications, track submitted projects, and monitor voting progress during the judging phase. After voting concludes, the same system supports ranking, custom award setup, and final result announcements.
The distribution section provides visibility into traffic and outcome sources, helping organizers understand where participants, submissions, and winners are coming from. This centralized structure allows organizers to manage complex hackathons efficiently while maintaining full control throughout the event lifecycle.
The End-to-End Hackathon Workflow for Organizers
▌DESIGN SYSTEM ▌
I built the HackQuest design system from the ground up, establishing the visual and interaction foundation for the entire platform. This included defining the typography, color palettes, spacing rules, button styles, card patterns, and a complete library of reusable components. By creating a coherent and scalable system, I enabled the platform to grow consistently across new features—ensuring visual alignment, reducing design debt, and allowing the design and development teams to iterate efficiently as HackQuest continued to expand.
