top of page
Icon.jpg

HackQuest is a Web3 education platform designed to provide an inclusive online space for learning Web3 programming. Users can take courses, earn certificates, create and publish their own courses, participate in hackathons, and organize new ones. Essentially, HackQuest is a hub for all Web3-related knowledge and activities.

As a part-time UX & UI designer at HackQuest, a fast-paced startup, I was responsible for creating responsive website designs. We prioritized high-fidelity mockups over wireframes to accommodate the need for rapid iteration. My role involved close collaboration with another UI designer and a graphic designer, as well as ongoing cooperation with the development team to ensure the feasibility of our designs.

One of my primary responsibilities was designing the PGC and UGC learning pages and the UGC course creation feature. My designs focused on providing a user-friendly interface for both studying and content creation. Additionally, I developed the hackathon pages, enabling users to participate in hackathons and allowing organizers to create and manage them comprehensively. From drafting a new hackathon to managing and completing it, my designs streamlined the entire process.

Another significant contribution was enhancing HackQuest's design system to ensure consistency across all pages and elements, reinforcing the brand identity. This comprehensive approach to design helped create a cohesive and engaging user experience across the platform.

Role

UX & UI Designer

Deliverables

Design System, Hi-Fi Mockups

Website

Status

Launched

▌OVERVIEW  ▌
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
▌UGC FEATURE  ▌

The HackQuest UGC feature empowers everyone to become an instructor and publish their own courses. I designed this feature from three different perspectives: for instructors to create and publish courses, for the HackQuest team to review the courses, and for learners to access and learn from the courses. The challenge was to maintain a consistent design across these perspectives while meeting the distinct needs of each user group. Successfully, I created a user-friendly flow and implemented a consistent design language, ensuring a seamless and cohesive experience for all users.

6.jpg
▌HACKATHON FEATURE  ▌

HackQuest aims to provide a comprehensive hackathon tool. Similar to the UGC features, the hackathon flows were designed from three perspectives: organizers, applicants, and the HackQuest team. However, we faced additional challenges with this feature. Beyond maintaining design consistency, we had to manage large amounts of data and create methods for all users and judges to vote effectively. By addressing these complexities, the HackQuest hackathon tool can successfully run a hackathon independently.

7.jpg
8.jpg
▌DESIGN SYSTEM  ▌
Design System 1.jpg
Design System 2.jpg
Design System 3.jpg
Design System 4.jpg
Design System 5.jpg
Design System 6.jpg
bottom of page