top of page

Notion Notebook

In the class of Spatial UX in GSAPP, each group was required to select a current app to identify its advantage adn disadvantage and improve the user experience. Notion, as as app that all of us use everyday, was selected by our group. 

Another thing is that we believe the interaction between human and computer will not be restricted bt screens. Instead, it can happen everythere in the space with more intuitive interaction, the so called "Spatial UX". Therefore, based on the idea of "Spatial UX", our group design new interaction for Notion. 

Theme

Interaction Design, Working Space

Roles

Designer & Prototyper

Tools

Processing, ReacTIVison, ChatGPT, Projector, WebCam

Analysis & Critique

The first step is analysing the advantage and distadvantage of the Notion through test it by ourselves and using diagrams to investigate its good/bad properties. One method is to recollect how we take notes and edit documents without the apps like Notion. We answered the two questions:

  • What is Notion good at? 

  • What is Notion bad at?

Here is our analysis:

捕获.JPG
捕获1.JPG

By using diagram, we compared the traditional ways of taking notes and using Notion from the perspectives of room, vision and artifects.

6.JPG

Room

捕获2.JPG

Vision

7.JPG

Artifects

After the critique, we decide to focus on the feature "Presence" of Notion, and try to improve it through embeding users interface into the physical space.  

ezgif.com-video-to-gif-converter (1).gif

Interaction with Presence

Psychological Connection

Interaction without Presence

Mental Loneliness

Design a spatial interface

Based on the analysis, we proposed a solution, Interface in the Space, in order to improve the experience of using Notion. 

捕获12.JPG

The basic idea of the spatial interface is utilizing the space around us as our dynamic workspace, in order to improve "presence" of using Notion. The spatial Interface for new Notion including four components: search, collection, editing and tools. The interface functions as a bridge between physical world and digital information, empowering us to live and work in a space where both dimensions seamlessly coexist.

We focused on the editing interface, further designing the interaction and prototyping it by developing technical workflow.

  • Multimedia Collection
捕获6.JPG
  • Tools in the Drawer
  • Collective Interaction Tool
捕获7.JPG
  • Zoom Scale Tool
捕获8.JPG
  • AI Assistant
Technology for Prototyping

To realize the spatial interface, we relied on some technical tools including Processing connected with Data iCloud, reacTIVsion, ChatGPT, Projector and WebCam functioning as a sensor

捕获3.JPG

Technical Diagram 1: Gneneral Technical Workflow

捕获4.JPG

Technical Diagram 2: Details of the Drawer

Prototype Video
bottom of page