Memo

A browser plugin for online courses that helps users learn effectively and build personal online knowledge base.

(please enable your subtitle function while watching this video)

CONTEXT  
Zhejiang Province Students Technology Innovation Project

AWARD
$5000 sponsorship

MY ROLE
UX Designer & Frond-end Developer

TIMELINE

6 months (Aug.2015-Mar.2016)

TEAM
Yu Duan (Front-end Developer)
Jiabing Teng (Developer)

CONTRIBUTION
Research,
Concept generation,
Interface Design, 
Front-end Programming

Problem

"I just can't remember what I have learned online."

- One online learner complains that he can't get much from online courses.

Because online courses usually contain mass information and are difficult to digest, many people indicate that the amount of knowledge they get from the network is quite limited.

Research Insights

IN-DEPTH INTERVIEW

People who take online courses tend to pay more attentions to videos and pictures than texts.

In order to understand how people learn online, we conducted 9 in-person interviews and found out that they can be divided into two groups according to their learning habbits. 1) Learner who prefer text. That is to say they spend most of the time on words and need to extract information from mass text page. 2) Learners who prefer videos and pictures. Most of them will take screenshots when come across useful information

COMPETITIVE ANALYSIS

Most of the note-taking applications are only text-based, not video-based.

Why a note application doesn't work?I wonder why tons of note-taking applications can't resolve their problem? By comparing the main note-taking and collection software available,  I figured out the main problem is that they are not targeted at the video-based online classes and mainly about text context.

Ideation 

CONCEPT

We introduced a "video timeline" : user can remark videos as easy as remarking texts.

Our design focus on: 1) Open Class Market; 2) Video Remarks; 3) Local Offline Management. These features enable users to abstract information and take notes easily online, as well as review and remember knowledge conveniently offline. 

STRUCTURE

Online remark and Offline management to help learn effectively and build personal online knowledge base

These two main capabilities allows users to take real-time notes during online classes, as well as easily saving video images. So that, they can create a local knowledge base for better memories retrieval later offline.

Prototyping

MAIN FEATURES

A low-profile plugin to help users abstract, remember and use online knowledge effectively.

Coding

The implementation of functions and design styles are limited by different browsers.

Both my developer teammate and I were aware of the limitation of a plugin when we were in the middle of coding. We were forced to change our design due to the technical problem, such as the style of timeline and the button in header. As an incubation project, we achieved most of its functions.

CASE STUDIES--

Brand 

2018.5-2018.8 

UX/UI Design: An inline brand style system to accelerate MailChimp users' market content creation.

Group 

2019.1

UX/UI Design: A redesign of Yelp collection for groups.

Donor

2017.10-2018.4 

Product Design: An interactive donation box for CHI 2018

Menu 

2018.3 

UX/UI Design: A pleasant menu experiences and quicker in-store services for campus cafe shop.

Picker 

2017.10 

UX Design: A redesign of a template picker for online diagramming

Web Memo 

UX Design: A browser plugin for online courses

Cumulo

2016.9-2016.11 

UX Research: An educational kids' game for IBM

Lidro 

2015.5-2016.7 

Product Design: An intelligent product for home-made fruit wine

Web Memo 

UX Design: A browser plugin for online courses