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)