documentation:
Notebooks
1. NOTEBOOKS OVERVIEW
Introduction
The My Notebook view is the home page of the app and where the user will access notebooks they have created.
Figma Location
1 – Welcome to INK
Requirements
- Sort Order: Projects are ordered ascending by last access date and time; if no access date is available, use creation data and time
Field Definition
ID | Field Name | Description |
1 | My Profile | User icon and name; access to customize profile |
2 | My Notebooks | Displays notebooks created by this user |
3 | Shared with Me | Displays notebooks that have been shared with this user |
4 | Notifications | New interactions from other users (out of scope) |
5 | Search | Search notebooks, projects, or within shared notebooks |
6 | More (…) | Access to customize cover, delete notebook, and more |
7 | Notebook | A single notebook containing a cover, title, and last access date (If the notebook has not accessed, display creation date) |
8 | Information Overlay | An overlay that provides details about functions available on the My Notebooks page |
9 | Create Notebook | Allows the user to create a new notebook |
2. INFORMATION OVERLAY
Introduction
Overlays assist the user with learning about the available features on a page.
Figma Location
1 – Welcome to INK
Requirements
- The overlay will automatically display to the user on the first use of the My Notebooks page
- After the first use, the overlay will be accessed by the user through the help icon
Field Definition
| ID | Field Name | Description |
| 1 | Close | Closes the overlay |
3. CREATE NOTEBOOK
Introduction
Notebooks are a part of INK’s organization features and are a way to manage topics across notebooks and to store projects related to a notebook topic or theme.
Figma Location
2 – Create Notebook
Starting Point
Create Notebook on My Notebooks Dashboard
Requirements
- A title for the notebook must be provided
- If the user does not personalize the cover of the notebook, the default cover is displayed
Field Definition
| ID | Field Name | Description |
| 1 | Notebook Title | Allows the user to provide a title for the notebook; displays keyboard |
| 2 | Close | Cancel the process of creating the notebook |
| 3 | Create Notebook | Commits the creation of the notebook to record |
| NA | Keyboard: Done Button (not shown) | Disabled until title has been provided |
Customization features are detailed in the next section.
Field Definition
ID | Field Name | Description |
4 | No, go back |
|
5 | Yes, cancel & delete |
|
4. CUSTOMIZE NOTEBOOK
Introduction
Users can personalize a notebook cover by adding stickers, photos, custom colors, and more.
Figma Location
12 – Customize Notebook
Field Definition
ID | Field Name | Description |
1 | Customize | Displays the notebook cover along with tools to customize the appearance |
2 | Delete | Delete the notebook; covered in more detail in next section |
Out of Scope
– Share
– Duplicate
– Delete
Field Definition
ID | Field Name | Description |
3 | Title | The title of the notebook as provided by the user |
4 | Close | Close the notebook without saving changes |
5 | Text Input & Formatting | Opens the keyboard and allows the user to enter and format text (This is not active within the prototype and is not detailed with this document) |
6 | Annotate | Opens the annotate sub-menu and allows the user to add annotations to the cover |
7 | Add a Sticker | Opens the sticker sub-menu and allows the user to select a sticker to add to the cover |
8 | Background Color | Opens the sub-menu allowing the user to change the background color |
9 | Add Image | Opens the image sub-menu and allows the user to select from several image related options |
10 | Save Notebook | Saves the changes made by the user |
11 | Expand Cover | Expands the notebook cover to as large as the screen will allow |
Field Definition
| ID | Field Name | Description |
| 12 | Annotate | Further details for the features on this menu including any sub-menus can be found here |
| 13 | Annotate Color | Annotate sub-menu: choose annotation color |
| 14 | Background Color | Changes the background color |
| 15 | Sticker | Applies a sticker to the cover |
| 16 | Sticker Pagination | Signifies more content to the user |
| 17 | Photo Sub-menu | Displays the image options available |
| 18 | Take Photo | Opens the iOS camera; see Projects – Insert for details |
Out of Scope
– Browse
– GIF
5. DELETE NOTEBOOK
Introduction
As part of notebook management, the user has the option to delete the notebook.
Figma Location
1 – Welcome to INK
Field Definition
| ID | Field Name | Description |
| 1 | Customize | Covered in previous section |
| 2 | Delete Notebook | Displays the first delete confirmation |
Requirements
- The user must make a selection to either close or move forward with the process of deleting the notebook
Field Definition
ID | Field Name | Description |
3 | No, go back |
|
4 | Yes, delete | Displays the second delete confirmation |
5 | No, go back |
|
6 | Delete now | Deletes the notebook and all of its projects and content, removing the notebook from the My Notebooks view |
