.png)
HackQuest is a Web3 education platform that offers a comprehensive environment for learning Web3 programming. Users can take courses, earn certificates, create and publish their own learning content, participate in hackathons, and even organize new ones, making HackQuest a complete ecosystem for Web3 knowledge, creation, and community engagement.
As the Design Lead at this fast-paced startup, I oversaw the end-to-end UX and UI design of the platform. Working closely with a graphic designer, and the development team, I delivered high-fidelity, responsive designs that supported rapid iteration while ensuring a cohesive and scalable product experience.
On the B2C side, I built the entire learning flow from the ground up. This included designing the user onboarding experience, course learning pages, interactive quizzes, progress tracking interfaces, and the certificate-earning flow. My goal was to create a seamless, motivating learning journey that guided users from their first interaction with the platform to successfully completing a Web3 learning path.
In addition to the learner experience, I also led the design of HackQuest’s B2B capabilities. I designed the UGC course creation tools that enabled instructors and partners to structure, build, and publish their own courses. I also created the hackathon drafting and management system, which allowed organizers to set up new hackathons, define rules and tasks, manage participants, track progress, and successfully complete events within a unified workflow.
Beyond feature design, I built HackQuest’s design system from the ground up. I established foundational components, interaction patterns, visual guidelines, and documentation, creating a scalable system that supported rapid product growth and ensured consistency across the entire platform.
Status
Launched
▌OVERVIEW ▌
▌B2B UGC FEATURE ▌
The HackQuest UGC feature serves as a core B2B capability, enabling external instructors, partners, and organizations to create, manage, and publish their own Web3 courses on the platform. I designed this feature by building the entire course creation and management flow from the ground up. This included supporting instructors as they structure and publish their courses, enabling the HackQuest team to review and manage submitted content, and ensuring that learners can seamlessly access and learn from the published courses.
The key challenge was to maintain a unified design language while addressing the very different needs of each user group—from professional creators to internal reviewers to end learners. By developing a coherent workflow and a consistent design system, I created a streamlined and intuitive experience that supports scalable course production and ensures quality and usability across the entire platform.
The UGC review feature is a critical part of HackQuest’s B2B course creation ecosystem, ensuring that all submitted courses meet platform standards before being published. After an instructor completes and submits a course, administrators can access the submission in the backend dashboard and begin a structured review process.
I designed the entire review flow to be flexible, trackable, and collaboration-friendly. Reviewers can progress through each section of the course, leave comments for instructors, request modifications, and return to the review at any time thanks to automatic progress tracking. This allows administrators to pause and resume their work without losing context.
Once the review is complete, administrators can decide whether the course is approved or requires resubmission. If changes are needed, instructors receive clear feedback and can revise and resubmit their course. If approved, the course becomes instantly eligible for publication on HackQuest and visible to learners on the platform.
This review system creates a smooth, transparent workflow between instructors and the HackQuest team, ensuring quality control while maintaining a scalable and efficient content management process.
▌B2B HACKATHON FEATURE ▌
HackQuest aims to deliver a fully integrated B2B hackathon management tool that enables organizations, partners, and professional event hosts to create and run hackathons directly on the platform. Similar to the UGC system, the hackathon experience was designed from three perspectives: organizers who design and manage events, applicants who participate, and the HackQuest team who oversees platform-level operations. This feature introduced additional complexity—not only maintaining a consistent design language, but also managing large volumes of submission data, supporting multi-stage evaluations, and enabling efficient voting and judging for both internal reviewers and external judges.
Within this broader B2B ecosystem, I designed the entire hackathon creation flow, empowering organizers to set up events independently from start to finish. This includes drafting the event structure, defining requirements and milestones, configuring application and submission criteria, adding judges, setting review stages, and managing timelines. The flow guides organizers step-by-step, making it intuitive to build even large, multi-phase hackathons without external tools.
After a hackathon is launched, organizers can handle all event management tasks directly through HackQuest’s B2B management dashboard. The system allows creators to monitor the real-time status of the hackathon, manage incoming applications and project submissions, and oversee the progress of each stage. During the judging phase, organizers and judges can review submissions, score entries, and leave feedback entirely within the platform. Once evaluations are complete, organizers can finalize and announce the results through HackQuest without relying on any external tools.
This end-to-end management experience centralizes everything a hackathon organizer needs—from tracking participation to coordinating judging and publishing final outcomes. The following designs illustrate how these workflows were structured and optimized for clarity, scalability, and ease of use.
▌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.
