Industry

Web-Extension Design

Client

Google Chrome Built-in AI Challenge

yEAR

2024

Web Extension Design for Interactive Online Learning

Explore the Web Through Scavenger Hunt

Overview

Hive is a Chrome extension that turns any text-based web page into a knowledge scavenger hunt. It transforms passive article-reading into an active learning experience by generating and prompting learners to answer questions related to the text material. The playful scavenger hunt format allows learners to gradually explore and learn the core content of the article. Hive also stores all previous hunts as mind maps for easy knowledge retrieval and review.

My Role

UI/UX Design

Visual Identity, User Flow, Information architecture, wireframing, interaction design

UX Research

User Interview, Competitive Analysis, Journey Mapping, Usability Testing

Time

2024.10-12

team

4 Members

2 UIUX Designer
2 Developers

Try it out

problem

Challenges of Deep Reading in the Digital Era

The digital-era habit of skimming through or zombie-reading texts makes it difficult to truly grasp the knowledge or extract key information from text material. We consume a lot of information from the web, but very little knowledge is retained.

Lack of Tracking & Reviewing Mechanisms

Students’ learning journeys on the web are not effectively captured, making it hard to trace back or review the knowledge they’ve acquired in the past.

Design Challenge

How might we…

Accurately extract key knowledge points from web articles to improve the efficiency and quality of information acquisition.
Guide learners to engage in deep-reading and review, fostering critical thinking and effective reading habits.

solutions

Hive enhances digital reading by enhancing interactivity with AI-generated questions, personalizing feedback, and streamlining the synthesis and tracking of learning materials.

AI Generalized Questions
analyzes web page content and generates tailored questions that prompt learners to actively engage with the material
Interactive Learning Process
Learners complete tasks, answer questions, and earn points
Real Time Feedback
Instant feedback helps learners reflect and improve on their understanding
Productivity Tools
Users can highlight important text or use the "Copy Pen" tool to capture answers directly
Knowledge Summaries
Completed hunts are visualized as mind maps for easy review and long-term retention
Knowledge Extension
Learners can dive deeper into specific topics, accessing additional resources to expand their understanding
User Agency
Users can edit AI-generated content and save personalized summaries for future reference
AI Generalized Questions
analyzes web page content and generates tailored questions that prompt learners to actively engage with the material
Interactive Learning Process
Learners complete tasks, answer questions, and earn points
Real Time Feedback
Instant feedback helps learners reflect and improve on their understanding
Productivity Tools
Users can highlight important text or use the "Copy Pen" tool to capture answers directly
Knowledge Summaries
Completed hunts are visualized as mind maps for easy review and long-term retention
Knowledge Extension
Learners can dive deeper into specific topics, accessing additional resources to expand their understanding
User Agency
Users can edit AI-generated content and save personalized summaries for future reference
AI Generalized Questions
analyzes web page content and generates tailored questions that prompt learners to actively engage with the material
Interactive Learning Process
Learners complete tasks, answer questions, and earn points
Real Time Feedback
Instant feedback helps learners reflect and improve on their understanding
Productivity Tools
Users can highlight important text or use the "Copy Pen" tool to capture answers directly
Knowledge Summaries
Completed hunts are visualized as mind maps for easy review and long-term retention
Knowledge Extension
Learners can dive deeper into specific topics, accessing additional resources to expand their understanding
User Agency
Users can edit AI-generated content and save personalized summaries for future reference
AI Generalized Questions
analyzes web page content and generates tailored questions that prompt learners to actively engage with the material
Interactive Learning Process
Learners complete tasks, answer questions, and earn points
Real Time Feedback
Instant feedback helps learners reflect and improve on their understanding
Productivity Tools
Users can highlight important text or use the "Copy Pen" tool to capture answers directly
Knowledge Summaries
Completed hunts are visualized as mind maps for easy review and long-term retention
Knowledge Extension
Learners can dive deeper into specific topics, accessing additional resources to expand their understanding
User Agency
Users can edit AI-generated content and save personalized summaries for future reference

Design Process

We started by identifying target users, key features, and specific use cases.

Define the target audience based on demographic and psychographic factors. Develop an understanding of their needs, motivations, and behaviors.

Identify the Minimum Viable Product (MVP) features such as the interactive question generation, highlighting tool, and knowledge mind map.

User Flow Analysis, Wireframe.

Analyze the user flow to understand all the steps a user takes from entering the extension to completing a learning session.

Create wireframes for each screen involved in the user flow, detailing layout and interaction points.

Visual Identity Design: Color Palette, Logo, Interaction Design

Analyze the user flow to understand all the steps a user takes from entering the extension to completing a learning session.

High-Fidelity Design

Key learnings

Trade-off features for optimized MVP

In a timely-constraint situation, always consider deferring or simplifying less critical features, which can reduce initial development costs and time, focusing resources on refining the MVP based on user feedback and essential functionality.

Key Focuses are always User-Centric Design

Always prioritize the needs, behaviors, and expectations of the user. Effective designs are intuitive and address real problems or enhance the user's experience meaningfully.