Final Project: Notion Process Page
Role:
User Interface Designer
Tools:
Figma
Deliverables:
Project Proposal & Prototype
Duration:
2 Months
Overview
For this project, I designed an informational website on the platform Notion. Notion is a productivity and organizational application that includes features such as task management, project tracking, to-do lists, bookmarking, etc. I designed this website using a variety of laws and principles of user interface design. My website demonstrates how each law and principle is used, which will help users understand how to best utilize Notion.
Goal
Process
Laws & Principles
Before designing the final prototype, I wrote a proposal explaining how I would integrate the laws and principles into my design. I go into detail on how each law and principle is applied, as a way for users to understand the website.
My goal for this project is for users to understand how to take advantage of certain features Notion offers. I made sure to design each page using a law/principle. Applying these principles will make my website understandable, memorable and usable.
Understandable
Memorable
Usable
Final Project Proposal
The Zeigarnik Effect
The Zeigarnik Effect describes the tendency for people to remember uncompleted or interrupted tasks more than completed tasks. I implemented the Zeigarnik Effect by adding progress indicators (progress bar & step-by-step indicators) on every page, letting users know how many tasks they've completed, how many they have left, and which step they're currently on.
Tesler's Law
Miller's Law
Law of Proximity
Von Restorff Effect
Tesler’s law is a principle that suggests the amount of complexity between the user and the product. I will make sure to simplify the interface of my website, which will allow users to interact with the platform efficiently.
Miller’s law is a principle that suggests that the average user can retain seven (plus or minus two) items in their working memory. Therefore, I plan only to have a limited number of steps (6-7) making it easier for the user to understand, and grouping related information together.
Law of proximity states that objects that are close to each other, users tend to perceive them as a group. I will place paragraphs, headings, and subheadings close to each other. This will facilitate easier reading and comprehension. The law of proximity helps create a visually organized and user-friendly interface.
Group 1: Nav bar
Group 2: Heading
Group 3: Steps
Law of proximity states that objects that are close to each other, users tend to perceive them as a group. I will place paragraphs, headings, and subheadings close to each other. This will facilitate easier reading and comprehension. The law of proximity helps create a visually organized and user-friendly interface.
Limited number of steps
Bolded important concepts
Different text color
Indicators
Simple interface
Progress bar indicators
Step-by-step indicators
The Multimedia Principle
The Multimedia Principle suggests incorporating visual and auditory elements together enhances learning and understanding. I included text and images by the image describing each step to make instructions clear.
Zoomed-in images
Text (indicator)