Sofware requirements specification

 Graphic Messenger

By: Olegas Tunevicius

Bigeon

Manesova 345/13 Ceske Budejovice 6, Ceske Budejovice, Czech Republic

Contents

Introduction…………………………………………………………………………….6

Glossary…………………………………………………………………………………6

Key API REST queries list…………………………………………………………….8

Functional map………………………………………………………………………..11

Main entities and attributes…………………………………………………………..12

Modules description…………………………………………………………………..13

Entry……………………………………………………………………………………13

Specific chat……………………………………………………………………………13

Secret chat………………………………………………………………………………13

Encryption algorithm…………………………………………………………………...13

Device registration……………………………………………………………………...14

Encryption scheme……………………………………………………………………..14

Message decryption…………………………………………………………………….15

End-to-end message encryption………………………………………………………..15

Key types………………………………………………………………………………15

Session key generation…………………………………………………………………16

Algorithm to create protected session………………………………………………….16

Message/call history display……………………………………………………………16

Visit status display……………………………………………………………………...16

Message delivery status display………………………………………………………..17

Specific chat notification switch-off……………………………………………………17

2

Username display priority……………………………………………………………...17

Graphic search and graphic input call-out……………………………………………...17

Audio call………………………………………………………………………………18

Data storage…………………………………………………………………………….18

Message and email sending…………………………………………………………….18

Push-messages………………………………………………………………………….18

FABRIC………………………………………………………………………………...18

System notifications……………………………………………………………………18

Application programming languages…………………………………………………..18

Framework……………………………………………………………………………...19

Admin panel……………………………………………………………………………19

Role description in admin panel……………………………………………………….19

Structure description………………………………………………………………….19

1 - welcome screen - log in……………………………………………………………..19

2.1 - entry - number input………………………………………………………………20

2.2 - entry - number code-based confirmation by SMS……………………………..21

2.3 - entry - two-factor authorization (optionally)…………………………………..22

3 - basic tab navigation menu…………………………………………………………..23

4 – Chats………………………………………………………………………………..23

4.1 - New dialogue/group/channel creation – select…………………………………24

4.1.1 - New dialogue creation…………………………………………………...25

4.1.2 - New group creation………………………………………………………26

4.1.3 - New channel creation……………………………………………………28

3

4.1.4 - Secret chat creation……………………………………………………………..28

4.2 - Chat - additional menu………………………………………………………….29

5 - Specific chat………………………………………………………………………...30

5.1 Specific chat - additional menu………………………………………………….31

5.2 - Specific chat - press the message………………………………………………32

5.3 - Specific chat – attach…………………………………………………………...33

5.4 - Specific chat: text entry field…………………………………………………..33

6 - Dialogue/group/channel information……………………………………………….34

6.1 - Dialogue/group/channel information – change………………………………...36

6.2 – Group/channel information - Add participants………………………………...37

6.3 - view common materials………………………………………………………..38

6.4 - “Attach audio” button…………………………………………………………..39

7 - Contacts - general list……………………………………………………………….39

7.1 - Create a contact………………………………………………………………...40

7.2 - Contacts - general list - “invite” button………………………………………...41

8 – Calls………………………………………………………………………………...42

8.1 - Call – General…………………………………………………………………..43

8.2 - Call information………………………………………………………………..44

8.3 - User call view………………………………………………………………….45

9 - input keyboard………………………………………………………………………46

10 - Graphic editor - text input…………………………………………………………47

11 - Graphic editor - symbol input……………………………………………………..47

11.1 - View a symbol………………………………………………………………...48

11.2 - Graphic editor - Search by symbol……………………………………………48

12 - Graphic editor – graffiti……………………………………………………………49

4

12.1 - Graphic editor – Toolbar……………………………………………………...50

13 – Settings……………………………………………………………………………50

13.1 - Basic profile settings………………………………………………………….51

13.2 - My dialogue…………………………………………………………………...51

13.3 - Audio and notification settings……………………………………………….52

13.4 - Privacy settings……………………………………………………………….52

13.4.1 - Block list…………………………………………………………………..53

13.4.2 – Activity……………………………………………………………………53

13.4.3 Screen lock………………………………………………………………….53

13.4.4 Two-step authorization……………………………………………………..54

13.5 - Disc (data)…………………………………………………………………….54

13.5.1 – Cloud data…………………………………………………………………54

13.5.2 – Network data……………………………………………………………...54

13.6 – Design………………………………………………………………………...55

13.7 – Language……………………………………………………………………..55

13.8 - Graphic editor………………………………………………………………....55

13.8.1 - “Add symbol” button……………………………………………………...56

13.9 – Support……………………………………………………………………….56

5

Introduction

Mobile application development - cross-platform (IOS/Android) graphic messenger enabling users to exchange messages and media files of various formats. Project encryption technologies:

*

-  AES (Advanced Encryption Standard) - 256 


*

-  RSA (Rivest, Shamir and Adleman) 


*

-  Diffie-Hellman protocol

*

-  SHA-1, MD5

*

Glossary

7

Key API REST queries list

Functional map

*

The given map demonstrates interconnections between application structure and functionality.

11

Main entities and attributes

*

USER

CHAT

*




Modules description

Log in

Mobile phone number serves as the user identifier. Telephone can be changed in settings. More than one device can be used simultaneously for authorization. Authorization comprises SMS sending of the code to confirm authorization (sending is implemented via Unisender service).

Two-factor authorization - in privacy settings (13.4) - Two-step authorization (13.4.4) can include two-step authorization symbol.

Specific chat

Massage types: image (displayed as the image thumbnail, with full-screen display when tapped + image name represented below), video, audio (+ application-based audio, link (link should have title and description part, preview thumbnail), graffiti, call information.

Regular message autodelete – autodelete option in chat settings (3 seconds, 5 minutes, 1 hour, 6 hours, 24 hours, 3 days, 7 days, never)

Secret chat

Created personally by one user as a dialogue. Differs from standard chat in using final message encryption. Message data is not stored on the server (cloud). Message autodelete timer can be set for the given chat (3 seconds, 5 minutes, 1 hour, 6 hours, 24 hours, 3 days, 7 days, never). If to log in own account on the other device, there will be no secret chat data. End-to-end encryption is used for the encryption of secret chat messages.

Encryption algorithms:

13

-  AES (Advanced Encryption Standard) - 256

-  RSA (Rivest, Shamir and Adleman)

-  Diffie-Hellman protocol

-  SHA-1, MD5 – hash-algorithms, which are used in many cryptographic protocols and applications for secure hashing.


Device registration 


During the first application launch, the user enters personal telephone number to receive five-unit confirmation code.

After code entry, the application initiates authorization protocol:

*

-  Client  sends query on the S server with the line comprising random bit sequence (128 bits).

*

-  S sends in reply the other random sequence (128 bits), n number (64-) and public RSA key digital signature (derived from low-order 64 bits SHA1 hash of the public key server).

*

-  C decomposes n into two p and q prime numbers, resulting in p < q, which serves as functional check. Client has the set of public server keys, stored on the device. Therefrom C chooses server_pk key, which is qualified for the signature from S server.

*

-  C chooses another random line (256 bits), which differs from the previous client and server line. The client compiles the set of three random lines, n numbers, p and q, encrypts it by means of server_pk key based on RSA algorythm and sends it on S server.

*

-  S replies with g, p, g_a parameters of Diffie-Hellman protocol, encrypted by AES-256 algorithm in IGE mode, using temporary key and Salt, obtained from the new client and server line.

*

-  C chooses private key b, calculates public key g_b=g^b mod_p and common public key K= (g_a)^b mod_p. Later g_b (encrypted) is moved to S server 


*

*

Encryption scheme

*

-  auth_key - public encryption key, which is generated during chat creation

* 14

*

-  Payload - encryption package (from preceding section)

*

-  msg_key - low-order 128 bits SHA1-hash of the encrypted package. Used for de-encryption validity check.

*

-  Padding - 0-96 bits, which are added to make block size equal to 128 bits.

*

-  AES key and IV - AES algorithm encryption parameters in IGE mode. Obtained by means of KDF.

*

-  KDF (key derivation function) - AES key and IV derivation function based on msg_key and auth_key 


*

-  auth_key_id - low-order 64 bits SHA1-hash of the public K key. Public key is regenerated again in case of collision.

Message decryption

-  Client receives encrypted message, checks its authenticity auth_key_id -calculates low-order 64 bits SHA1-hash of the public K key. In case of value match message decryption is continued.

-  AES key and IV are formed by means of key derivation function

-  Then there takes place block-based data decryption by AES-IGE algorithm. As a result, we get the package that must match with the sender’s package.

-  We compare low-order 128 bits SHA1-hash of the decrypted package with the received msg_key. As a result, we get decrypted message

Message end-to-end encryption 


Block-base encryption AES-256 algorithm is used for encryption. Diffie-Hellman protocol is used to exchange 2048-bit RSA-keys between two devices.


Key types 


1. Identity key (Identity key pair) - is generated during application installation.


2. Signature key (Signed key pair) - is generated with the use of identity key and is changed periodically.

3. The set of one-time keys (One-time pre-keys) - these are constantly used keys with unlimited generation.

15

Session key generation

1. Root key


2. Keys Chain


3. Message Key

Algorithm to create protected session

A - the client, who initiates the first connection 


B - the client, to whim the message must be delivered 


1.  - public key query (identity, signature and one-time (one) of B from the server.


2. Server key return. Deletion of one-time key from the server. If there are no one-time keys on the server, and B can not add them (offline), the server will not return the public one-time key.

3. A protects B’s keys.


4. A receives secret expression with own and B’s keys, Attachment will be used to obtain root key and keys chain.

5. A transfers the cast of his own keys, do that B can obtain the identical secret expression. B deletes one-time key used by A to create the secret.

Message/call history display

- the last 24 hours in 15:23 format


- from 1 to 7 days in the format of Mon, Tue, Wed...

- from 7 days in the format of 12.06.15

Visit status display

*

-  online 


*

-  was only 15 minutes ago (up to 59 minutes) 


*

-  was online 19 hours ago (from 1 hour to 24 hours ago) 


*

-  was online yesterday (from 24 to 48 hours) 


*

-  was online on Friday (from 2 to 7 days) 


*

-  was online on 12.06.18 (from 7 days and more)

16

Message delivery status display 


*

-  sent (as preloader) 


*

-  delivered 


*

-  read

Specific chat notification switch-off

Variants of notification switch-off: 


*

-  15 minutes, 


*

-  1 hour, 


*

-  3 hours, 


*

-  6 hours, 


*

-  24 hours, 


*

-  always

Username display priority

*

-  Contact name is displayed first if the application owner has pointed out the given contact in the application

*

-  The second priority belongs to the contact name from contact list on the phone of application owner (in case if the contact name in the application was not entered by the application owner) 


*

-  If the contact is not named in the user’s application or contact list, then it receives the contact name, provided by this contact personally in settings.

Graphic search and graphic input call-out

-  when tapping the text entry line - there opens regular keyboard, when swiping the text entry field - graphic text entry field is opened. 


-  Graphic search is called when swiping the search box. 


Elements: 


-  primary color selector panel 


-  color palette selector panel (with the depiction of hex color code) 


-  line width selector panel


-  line type selector panel (straight line, hashed line, airbrush, eraser) 


17

-  setup panel (transparence, contrast, brightness, intensity)


Audio call

Connection of listening-protected TLS/SRTP encryption protocol: 


*

-  TLS (Transport Layer Security) - to provide SIP safety (Session Initiation Protocol)


*

-  SRTP (Secure Real-time Transport Protocol) - for RTP protection. 


Data storage

Amazon cloud data storage.

Message and email sending

External service - Unisender 


Push-messages

GCM (Google Cloud Messaging) for Android

APNs (Apple Push) for iOS 


FABRIC 


The use of external service for the statistical mapping of application distribution

System notifications 


*

-  New versions release, 


*

-  application news - admin-mediated news sending (news structure: - heading; -description; - image)

Application programming languages 


*

-  iOS - Swift 


*

-  Android - Java 


18

Framework


*

-  yii2 


Admin-panel 


Admin-panel operates based on AdminLTE pattern.

Role description in admin-panel

*

-  Super-administrator - the role with all capabilities, including the option to create new administrators. 


*

-  Administrator - possesses full functional, but for the option to create new operators

Structure description

1 - welcome screen - entry

Elements:

-  image - statics 


-  description - statics 


-  Log in - button 


19

2.1 - entry - number input

-  Heading - statics 


-  Description - statics 


-  Number entry field - entry field 


- “Send code” - Button 


20

2.2 - entry - number code-based confirmation by SMS 


Elements: 


- Heading - statics 


- Description - statics 


- “Enter the code” - entry field for SMS-delivered code (5-symboll code).

21

2.3 - Log in - two-factor authorization (optionally) Elements: 


 

-  Heading - statics 


 

-  Description - statics 


 

-  Select - password (8-symbol) or symbol entry 


 

-  Password (or symbol) entry field

 

- “Log in” button

22

 

3 - basic tab navigation menu

Elements:

- “Contacts” + icon 


- “Calls + icon 


- “Chats” + icon 


- “Settings” + icon 


4 - Chats

Elements:

23

-  Heading - statics 


-  New dialogue/group/channel creation - select (4.1) - button (icon) 


-  Delete chats from the list - button (icon) – calls check boxes set out opposite all the chats. When choosing one and more chats, there appear “delete” and “back” buttons.

-  Specific chat. Elements: photo + name (title) + counter (if there are unread messages) + the last message, (if it includes attached file or image, instead of the last message it is written, respectively: “file”, “image”, “audio” or “graffiti”) + time, day of week or date: (time (15:23) – if the last chat message has been received/sent on the current day; day of week (Mon, Tue, Wed, Thur, Fri, Sat, Sun) – if the last chat message has been received/sent within 7 days; date (23.02.15) – if the last chat message had been received/sent after 7 days. 


-  basic tab navigation menu (3) 


-  Chat – additional menu (4.2) 


24

4.1 - New dialogue/group/channel creation - select

Screen represents the buttons of group, channel creation, as well as the contact list (with online status to be dispayed), when moving to any contact New dialogue creation function gets activated (4.1.1)

Elements:

- Search box - search by nickname, name, number, symbol

- Create group 


- Create channel 


- Create secret chat 


- ontact list in alphabetical order

4.1.1 - New dialogue creation 


25

Description: While being on New dialogue/group/channel creation – select screen (4.1), specific contact tap opens Specific chat (5) with the selected user. In case of previous message exchange with this user, message history with the given user will be opened.

4.1.2 - New group creation

Description:

Restriction on the number of users - a maximum of 20 users per one group. The given chat has the option to with the option t specify group name, description, to share information among all group members. The group comprises participants with common and administrative rights (add and delete participants, edit general group information, block list management).

Steps:

- Screen 1 - select participants. Elements: search (by nickname, name, number, symbol (11), contacts list, check boxes to select several screens.

26

Screen 2 - enter general group information. Elements: name, description, photo (tap opens gallery), list of participants (non-editable), “back” button, “done” button.

27

Screen 3 - move to Specific chat (5) channel

4.1.3 – New channel creation

Steps:

- Screen 1 - select participants. Elements: search (by nickname, name, number, symbol), contacts list, check boxes to select several screens.

- Screen 2 - enter general group information. Elements: name, description, photo (tap opens gallery), list of participants (non-editable), “back” button, “done” button. 


-  Screen 3 – move to Specific chat (5) channel

4.1.4 – secret chat creation 


Description:

28


Tapping on the given button opens contacts list to choose the user for the creation of secret chat. 


4.2 - Chat - additional menu 


Description: press of the chat field for 0.5 seconds opens additional menu with the options to pin, mute, delete the chat 


Elements: 


*

-  Pin + icon 


*

-  Mute + icon 


*

-  Delete + icon

 


* 29

*

*

5 - Specific chat

*

*

Description:

*

Chats are displayed in chronological order, which changes depending on the last received/sent message of the given chat.

*

Elements:

*

*

- Heading - chat name/user name/group name/channel name/my dialogue

- “Back” button - return to chats list (4) 


*

-  The last visit time of chat member (for personal dialogue only) or the number of participants/subscribers (for groups/channels). 


*

-  image thumbnail press moves to Dialogue/group/channel information (6) 


*

-  participant’s messages/posts - message history (types: text message, image, video, audio, link (link should have title and description part, preview thumbnail), call information (call time, call type, “Call” button), graffiti (12)), message time, message delivery status (sent, delivered, read) 


*

-  text entry filed (closed status) (5.4) - tap opens test entry keyboard (9), when swiping the text entry field - Graphic text entry (11) field is opened. 


*

- “Pin” button (5.3) - file, photo/video (from gallery), contact, photo/video from camera, “back” button, create audio, graffiti

*

-  icon with the image of dialogue/group/channel - move to information 


*

-  additional menu: search, call, mute (5.1) 


*

-  message press (5.2): reply, copy, forward, delete, select several, edit, cancel (two option appear when the button is pressed - check the message (after that, it will be sent to the list of checked messages, which can be found in Dialogue/group/channel/secret chat information (6) or in Checked messages) or check by the symbol (message is added to the list of checked messages + the symbol is attributed to the specific message for quick search)). 


*

- “Down” button appears when the screen is scrolled for more than its half. 


*

- “Pin audio” button (6.4) 


30

*

5.1 Specific chat - additional menu

Description:


Appears when chat Heading is pressed (5)

Elements:

-  search (+ icon) - search by key chat words. When search icon is swiped Graphic editor - text entry (10) opens. 


-  call (+ icon) - call user of the given chat


-  mute (+ icon)

31




5.2 - Specific chat - press the message

-  reply - quotes the marked message 


-  copy - clipboard 


-  forward - opens chats list, the given message is pinned above text entry field when the chat is chosen


-  delete - delete for me, delete for everyone

-  check several - the check box appears opposite every message to choose the specific messages for being forwarded or deleted (only for me/for everyone) 


-  edit - edit text message only


- heck by the symbol - (attribute symbol to specific message for quick search - used rarely for important messages)

32

5.3 - Specific chat - pin

Elements:

-  file - opens files on the phone (for instance, file manager, file cloud, gallery (similar to image/video attachment, without compression) 


-  photo/video - opens device gallery 


-  contact - opens application contact list

- graffiti - opens Graphic editor - graffiti (12)

5.4 - Specific chat: text entry field

Description:

Text entry field swipe opens graphic text entry (11). Text entry field pressing for 0.5 seconds opens context menu:

-  there appears the option to choose text and then copy/cut it


- “Paste” (if the clipboard contains text data) 


-  Graphic editor - opens Graphic editor - text entry (10) 


-  Keyboard - opens entry keyboard (9) 


-  Choose main text moderations (bold, italic, underlined)

33




6 - Dialogue/group/channel information

Elements:

-  Heading - Information 


-  Image (dialogue/group/channel user’s thumbnail) 


-  name/title (dialogue/group/channel name) 


-  nickname (for dialogue only) 


-  number (for dialogue only) 


- Symbol - Attribute graphic symbol - opens Graphic editor entry field - symbol entry (11) or opens the current symbol - user’s symbol (11.1) 


-  online status (for dialogue only) 


-  Description (up to 70 symbols) 


- “Change” button (6.1) 


- “back” - return to previous screen 


34

-  audio call option (for dialogue only) - opens User call view (8.3)


- “Send audio message” button (6.4) 


-  Send message - move to chat page (for dialogue/group only) - opens Specific chat (5). 


-  Secret dialogue creation (for dialogue only) - opens secret chat creation (4.1.4) 


-  Move to “view shared materials (6.3)” screen 


-  view public groups (for dialogue only) 


-  checked messages list (for any chat type, but for the secret one) 


- when opened, it is displayed as the chat with the checked messages only in chronological order. Checked messages should have a mark (checked and symbol-checked messages have different marks)


-  view participants (for group/channel) 


-  admin list (group/channel) - view admins actions, option to add admin


-  view block list (group/channel) - view the list of blocked users, option to block group/channel participant. 


-  add participants option (6.2) (for groups/channels only) 


-  Modal option: notification settings (variants of notification switch off: 15 minutes, 1 hour, 3 hours, 6 hours, 24 hours, always). 


-  Block user 


35

6.1 - Dialogue/group/channel information - change

Elements:

- Heading

-  change name (for dialogue only), group/channel name (for admin) 


-  change number (for dialogue only) 


-  share nickname - copies user’s nickname, opens contact list, the nickname is filled in the text entry field after choosing a contact

-  change link (for channels) 


-  share link (for groups only) - copies group link, following a link, the user becomes group member. 


-  change photo - opens phone gallery 


-  change description - calls entry/graphic entry keyboards

-  change search graphic symbol - calls graphic symbol entry

-  change name (for group/channel only) 


-  delete (group, channel, dialogue) 


36

6.2 - Group/channel information - Add participants

Elements:

- Heading

- “Back” button 


-  search for participants - search by nickname, name, number, symbol


-  choose participants from contact list (name/nickname, photo, status) 


37

6.3 - view shared materials 


Description: 


Displays all the attached tab-sorted files, media, links.

Everything is displayed in chronological order.

Elements:

- “Back” button

- “Select” button - calls checkboxes opposite every file/image/link. When choosing any of them, “Check” button is substituted by “delete” button, and “Back” button is substituted by “Cancel” button. When “Delete” button is pressed, modal confirm box appears with “delete” and “back” buttons.

38

 When “Cancel” button is pressed, everything returns to the status when the user switched to “View shared files” section (6.3) 


-  tabs - tab-based file filtering (files, media, links) 


-  tile-based file/image/link list 


6.4 - “Pin audio” button

Description: 


Audio can be pinned when record icon is pressed. Recording lasts till the button is pressed, otherwise the button is substituted by “Play” button, record duration (minutes:seconds), “send” button to the right side and cross to delete it.


7 - Contacts - general list 


Description: 


When the relevant contact is chosen, we move to specific chat with the chosen contact

Elements: 


- Heading 


- “Create contact” button (7.1)

-  search box (contact search) - search by nickname, name, number, symbol


- “invite” button (7.2) 


-  choose participants from contact list (name/nickname, photo, status) 


-  basic tab navigation menu (3) 


39

7.1 - Create contact 


Elements: 


- Heading 


- Display icon image 


-  input “name” 


-  input “surname” 


- “Add phone” button - calls digit entry keyboard when clicked. 


-  Add symbol - opens graphic editor - symbol entry (11) 


40

7.2 - Contacts - general list - “invite” button 


Description 


When choosing contacts, click on “Invite” button opens message sending to the given contact with the use of smartphone functions. The message already contains attached message template.


Elements:

-  Heading 


-  Search by contacts - displays contacts from the device’s phone book - search by key words match. 


- “invite to appname” button - invitation sending by SMS. 


-  contacts list (name/nickname, icon) 


-  option to choose several contacts using checkboxes 


41

- “Select all” button selects all the contacts. 


8 - calls 


Description: 


Presentation of call history in chronological order. In the presence of several call types during the current day, they are displayed as the single entry with counter (the number of calls). When passing to

Elements:

- “Change” button - opens the option to delete the history of specific call (“back” button appears instead of “change” button for previous state return). After checkbox selection of the field to delete it is necessary to press “delete” button. 


42

-  tabs - all (full call list in chronological order), missed (displays incoming unanswered calls). 


- “Call” icon - general (8.1) 


-  specific call entry: contact’s icon, name, call type (incoming, outgoing, missed), call starting time (time of phone request creation or call answering), call information (8.2) 


-  basic tabs navigation menu (3) 


8.1 - Call - general

Description:

Type: contacts list with search box

The search is performed as:

- nickname


43

- contact name


- contact number


- graphic symbol

Elements:

-  search: is implemented by number, nickname, name, symbol (Graphic editor – symbol entry (11)) 


-  contacts list: with alphabetical classification. Tap on specific contact opens its call view and makes automatic call. 


8.2 - call information 


Elements: 


-  display user photo 


-  user name - tap on user name transfers to user info page

-  online status 


-  user nickname 


- “User symbol” button (11.1) - moves to individual page displaying user symbol and its edit option 


-  call information - call date, time, type, duration


- “Call” button - opens User call view (8.3)

44




8.3 - User call view

Elements:

-  contact photo (full screen) 


-  contact name (nickname) 


-  current call status (connection, call, connected, reconnection, low coupling) 


-  microphone switch on/off button


-  volume setup button - audio setting slider pops up when tapped. 


- “end call” button 


45

9 - entry keyboard

Description:

Standard ios/android keyboard with additional application-based elements

Elements:

-   ios/android keyboard 


-  typed text display field 


- “pin audio message” button (6.4) 


- “pin” button (5.3) 


- “send” button 


46

10 - Graphic editor - text entry

Description:

Mockup sample can be found in Graphic editor - graffiti (12).

Text entry is based on graphic editor via screen swiping of the device and drawing the relevant symbols, which are converted to alphanumeric character when single symbol entry is finished. Its functioning is based on graphic optical character recognition technology.

Interaction:

-  One symbol at time entry (letters/numbers etc.) 


-  In order to fix the entry completion of one symbol, it is necessary to pause the entry for 0.4 seconds or swipe (take) up the letter.

-  Finished letters/numbers shift to the upper screen and are displayed in alphanumeric type. 


-  To undo the entry of converted letter press “back” button.


-  To undo the entry of non-converted symbol swipe it down or press “back” button 


Elements: 


*

- “Back” button 


*

- “Undo” button - the last operation is cancelled


*

- “Send” button 


11 - Graphic editor - symbol entry 


Description: 


Mockup sample can be found in Graphic editor - graffiti (12) 


Graphic editor-based symbol entry and symbol attribution to separate entities (chats, message, two-factor authorization). From henceforth, search by symbols can be used (11.2).

47

 Apart from by-hand symbol drawing, user can pin image and attribute it to certain entity.

Interaction:

-  In order to fix the entry completion of one symbol, it is necessary to pause the entry for 0.4 seconds or swipe (take) it up.

-  Finished symbols shift to the upper screen.


-  To undo the entry of the symbol transferred to the upper screen press “back” button.


-   To undo the entry of non-converted symbol swipe it down or press “back” button 


Elements: 


*

- “Back” button 


*

- “Undo” button - the last operation is cancelled 


*

- “Pin” button - opens phone Gallery for image loading on the screen of graphic editor - image can be used for search by symbol. 


*

- “Send” button 


11.1 - Symbol display 


Description: 


Individual image with the image of current symbol for chat/password/message. If the symbol is not attributed to the contact, its thumbnail (stub) is displayed. 


Elements: 


*

- “back” button 


*

- “Change” button - opens Graphic editor - symbol entry (11) 


*

-  Current symbol or stub 


11.2 - Graphic editor - Search by symbol

Description:

Mockup sample can be found in Graphic editor - graffiti (12) Search by symbol is based on graphic optical character recognition technology.

48

When searching by symbol, the symbol can be entered via graphic editor - symbol entry (11) or by pinning the image for search.

Search by means of graphic symbol entry is called by search box swiping.

Interaction:

-  In order to fix the entry completion of one symbol, it is necessary to pause the entry for 0.4 seconds or swipe (take) up the letter. 


-  Finished symbols shift to the upper screen. 


-  To undo the entry of the symbol transferred to the upper screen press “back” button.


-  To undo the entry of non-converted symbol swipe it down or press “back” button 


Elements: 


*

-  «Back» button 


*

- “Undo” button - the last operation is cancelled 


*

- “Pin” button - opens phone Gallery for image loading on the screen of graphic editor - image can be used for search by symbol.


*

- “Send” button 


*

12 - Graphic editor - graffiti 


Description:

The option to make an image in graphic editor and send it in user message or save graffiti as an image. 


Elements: 


- «back» button 


- “Undo” button - the last operation is cancelled 


-  Tool bar (12.1) 


- “Pin” button - opens phone Gallery for image loading on the screen of graphic editor.


- “Save” button - saves an image in smartphone gallery. 


- “Send” button 


49

12.1 - Graphic editor - Tool bar 


Elements: 


       -  primary color selector panel 


       -  color palette selector panel (with the depiction of hex color code) 


-  line width selector panel 


-  line type selector panel (straight line, hashed line, airbrush, eraser) 


-  setup panel (transparence, contrast, brightness, intensity)

13 - Settings 


Description:


50

move from Basic tab navigation menu (3).

Elements: 


-  Block with name, phone, nickname and thumbnail photo - move to Basic profile settings (13.1) 


*

-  My dialogue (13.2) + icon 


*

-  Marked messages - general list of marked messages (When moving to - chats list with marked messages. When moving to chat - marked messages list in the given chat) 


*

-  Audio and notification settings (13.3) + icon 


*

-  Privacy settings (13.4) + icon 


*

-  Disc (data) (13.5) + icon 


*

-  Design (13.6) + icon 


*

-  Language (13.7) + icon 


*

-  Graphic editor (13.8) + icon 


*

-  Support (13.9) + icon 


*

-  Basic tab navigation menu (3) 


*

13.1 - Basic profile settings


*

Elements: 


*

-  name 


*

-  surname 


*

-  photo - opens phone gallery when tapped 


*

-  nickname 


*

-  about me - 70 symbols 


*

-  number - when the number is changed, the changes are automatically duplicated to all the contacts. In addition, when the number is changed all the information – history messages, files, contacts etc. will be transferred to the user’s new number.


          - Log out (log out) the authorized user - transfer to welcome screen - log in

             page (1).

 

 13.2 - My dialogue

Description:

51

Move to chat with oneself to save the necessary information.

Elements:


element duplication - Specific chat (5) with My dialogue heading.

13.3 - Sound and notification settings

Description:

Notification management in opened and closed application. The should also be the option of notification management in the chat view section: dialogue, channel, group.

Setting elements for opened application:

*

-  Notification signal - turn on/off 


*

-  notification vibration - turn on/off 


*

-  display notification text - notification preview with the user/channel/group name and the fragment of notification text at the screen top. Tap transfers to specific chat (5). 


*

-  notification sound setting - select notification melody for messages 


*

-  call sound setting - select notification melody for call. 


Setting elements for closed application: 


*

-  Notification signal - turn on/off 


*

-  notification vibration - turn on/off 


*

-  display notification text - notification preview with the user/channel/group name and the fragment of notification text at the screen top. Tap transfers to specific chat (5). 


*

-  notification sound setting - select notification melody for messages 


*

-  call sound setting - select notification melody for call. 


General: 


- reset notification settings - return to default settings.

13.4 - Privacy settings

Elements:

52

13.4.1 – block list

Description:

- adding users from general contact list and phone contacts to the block list, hereinafter limiting message/call delivery from the given contact. There should also be the option of user deletion from the block list, so that they could return to the previous state and was able to send messages.

Elements:

*

-  display those previously added to the block list. Elements: “block list - add” button (13.4.1.1) + icon and name of the added user 


*

-  screen 13.4.1.1 - “block list - add”. Elements: search box (by name, nickname, symbol, number) + phone and application contact list in alphabetical order. 


13.4.2 - Activity: 


Description: 


- 13.4.2.1 - online display settings. Elements: «back» button, “everyone sees” button, “your contacts see only” button, “no one sees” button + online display settings for specific users (13.4.2.1.1) (moves to individual screen - Elements: «back» button, “change” button (to delete users from block list), “add” button (13.4.2.1.1.1) + the list of blocked users in alphabetical order). When passing to “add” (13.4.2.1.1.1) user sees the following elements: «back» button, search box by name, nickname, number, symbol + users list in alphabetical order. 


-  13.4.2.2 - End all the active sessions - if the particular number was authorized in one and more devices, tap on the given button opens the window to enter the code, which is send as SMS on the provided number. The confirmation for every device, but for the one with the given action performed, is followed by automatic request for account log out.


-  13.4.2.3 - authorization log - Elements: «back» button, heading, authorization table - date and time, device, ip, status (successfully - everything is OK / failed - if there was authorization request without authorization code entry) 


13.4.3 Screen lock 


Description: 


53

-  add code to unlock - opens the screen of adding 6-digit code to unlock. 


-  add symbol to unlock - opens the screen of adding symbol to unlock application screen. 


13.4.4 Two-step authorization 


Description: 


Code (or symbol) activation for application authorization (create own code or symbol) - operates in addition to confirmation SMS-based code. Displayed as the log in confirmation screen, which follows SMS confirmation.

Elements:

-  Heading 


-  Description 


-  Entry field for two-step authorization code 


- “or add authorization symbol” button - the given field opens Graphic editor - symbol entry screen (11) 


- “Back” button 


- “Done” button 


13.5 - Disc (data) 


Elements: 


13.5.1 - Cloud data 


Elements: 


- select data storage option (always, month, week, 3 days)

- clear cache - clear cache for all data 


13.5.2 - Network data 


Description: 


Display statistics for the data sent and received via wi-fi and cellular data 


Elements:

 

- “back” button 


 -  tabs - wi-fi / cellular data 


 54

 -  Total: sent / received (with the number by side) 


 -  messages: sent / received (with the number by side) 


 -  photos: sent / received (with the number by side) 


 -  video: sent / received (with the number by side) 


 -  audio: sent / received (with the number by side) 


 -  files: sent / received (with the number by side) 


 

- calls: sent / received (with the number by side)

13.6 - Design

Description:

-  dialogue background settings (secret included) 


-  group background settings 


-  channel background settings

-  font size settings 


When moving to any setting screen, there is an option to select from image collection of the given application or the option to draw graffiti and set it as chat background. 


13.7 - Language 


Description: 


Set language from the versions existing in the application. English is a default application language. 


13.8 - Graphic editor 


Description: 


The option of quick symbol attribution to channels/groups/contacts/messages 


Tab elements: 


*

- “Back” button 


*

-  symbols (contact/group/channel/secret chat list with already attributed symbols) - here user can see tabs - chats, messages, contacts. Tap opens contact or message list with attributed symbols, or chat list. Here the one can choose the required entities with symbols and remove symbols from them.

*

        

* 55

*

- “Add symbol” button (13.8.1) - transfers to chat (dialogue/group/channel/secret chat) or contact list.

*

When choosing the required, Graphic editor - symbol entry (11) opens to attribute symbol to the given entity.

13.8.1 - “Add symbol” button

Elements:

-  search (by name, symbol, nickname, phone number/group name, channel symbol/name, symbol). 


-  chat (group/channel/secret channel) or contacts list 


13.9 - Support 


Description: 


Opens new specific chat (5), with the administrator as its participant, who will reply your messages.

56