Project 1

Overview

Background: HackQuest is a company that focuses on organizing Web3 hackathons, educational events, and creating resources to support Web3 developers.
‍
Design goal: Identify critical user pain points on the HackQuest website and enhance the user experience to facilitate better Web3 learning and make it more welcoming for new developers.
‍
Problem statements:

How might we improve user engagement and comprehension in learning Web3 knowledge?

Solutions:

The design enhances the learning experience by streamlining navigation, offering interactive highlight modes for improved comprehension, and integrating a progress bar to manage time and track progress effectively.

1. Navigation Optimization: Added an overview outline in the left navigation bar for quick content understanding and easy section navigation.

2. Highlight Mode: Introduced Comments and Keywords modes to facilitate understanding and interaction with difficult terms.

3. Learning Progress Bar: Integrated a progress bar to display task completion, remaining tasks, and reading speed, aiding in effective time and progress management.

Course Structure Overview

The left navigation bar now includes an overview outline under each article, allowing users to quickly understand the content before reading and to navigate to specific sections by clicking on the outline titles.

Highlight mode

Users can use the highlight mode to read and understand difficult sentences or terms. We offer two modes: Comments and Keywords. In Comments mode, users can view, share, and reply to comments, creating a mini discussion community; in Keywords mode, we provide detailed explanations of key concepts to aid understanding and memory.

Progress tracking

We’ve added a learning progress bar that shows the tasks completed, remaining tasks, and reading speed, helping users manage their time and learning progress effectively.

Pop-up window

For pages with reading and quizzes, comments are designed as a pop-up below the reading area, minimizing page clutter and allowing users to view comments and keywords without disrupting their reading and quiz-taking.

To ensure our solution effectively meets user needs, we conducted extensive research to better understand our target audience.
‍
Our primary users have some basic programming experience, such as learning Python, R, or C, and understand fundamental data structures and syntax. However, they have limited real-world experience, mostly working on school projects, self-learning, or non-developer roles.
‍
With a strong interest in Web3 programming for personal interest, career advancement, or work requirements, their expectations focus on accessible, hands-on learning. Based on these insights, our design goals centered on making the learning process more engaging, effective, and progressive.

Research

Analyze user feedbacks to identify painpoints

The user flow starts at the homepage, where users explore courses, review syllabus, and identify suitable learning tracks. They then interact with the learning interface, earn rewards for their progress, and apply their skills through practical projects and hackathons. Finally, users can access additional resources and manage their profiles to track their progress.

We analyzed feedback from 30 users about their HackQuest experience, summarizing the most popular features and pain points. We categorized these pain points across the end-to-end user flow, identifying strengths and weaknesses in five key areas that need improvement.

We chose to focus our three design priorities specifically on the planning and learning phases.

Painpoints

No Communication
No opportunities for users to share thoughts or communicate

Progress Tracking
Absence of tools to track progress and reading pace.

Limited Learning Format
Reading-only format is insufficient for effective learning.

Disorientation
Users struggle to identify key information and may feel disoriented.

Mid-fidelity development

For each pain point identified, I explored design opportunities to address the problems, assessing the effort required and the potential value the solutions could bring to the company.

To enhance user engagement—both individually and collaboratively—I focused on using highlights as a tool for self-reflection and discussion features to foster interaction with others, enabling users to exchange feedback and deepen their learning experience.

Course overview for fast navigation

To enhance navigation and enable users to efficiently move between sections , I designed the navigation bar with an "Overview" option to view the course structure and clickable section titles for quick access to specific reading parts.

Highlight mode to assist reading

To enhance interaction and collaboration during the learning process, I designed a highlight mode that helps users focus on key concepts and sentences, improving memory retention. Users can view and read existing comments for additional insights, check keywords for detailed explanations, and save important text or comments to their notes. Additionally, they can also share, like, and reply to comments, as well as add their own comments.

Progress tracking

To provide tools for monitoring progress and reading pace, I designed a Learning Progress Bar that uses icons and colors to represent each reading and quiz section, displaying task status. Hovering over these icons reveals details such as task completion status, estimated time, and reading speed.

Video and audio format

To address the need for diverse learning materials, I designed video and audio formats. The video format includes a tabbed layout for easy navigation, as well as options for transcripts, summaries, downloads, and discussions. Additionally, the audio mode delivers content in audio format and supports reading translations as audiobooks.

Due to practical considerations and cost constraints, the company decided not to implement the video and audio formats.

Collapsible layers

To maximize page space, the left and right panels are designed to be collapsible. When one side is opened, the other side collapses. For instance, when the highlight mode is opened on the right, the left navigation bar will automatically switch to the learning progress bar.

Usability testing

The team developed prototypes in four key areas and tested them with six users to understand their motivations and pain points, and to evaluate the new design features.

Procedures: Conducted interviews and tested 7 prototypes with 6 users over Zoom: interview questions focused on users’ thoughts to the current and updated features and designs; testing tasks included finding key features and completing common tasks.

Sample Size: 6 users (2 Female, 3 with engineering backgrounds, age 25-30)

Duration: each session lasted 60-90 minutes

Takeaways:

All users thought the navigation bar feature would be helpful.
All users found the highlight/comment feature interesting but previous floating window icons disruptive, which made navigation and reading more difficult.
5 users thought the estimated time is helpful information but prefer to place it somewhere more visible

Suggestions:

Add navigation bar feature to all learning pages.
Adopt the highlight/comment feature.
Allow users to click on highlighted text to access comments and keywords, making interactions easier

Final iteration

Activation of highlight mode

User Feedback: Users felt that frequently using floating windows and icons to view comments or keywords during reading was cumbersome and disrupted their reading flow. This interface switching and additional clicks increased their learning burden and decreased engagement and learning efficiency.

Iterative Improvement: Users can now click directly on highlighted text to access comments and keywords, removing the need for floating window icons. This reduces navigation steps and makes interactions more intuitive. With comments and keywords integrated into the text, users can quickly get information without disrupting their reading, improving engagement and understanding.

Design system

We followed the company’s design system throughout the project to ensure a cohesive visual identity and user experience. This alignment helped maintain consistency while enhancing usability across all touchpoints.

Reflection

Effective signifiers enhance focus and streamline the learning experience.

A good signifiers play a crucial role in helping users stay focused on learning rather than struggling with the interface. In this design process, I aimed to simplify the flow of accessing comments and keywords by making the text itself clickable. This approach avoids disrupting the reading experience with floating windows, thereby enhancing user engagement and learning efficiency.

Minimize cognitive load

Reducing cognitive load is essential for effective learning design. During this project, I focused on minimizing the brain's effort required for interface navigation by balancing the main interface with subsidiary elements. I implemented a collapsible sidebar to maximize reading space and ensure that supplementary information appears only when needed, thereby enhancing focus and curiosity while preventing distraction.