Collaborative Note-Taking App

Product Design
Sector School, Students
My Role Entire product design from research to conception and visualization
Project Time 1 week

This was a design challenge I received to design a note-taking app to help students study in collaboration. I had 1 week to come up with the entire product design.

Software

Illustrator
Sketch
Figma

The Problem & Initial Idea

Students take notes for helping themselves memorize and understand the knowledge they learned in class and from classmates. In fact, notes are not only valuable to everyone self but also to others. Even everyone has their own ways of learning and understanding the materials, but knowledge can be shared. But how?

How might we create a note-taking product to help students share and compare notes and learn from each other?

Key Insights from User Research

Key Insight #1

There are three main scenarios that students would take notes and share notes – in-class learning, study group learning, and working on a team project.

While it’s normal for people to take notes regularly, for students, most take notes during the class and working on a team project.

Key Insight #2

Students like to compile their notes afterward to consolidate a new version for the long-term review.

To record the key points rapidly, people use different ways to take notes, such as using symbols, logograms, etc. So that the real-time notes are usually hard to read especially after the memory curve. Post notes consolidation is necessary.

Key Insight #3

Most of the time, others’ notes are hard to follow because they are on different devices in different outlines.

Everyone has their own ways of learning and understanding the materials as well as the methods of taking notes, so that, most of the time, it’s not easy for note-takers to read others’ notes.

Main Opportunities Found in 3 Scenarios

By digging deeper into the insights generated from the user research, I found there a few opportunities that I can develop further to make the app design a success.

Collect notes on a centralized platform

During the class, students take notes in their own ways with different devices. Someone likes taking notes with a pen and paper, and someone prefers to type words on the computers. However, it may cause the difficulties of sharing notes after class with each other. What if to provide a place for students to share their notes, as well as to have the access to view others’ notes?

Opportunity #1: Provide a centralized platform for students to share notes at the same place.

Compare notes with note outlines

Everyone’s note could be with different note outlines. And it is usually hard for students to quickly read others’ notes without knowing the note structure.

Opportunity #2: To provide an outline function to detect the outlines of different notes, so that students can understand others’ notes easier and find the desired information faster

During the study on others’ notes, students would come up with some questions or confusion. Allowing students to lead a discussion on a certain note would help students solve problems easier.

Opportunity #3:To enable comments function for discussion

Compare notes with note outlines

Everyone’s note could be with different note outlines. And it is usually hard for students to quickly read others’ notes without knowing the note structure.

Opportunity #2: To provide an outline function to detect the outlines of different notes, so that students can understand others’ notes easier and find the desired information faster

During the study on others’ notes, students would come up with some questions or confusion. Allowing students to lead a discussion on a certain note would help students solve problems easier.

Opportunity #3:To enable comments function for discussion

Team members to contribute to the same project in real-time

For completing a team project, a team usually needs to combine everyone’s work into one in the end. The real-time doc editing function to allow multi-people to edit on the same file would be useful.

Opportunity #4:To enable real-time doc editing function to allow multi-people editing on the same file

Typical 3-Column Layout

 

Join Class Group to Access to the Classmates’ Notes to Learn

Compare Notes with Other’s Version Using Outline Quick Scroll Function

Compare Notes with Other’s Version Using Outline Quick Scroll Function

Leave Comments on a Note and Mention Others for Further Discussion

Invite People to Join a Team Group

Invite People to Join a Team Group

More UI Details

Next Step

Even the app is mainly designed for students to use on their computer either in Windows and macOS systems, a mobile app is necessary and would be a big plus for the product system. Base on the user research, some of the students prefer to take notes with pen and paper. So that a mobile app for capturing pictures of the notes on paper would help those students to record their notes in the cloud and sync the pictures onto the files in the desktop app.

Due to the limitation of the screen sizes of mobile devices, the mobile app would only support the basic editing ability but mainly for viewing along with the notes capturing function.