This is the final project(slide show) for User Experience Design course in General Assembly.

My idea is very simple. I want to help people acquire knowledge more systematically in new media age.


It starts from human needs. No matter what age it’s, Human always have note-taking needs. The more people think it important, the more they will write it down.

Even Now more and more people get news from internet. they can’t preclude desire to write something on paper.


Most of all, memory is unreliable. If you don’t do anything after listening some info, the retention will drop down to 50% after 30 mins.

May 1

Based on these exploration, I found digital info is more reachable but more fragmented. When we browsing online articles , thet’re hard to highlight or take notes.  However, these actions help us turn info into knowledge.

Therefore, I believe that by creating a connection between digital and physical info, Knowledge will only simply fall out when you need it.


I selected five physical notebook brands rather than notes app. The reason is notes app can be considered as an additional function for notebooks. For building up knowledge, any actions on paper are always better than on electronic device.

Nowadays, specific notebooks have become a monopolistic competition market. According to users’ needs, there are many different purposes. But less companies develop app. 


User research

Two essential finding in the interviewing:

  • Notes on electronic device are usually trivial matters or need to finish on time. When users take seriously, they always look for piece of paper. In addition, they struggled with keeping online articles. Eventually, they just let it go.
  • People very enjoy the old stuff they belonged to, such as love letters, notes on graduation ceremony. If they find it, it will become a treasure. They even would like to print it out if it is on internet.

The second point is an extra takeaway that leads to the other persona.


  • For Knowledge


  • For Lifelog


Content structures

I used Moscow method to distill my features. The most important function is “plug in”, like Pinterest. Others are common editing functionalities.


Based on above material incorporating card sorting techniques, Features, User flow and site map are constructed in sequence(detail in slide show).


When browsing online articles, users can directly highlight and take notes. Notes will be folded as a bubble when finished. If users are in any social media, like facebook, twitter, the default folder in app for users’ selected content is lifelog otherwise knowledge folder.

The power of Cilpmodule is direct to edit online resources, messages, memories that are meaningful to users.

  • Plugin screen


  • App main screen


Final prototype

Synthesize the research from the usability tests. I revised 5 sections

  1. Amended Think Tank to Knowledge  
  2. Separated menu from landing page
  3. Added the previous bottom (that is users’ favorite)
  4. Selected two essential functions (kept highlight and note, discarded combine and move)
  5. Improved pagination more intuitively.


I focus on DIY design in making page. Users can easily develop an unique booklet from the inside out. Only when something is externalized will there be a more opportunity to keep forever!


Last, other features. I outsource shopping service to Amazon.  Also, users can login in any steps. For search function, I put it in menu. It’s easy to reach.


Enjoy Clipmodule, thank you!

Posted by:yonflame

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s