1. PROJECTS OVERVIEW

project tutorial
project tutorial

Introduction
Tutorials assist the user with learning about the features within a project.

Figma Location
3 – Create Project

Requirements

  1. The tutorial will automatically display to the user on the first use of the project
  2. If the user closes or skips the tutorial, the tutorial will be considered complete
  3. After the first use, the tutorial will be accessed by the user through the help icon


Field Definition

ID

Field Name

Description

1

Get Started

Advance the tutorial to the next screen

2

Skip this tutorial

  1. Close the tutorial
  2. Return the user to the project

3

Close

  1. Close the tutorial
  2. Return the user to the project


There are five overlays associated with the project tutorial:

  1. Overview, Get Started (shown)
  2. Type text
  3. Add annotations
  4. Insert almost anything!
  5. Create new section
tutorial popup detail
tutorial popup detail

Field Definition

IDField NameDescription
4End Tutorial

Close the tutorial

Return the user to the project

5NextAdvance the tutorial to the next screen
6Progress BarDisplays the progress to the user in one-quarter increments
default project view
default project view

Introduction
The project is where the user will create content by entering text and inserting media such as photos and measurements taken with the app.

Figma Location
3 – Create Project

Field Definition

IDField NameDescription
1< (back)Return the user to previous screen
2Project TitleTitle of the project
3Undo / Redo
  1. Undo: Undo the last action taken by the user
  2. Redo: Reverse the last undo action taken
4Text Input & FormattingOpens the keyboard, input, and formatting tools
5AnnotationsOpens the annotation menu
6InsertOpens the insert menu
7ShareGive other users access to the project
8InformationA tutorial that illustrates the functions that are used when completing projects
pages project view
pages project view

Introduction
This markup of the project screen defines the organizational capabilities within projects.

Figma Location
3 – Create Project

Requirements

  1. A single page is created when creating the project
  2. No sections are automatically created when creating the project
  3. The default view of the project screen is with the pages sidebar closed


Field Definition

IDField NameDescription
1Create New SectionAdds an index tab and separator bar allowing the user to organize pages
2Section Index Tab – activeThe active tab overlaps the edge of the page
3Section Index Tab – non-activeThe non-active tab is flush with the edge of the page
4Section SeparatorProvides visual separation of pages within a section
5PagesPages sidebar
6Project InfoProject information sidebar
7PagesSidebar title
8Non-active pageNon-active page thumbnails are visually different from active pages
9Page NumberThe number of the page 
10Active PageActive page thumbnails contain a border and brighter page
11Add a PageCreates a page and places it as the last page in the project
(Note: new pages can also be added by filling the previous page with content)

2. TEXT INPUT & FORMATTING

keyboard with text formatting menu
keyboard with text formatting menu

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

Figma Location
4 – Add Text

Requirements

  1. Tapping anywhere on the page will open the keyboard with the formatting menu


Field Definition

ID

Field Name

Description

1

Text Icon

Tapping this icon or anywhere on the page will open the keyboard with the formatting menu

2

Font

Opens the menu to set a font

3

Text Size

Opens the menu to set a text size

4

Text Color

Opens the menu to set a text color

5

Text Style

Sets the style of the text

6

Alignment

Opens the menu to set alignment

7

Text Type

Set text as title, heading, or body

8

List

Creates a bulleted or numbered list (out of scope)

9

Link

Creates a link from the selected text (out of scope)

10

Insert

Opens the insert menu

Default Text Settings
– Arial
– 12
– Black
– Left-aligned
– Body

3. ANNOTATIONS

annotation menu (draw color selector)
annotation menu (color selector)

Introduction
Annotation provides the user with the ability to draw, add emoji, highlight text, and more.

Figma Location
7 – Annotations

Field Definition

IDField NameDescription
1Annotation IconOpens the annotations menu
2Annotation MenuDisplays the annotation features; draw selected by default
3ColorDisplays color selector sub-menu
4SizeAdjust the size of the draw, highlight, or erase tools
5CloseCloses the annotation menu

There are five annotation menus:
1. Draw
2. Highlight
3. Erase
4. Sticky
5. Emoji

highlight tool (color selector)
highlight tool (color selector)

Field Definition

ID

Field Name

Description

6

Highlight Tip – Slider

Adjust the size of the highlighter tool

7

Color

Displays color selector sub-menu

erase tool
erase tool

Field Definition

IDField NameDescription
8Erase TipAdjust the size of the eraser tool 
sticky tool
sticky tool
sticky added
sticky added

Requirements
The user must select a sticky note to drag and drop on the screen, then tap the sticky to activate keyboard and add text.

Field Definition

ID

Field Name

Description

10

Sticky Styles

Select a sticky style

11

Type Note

Use the keyboard to add text to sticky; displays keyboard

12

Done (button)

Enables after content has been entered

emoji tool
emoji tool

Field Definition

IDField NameDescription
13Select EmojiDrag and drop an emoji onto page
14Emoji scrollScroll through emoji

4. INSERT

insert menu
insert menu

Introduction
The insert menu provides the user with the ability to insert various forms of media onto the page.

Figma Location
5 – Collect Data

Requirements
The insert menu is accessed from two locations on the project screen:
1. Top-level menu
2. Keyboard menu

Field Definition

ID

Field Name

Description

1

Insert Menu

Insert media onto the page


Out of Scope

– Browse
– Table
– GIF
– Chart
– Audio
– Text Box

take photo
take photo

Introduction
Using the iOS camera on the device, the user can take a picture and insert it onto the page.

Figma Location
6 – Take Photo

Starting Point
Take Photo is accessed from the insert menu

Requirements

  1. This function uses the iOS device camera to take a photo
  2. The graphic illustrates the state after a picture has been taken by the iOS camera


Field Definition

ID

Field Name

Description

2

Cancel

Cancel and exit out of the camera, returning the user to project

3

Undo

Discard the current photo and return the user to the camera in a ready to take a picture state

4

Insert Photo

Add photo to the page

collect data (sub-menu)
collect data (sub-menu)

Introduction
The Collect Data sub-menu provides the user with access to a variety of iOS tools that can be used to collect data and insert it onto the page.

Figma Location
5 – Collect Data

Field Definition

ID

Field Name

Description

1

Measure

Opens the measure tool

Out of scope
– Location
– Speed
– Elevation
– Timer
– Weather

measure tool
measure tool

Introduction
This function allows a user to collect and insert a photo of a measurement onto the page. Additionally, the user has the option to copy the data from the measurement to their clipboard for pasting to the page.

Figma Location
5 – Collect Data

Field Definition

ID

Field Name

Description

2

Back

Back to the project

3

Instructions

Tells user how to use the tool

4

Clear

Clears all measurement points on the screen

5

Undo

Undo the last action taken by the user

6

Insert

Insert the measurement onto the page; disabled until the ending point for the measurement has been selected

7

Starting Point

First tap sets the starting point of the measurement

8

Ending Point

Second tap sets the ending point of the measurement

9

Data Popup

Displays the measurements taken

  1. Display in centimeters – default
  2. Display in inches
  3. Allow the user to select a data point prior to copying to clipboard (selected value in this example is “8 cm”)

10

X Close

Closes the copy data popover only

11

Copy to clipboard

Copies the selected value onto the clipboard

 

5. COMMENTS

notification - new comment
notification - new comment

Introduction
A notification is provided when a comment has been made on the project by another user. Comments are read and replied to within the comments sidebar that opens with the comment icon.

Figma Location
9 – View Comments

Requirements
The comments sidebar is closed by default.

Field Definition

ID

Field Name

Description

1

New Comment

Indicates a new comment has been received; opens the comments sidebar

2

Comment Sidebar

The comment sidebar is closed by default

 

comments sidebar (new comment)
comments sidebar (new comment)

Introduction
A notification is provided when a comment has been made on the project by another user. Comments are read and replied to within the comments sidebar that opens with the comment icon.

Figma Location
9 – View Comments

Requirements
Default view provides all comments, with the newest comment highlighted when the sidebar opens.

Each Comment Contains:
– User icon and the first and last name of the commenter
– Time and date comment was made
– Comment content
– More menu (delete, edit)
– Reply prompt

Field Definition

ID

Field Name

Description

3

Comments Icon

Opens the sidebar

4

New Comments Toggle

Display all comments or only new (unread) comments

5

Comments

Sidebar title

6

Highlighted (not selected)

Content associated with comments not selected or not in focus by the user

7

Inactive comment

Comment that is not currently selected or in focus

8

Highlighted (selected)

Content associated with comments selected or in focus by the user

9

New Comment

Example of a new comment; new comments contain a “New” flag when the comment is selected

 

comments toggle (no new comments)
comments toggle (no new comments)

Requirements
If there are no comments to display within the sidebar, provide a “No New Comments” label to the user.

Field Definition

IDField NameDescription
10Highlighted ContentAll content with comments is highlighted
11Comments ToggleDisplays new comments only
12No New CommentsWhen the comments toggle is set to “new” but there are no new comments, this message is displayed.
add comment (start)
add comment (start)

Introduction
Users have the ability to make comments on projects that have been shared with them by other users.

Figma Location
10 – Add Comments

Starting Point
A shared project displayed within the Shared with Me dashboard

Requirements
Users can only make comments on projects that have been shared with them.

Field Definition

IDField NameDescription
1Project OwnerThe user icon of the project owner
2Highlighted ContentUser highlights the content in order to leave a comment
3Add Comment
  1. Opens comment sidebar
  2. Displays keyboard
  3. Places the cursor in the comment field
add comment
add comment

Field Definition

ID

Field Name

Description

4

Comment Icon

Shows the comment sidebar open

5

User Name

The user icon of the user making the comment

6

Comment (text)

The comment made by the user

7

Highlighted Content

The content stays highlighted while the comment is being made

8

Comment (button)

  1. For new comments, the button is Comment
  2. The button is disabled until a minimum of one character is entered

9

Cancel

Returns the user to the state previous to tapping reply

reply to comment
reply to comment

Field Definition

ID

Field Name

Description

10

Posted Comment

Includes the date and time posted

11

More Menu

Edit, Delete (out of scope)

12

Highlighted Content

The content stays highlighted while the comment is being made

13

Reply

Displays keyboard; places cursor in Reply (text)

14

Reply (text)

The text box expands to display the comment being entered by the user

15

Reply (button)

  1. For replies, the button is Reply
  2. Disabled until a minimum of one character is entered

Each Comment Contains:
– User icon and first and last name of the commenter
– Time and date comment was made
– Comment content
– More menu (delete, edit)
– Reply prompt

6. SECTIONS

create section
create section

Introduction
Sections provide organization within the project with index tabs and separators that visually group pages.

Figma Location
8 – Sections

Requirements
Section title is mandatory

Field Definition

ID

Field Name

Description

1

Add Section

Starting point for creating a section

  1. Displays keyboard
  2. Puts cursor in section title text box
  3. Opens pages sidebar

2

Section Title 

Mandatory field

3

Create

Disabled until a minimum of one character is entered

4

Cancel

  1. Closes the Create Section popover
  2. Closes the sidebar
  3. Returns the user to the project without creating a section

5

Keyboard

Displays upon tapping Create Section

6

Done

Disabled until a minimum of one character is entered

 

7. PROJECT INFO

project info sidebar
project info sidebar

Introduction
The Project Info sidebar provides the project owner with key details about their project, in addition to the ability to export the project out of INK.

Figma Location
1 – Welcome to INK

Field Definition

ID

Field Name

Description

1

More

Opens and closes the Project Info sidebar

2

Project Info

Sidebar label

3

Export

Export the project as a file (.pdf, .docx) or open in an external app like Google Drive

4

Project Name

Displays the name of the project

5

Owner

The user icon and the user’s first name

6

Location

The notebook that contains this project

7

Shared With

Other users who have view access on this project

8

Word Count

  1. The number of words in the project
  2. The number of characters in the project

9

History

  1. The date and time this project was created
  2. The date and time this project was last modified