Optimizing the Learning Experience of a Web3 Education Platform
Duration: 3 months
My role
Responsibility
A Guided, Collaborative Learning Experience Empowering Web3 Developers
Low Completion Rates Due to Limited Engagement and Motivation
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)
How might we create a more engaging and motivating learning experience to increase user participation and course completion rates?
Motivated Beginners Seeking Practical Growth
Analyze user feedback across the end-to-end user flow
Lack of Progress Feedback
Limited Learning Format
Course Matching
PAIN POINT: LACK OF PROGRESS FEEDBACK
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.
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
BEFORE
Lack of Clear Learning Path and Progress Feedback
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.
AFTER
Clear, Structured Learning Navigation
Added a progress bar to show overall course completion status
Designed a tabbed layout that organizes the learning journey into clear stages.
Displayed personalized course progress to help users stay oriented and motivated.
To ensure users could evaluate their understanding and reinforce key concepts, I designed a Test-Out section that appears after each course.
Clear, Reviewable Test Results
TestOut
Quizzes are primarily fill-in-the-blank and multiple-choice questions.
Users can expand and review all previous questions and their answers.
PAIN POINT: LACK OF PEER INTERACTION AND SUPPORT
Enabling comments for discussion and highlighting key concepts
BEFORE
Static, text-heavy interface with little interaction or peer support
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
Before - Learning Interface Comment
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
Interactive and collaborative reading experience
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
PAIN POINT: LIMITED LEARNING FORMAT
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.
BEFORE
Inefficient, letter-only filtering.
Inefficient for topic-based search
Limited filtering by letter only
Overwhelming as content increased
Before - Glossary
AFTER
Streamlined and user-driven glossary experience
After - Glossary
Tag-based filtering improves search precision, allowing users to quickly locate glossary terms.
A submission feature empowers users to contribute missing terms.
A search bar provides users with a quick way to locate specific terms.
PAIN POINT: COURSE MATCHING
Enhanced filter with better matching
BEFORE
Users struggled to find relevant electives without a clear filter system.
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
Before - Course Discovery
AFTER
Clear, Multi-Layered Course Filtering
After - Course Discovery
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.
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
