1. NOTEBOOKS OVERVIEW

my notebooks dashboard
my notebooks dashboard

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

  1. 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

information overlay
information overlay

Introduction
Overlays assist the user with learning about the available features on a page.

Figma Location
1 – Welcome to INK

Requirements

  1. The overlay will automatically display to the user on the first use of the My Notebooks page
  2. After the first use, the overlay will be accessed by the user through the help icon


Field Definition

IDField NameDescription
1CloseCloses the overlay

3. CREATE NOTEBOOK

create notebook start
create notebook start

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

  1. A title for the notebook must be provided
  2. If the user does not personalize the cover of the notebook, the default cover is displayed


Field Definition

IDField NameDescription
1Notebook Title

Allows the user to provide a title for the notebook; displays keyboard

2CloseCancel the process of creating the notebook
3Create NotebookCommits 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.

cancel notebook overlay
cancel notebook overlay

Field Definition

ID

Field Name

Description

4

No, go back

  1. Close the confirmation window 
  2. Return the user to the notebook cover

5

Yes, cancel & delete

  1. Close confirmation window
  2. Close notebook cover without saving
  3. Return the user to My Notebooks page

4. CUSTOMIZE NOTEBOOK

customize notebook start
customize notebook start

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

notebook cover with customization features
notebook cover with customization features

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

collect data (sub-menu)
customize notebook menus

Field Definition

IDField NameDescription
12AnnotateFurther details for the features on this menu including any sub-menus can be found here
13Annotate ColorAnnotate sub-menu: choose annotation color
14Background ColorChanges the background color
15StickerApplies a sticker to the cover
16Sticker PaginationSignifies more content to the user
17Photo Sub-menuDisplays the image options available
18Take PhotoOpens the iOS camera; see Projects – Insert for details


Out of Scope
– Browse
– GIF

5. DELETE NOTEBOOK

notebook popover
notebook popover

Introduction
As part of notebook management, the user has the option to delete the notebook.

Figma Location
1 – Welcome to INK

Field Definition

IDField NameDescription
1CustomizeCovered in previous section
2Delete NotebookDisplays the first delete confirmation
delete confirmation
delete confirmation

Requirements

  1. 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

  1. Closes confirmation popup
  2. Returns user to the My Notebooks page

4

Yes, delete

Displays the second delete confirmation

5

No, go back

  1. Closes confirmation popup
  2. Returns user to the My Notebooks page

6

Delete now

Deletes the notebook and all of its projects and content, removing the notebook from the My Notebooks view