Optimizing the Learning Experience of a Web3 Education Platform
My role
Responsibility
A Guided, Collaborative Learning Experience Empowering Web3 Developers
Low Completion Rates Due to Limited Engagement and Motivation
Data shows that only 20% of users complete the first chapter. Users are having a difficult time navigating our tool and are not incentivized to continue learning.
“I don’t know how much progress I’ve made; it feels like a never-ending task to me.”
– John, Web3 Developer (Usability Research Feedback)
Motivated Beginners Seeking Practical Growth
Analyze user feedback across the end-to-end user flow
Lack of Progress Feedback
Course Matching
Building a Transparent and Motivating Learning Journey
Many learners on HackQuest struggled with unclear course structure, limited feedback on their progress, and no clear sense of achievement. To solve this, I introduced a series of features that provide visibility, motivation, and self-assessment tools throughout the learning path.
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.
❌ No clear indicator of overall course progress
❌ Lack of structure to guide users through their learning path
❌ Users felt lost and couldn’t easily track which courses they had completed
I explored multiple layout directions to outline the full learning journey.
Sidebar Navigation
Option 1
Always-visible course list supports task-driven users
Easy access to all modules
Less space for content on smaller screens
Can feel overwhelming with many sections
Tabbed Structure
Option 2
Separates stages clearly (e.g. Learn, Build, Community)
Clean, focused interface
Scales well across devices
Less immediate visibility of full journey
Scrolling Card Deck
Option 3
Engaging and mobile-optimized
Encourages exploration of each step
Hard to track overall progress
Step-by-Step Overview
Option 4
Clearly shows linear progress
Can get crowded with many steps
Less flexible for non-linear learning
I chose the tabbed layout for its clear structure and flexibility, allowing users to seamlessly switch between consuming content, building projects, and engaging with the community—while remaining scalable across devices.
It guides users through their learning journey with dedicated sections for Learn, Build, and Community, clearly outlining each task within the ecosystem.
✅ Added a progress bar to show overall course completion status
✅ Introduced a tabbed layout that visualizes the step-by-step learning path
✅ Displayed individual course progress, helping users understand where they are and what’s next
To ensure users could evaluate their understanding and reinforce key concepts, I designed a Test-Out section that appears after each course.
TestOut
Quizzes are primarily fill-in-the-blank and multiple-choice questions.
Users can expand and review all previous questions and their answers.
TestOut - Coding Questions
TestOut - MCQ Questions
TestOut - Reviews
Enabling comments for discussion and highlighting key concepts
The previous learning interface was static and text-heavy, offering little room for interaction or peer support.
Before
❌ Readings were dense with jargon, making comprehension difficult
❌ Lack of place to ask questions or engage in peer discussion
❌ Lack of progress tracking, leading to low motivation and inconsistent engagement
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.
Layout Exploration
Sidebar Comments with Greyed-Out Reading
Option 1
Visually isolates comments, making them stand out
Dims the reading content, breaking reading flow
Requires users to pause and switch focus
Integrated Comments with Adaptive Navigation
Option 2
Reading content stays visible while commenting
Progress/navigation bar adapts to accommodate comments
Smooth, uninterrupted reading and annotation experience
Through usability testing, users shared that frequently hiding the reading content to view comments felt cumbersome and disrupted their flow.
I adopted the second option, keeping the reading content visible while expanding the comments. This solution preserved reading flow and allowed for smoother interaction with annotations.
After - 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
After - 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
Expanding Learning Tools to Support Diverse Learning Styles
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
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.
After - Glossary
Tag-based filtering improves search precision, allowing users to quickly locate glossary terms.
A submission feature empowers users to contribute missing terms.
Before
❌ Limited filtering by letter only
❌ Inefficient for topic-based search
❌ Overwhelming as content increased
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.
Enhanced filter with better matching
Before
❌ Only a basic search bar; no filtering options
❌ Users struggled to find courses that matched their skill level or goals
❌ Inefficient and frustrating for users with specific needs
After
✅ Added multi-layered filters by ecosystem, programming language, learning track, and difficulty
✅ Made it easier for users to quickly narrow down relevant courses
✅ Improved discoverability and alignment between user needs and course offerings
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
