A more user-friendly learning experience for Web3 developers
Clear and guided learning steps
Learn through community discussion
Test learning outcome
Explore glossary
An opportunity to make web3 learning more engaging
Web3 is rapidly gaining traction among developers, with U.S. Bitcoin ETFs generating $4.6 billion in trading volume on their first day. However, there remains a lack of platforms offering structured, systematic education for Web3 developers.
HackQuest launched its MVP to support Web3 developers by organizing hackathons, educational events, and providing resources, but the education portal has struggled to engage developers effectively.
Optimizing the Web3 learning experience for improved comprehension
Analyze user feedback across the end-to-end user flow
Course Matching
A clear learning path and personalized filter
HackQuest supports learners at different levels through an onboarding ecosystem aimed at achieving specific goals, but the previous profile dashboard lacked a clear learning path. My team and I introduced a course overview to outline the full learning journey.
Tab Layout: Guides users through their learning journey with sections for Learn, Build, and Community, clearly showing each task within the ecosystem.
Card Design with Tags: Displays course classification for quick and clear identification.
Detailed Filters: Enables users to select courses based on coding language, learning track, and difficulty.
Enabling comments for discussion and highlighting key concepts
To assist reading, I designed a highlight mode to boost collaboration and focus, allowing users to engage with key concepts, read and save comments, check detailed explanations, and interact through likes, shares, and replies.
Learning Interface - Highlight Mode
A dropdown with checkbox to quickly switch between different modes
Navigation bar allows for full-page visibility and quick jumps to specific sections
Learning Interface - Comment
Highlighted text helps users organize and retain important information
Comments allow users to ask questions and participate in discussions
Learning Progress Bar tracks task status, showing estimated time and reading speed on hover
Comment Display Exploration
Sidebar Comments with Greyed-Out Reading
Option 1
Reading content was dimmed, and comments appeared in a side panel.
This visually isolated comments but required users to pause their reading flow.
Integrated Comments with Adaptive Navigation
Option 2
The reading content remained visible.
The navigation bar transformed into a progress bar, making space to expand comments seamlessly.
Through usability testing, users shared that frequently hiding the reading content to view comments felt cumbersome and disrupted their flow.
We adopted the Integrated Comments approach, keeping the reading content visible while expanding the comments. This solution preserved reading flow and allowed for smoother interaction with annotations.
Testing for comprehensive learning outcome
I introduced a test-out section with reviews to provide a comprehensive evaluation after each course, reinforcing learning and identifying gaps.
TestOut - Coding Questions
TestOut - MCQ Questions
TestOut - Reviews
Master class for diverse learning needs
To address the need for diverse learning materials, I designed video formats. The masterclass provides additional resources to support learning beyond text.
Masterclass Syllabus
Master Class Video
Enhancing the glossary with advanced filters and user submissions
The previous glossary only included a single letter-based filter, which limited users’ ability to find specific terms quickly. To address this, I added a second tag filter to improve search precision and efficiency. I also introduced a word submission option, enabling users to contribute terms that are not yet included, making the glossary more comprehensive and user-driven.
Before
Alphabetical Navigation: Straightforward way to browse glossary terms.
Limited Filtering Options: Not efficient for users looking for specific topics or categories
Overwhelming scrolling: If the glossary grows, users may find it tedious to scroll through terms.
After
Additional Filters: The introduction of tag-based filters (e.g., "DeFi," "Basics," "Slang") allows for faster, more targeted navigation.
Search Bar: Retaining the search bar provides users with a quick way to locate specific terms.
Word Submission Option
Search Words
Submit Words
Encourages user engagement and collaboration.
Makes the glossary more comprehensive and up-to-date.
Personalizes the resource to better meet user needs.
Creating a Cohesive and User-Friendly Learning Interface
We followed HackQuest's design system for Webs Education Platform to ensure consistency and readability. A yellow color scheme was chosen to convey energy, optimism, and engagement, reflecting HackQuest’s mission to inspire learning and creativity.
Design System
Clear and Efficient Course Overview with Card Design
Card Design
The card component was designed to present courses and learning tracks clearly and efficiently.
Key information, such as course classification, difficulty, and status, is displayed using tags and labels, ensuring users can quickly scan and understand the content.
Improving the Learning Interface with Visual Hierarchy and Layout
Learning Interface
