user interface design document blockchain for traceability in medical

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

Phu, Phan Thanh Nam, Nguyen Phuong

Approved by

INTERNATIONAL SCHOOL – DUY TAN UNIVERSITY Da Nang, 28/02/2022

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

PROJECT INFORMATION

Acronym ^B-Medical Project

Title ^{Block Chain for Traceability in Medical}

Start Date 15 – Feb –2022 End Date 15 – May –2022 Lead

Institution ^{International School, Duy Tan University}

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

Role Developer

Date 20/02/2022 Filename C2SE.02-UserInterfaceDegisn

Document Approvals: The following signatures are required for approval of this

1.0 20/02/2021 Create User Interface Design Document

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

2. List of User Interface for Sprint...6

3. Describe User Interface...7

3.1. UI-01: Home Page (Website)...14

3.2. UI-02: Censor Products Page...16

3.3. UI-03: Product Field Page...18

3.4. UI-04: User Information Page...20

3.5. UI-05: Censor Users Page...22

3.6. UI-06: Error Page...24

3.7 UI-07: Product Page...22

3.8 UI-08: Owner Page...24

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

Figure 1 : Home Page (Website)...14

Figure 2 : Censor Products Page...16

Figure 3 : Product Field Page...18

Figure 4 : User Information Page...20

Figure 5 : Censor Users Page...22

Figure 6: Error Page...24

Figure 7 : Product Page...22

Figure 8: Owner Page... 24

TABLES

Table 1 : List of User Interface...7

Table 2 : Home Page (Website)...8

Table 3 : Censor Products Page...10

Table 4 : Product Field Page...12

Table 5 : User Information Page...13

Table 6 : Censor Users Page...16

Table 7 : Error Page...17

Table 8 : Product Page...19

Table 9 : Owner Page...19

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

1. Introduction

User interface (UI) design is the process designers use to build interfaces in software or computerized devices, focusing on looks or style. Designers aim to create interfaces which users find easy to use and pleasurable. UI design refers to graphical user interfaces and other forms

User Interface Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions.

1.1.Purpose of Document

This document describes the design interface of the “B-Medical” application. The following purpose:

Document the design of user interface of functions of B-Medical

Be the primary document driving the implementation of the user interfaces. Introduce interface design for the reader. Including the background, content information display, command buttons.

1.2.Scope of Document

Overview of the stages and modules of the software. Create complete interfaces, and describe them clearly.

1.3.Document Overview

This document is organized into the following sections:

This document helps to better understand the interface of the Smart Dashboard Application System, detailed specification components and function of the Application.

With this document, the development team can understand the structure and composition to create a consistent and complete system.

Overview of the stages and modules of the software and create a complete interface.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

2. List of User Interface for Sprint

Roles ^{User Interface}

use the main functions of the application, an overview of the equipment

This page where the admin accepts or rejects the product

This page where the user enters the details of the

Admin UI-05 User confirmation This page where the admin accepts or rejects the user

user UI-06 Error page This page but user entered wrong url

user UI-07 Product details This page for users to see

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

product details

User UI-08 Purchase order This page for users to view the orders they have purchased

Table 1 : List of User Interface

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

3. Describe User Interface

3.1 UI-01: Home Page

Figure 1 : Home Page (Website)

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

ID Condition Control Type Target

3 Press Button Click to go to Metamask wallet link page.

4 Press Button Click to go to the register page.

5 Press Input This input is for user to enter the if they want to search

6 Press Button Click to show results. Results will be displayed in component

7 View View Bar Display the list of drugs in the system 8 Press Link Click to go to drugs Page.

9 View Images Show pictures of medicines

10 Press Text Display the name of the drug, when clicked, it will go to the detailed information page of that drug

11 View View Bar Display the list of medical equipment in the system

11 Press Link Click to go to medical equipment Page. 12 View Images Show pictures of medical equipment 13 Press Text Display the name of the medical equipment,

when clicked, it will go to the detailed information page of that medical equipment 13 View Table Display basic details of existing drugs and

medical devices. When clicked, it will go to the detailed information page of that drug.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

14 Press Button Filter results in the medical device category 15 Press Button Filter results under drug category 16 Press Dropdown list Filter results by ASC - DESC 17 View Images Show pictures of medicines

18 Press Text Display the name, when clicked, it will go to the detailed information page

19 View Text Basic detailed information of drugs, medical devices (Model, HSX, Company, ...) 20 View Text Display the price of each drug, medical

device, the price will change when the product owner updates

21 Press Button Go to the page that shows the details of the drug or medical device

Table 2 : Home Page (Website)

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

3.2 UI-02: Censor Product

Figure 2 : Censor Products Page

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

6 View Text Product registration company name 7 View Text Product price of the product

8 View Text The place where the product is registered 9 Press Button Click to go to product details page 10 View Images Go to product details page

11 Press Button Agree, the product will be posted on the website, the products before clicking agree are carefully checked by the relevant parties. 12 Press Button Reject, when the product does not meet the

standards specified by the relevant units on origin, safety, ....

Table 3 : Censor Products Page

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

3.3 UI-03: Product field

Figure 3 : Product Field Page

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

1 View Tab Link to go to the page

2 Press Link Click to go to the manual page. The orientation page is the page that guides the units to do the procedures correctly and accurately, it should be noted to avoid wasting time

4 Press Dropdown list Let the user choose 1 from the list of product types

6 Press Input Trade name of the product

8 Press Input Product's unit of measure

9 Press Input The price of the product, this price does not include VAT

10 Press Input Classification of TTB according to the level of risk of the product

11 Press Input Manufacturers and distributors need to indicate which company the product is manufactured under

12 Press Input Country of manufacture of the product 13 Press Input Country owning the product 14 Press Input The product's owner firm

15 Press Input The year of manufacture of the product

17 Press Input calendar Product's manufacturing date

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

18 Press Input calendar Expiration date of the product

19 Press Input The name of the business announcing the price of the product

20 Press Input Contact phone number (usually this is the phone number of the distributor)

21 Press Input The address of the business that registers the product

22 Drop Input Drag the product photo to upload the image, this will be the product illustration, the uploaded photo must be the actual product photo 23 Press Button Click to select the product's photo, this will be

the product's illustration, the uploaded photo must be the actual product's photo.

24 Press Input General information about the device

Press Input Basic configuration of the device

26 Press Input Specifications and technical criteria of the device 27 Press Input Instructions for use of the product

Table 4 : Product Field Page

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

3.4 UI-04: User Information

Figure 4 : User Information Page

orientation page is the page that guides the units to do the procedures correctly and accurately, it should be noted to avoid wasting

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

time 3

4 Press Input Tax code of the account registrar

List of representatives, containing the necessary information of the person who

represents the company

11 Press Input calendar Date of issue of CCCD

Business Information Directory, containing the necessary information of the business that

owns or distributes the product

15 Press Button International transaction name (if any) 16 Press Dropdown list Province / city where the business is registered 17 Press Dropdown list District where the business is registered 18 Press Dropdown list Ward where the business is registered 19 Press Input ^{Detailed address where the business is}

registered (street name, ...) 20 Press Input Representative phone number of the business

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

21 Press Input Fax number

The business registration certificate has been licensed by a competent authority and has not

been revoked 23 Press Input Issuance date of the certificate

25 Press Input ^{The medical equipment group publicizes the} price

26 Press Input Click to select relevant documents

When choosing, it means that you have to take full responsibility before the law for the

declared items

When your information does not match the existing data, a request will be sent to the

superior for approval 29 Press Button Press to cancel, exit the screen

Table 5 : User Information Page

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

3.5 UI-05: Censor Users

Figure 5 : Censor Users Page

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

ID Condition Control Type Target

3 View Text International transaction name (if any)

4 View Text Province / city where business registration 5 View Text District where the business is registered 6 View Text Ward where the business is registered

8 View Text Name of the representative of the business 9 View Text Representative phone number of the business

11 View Text CCCD number of the business representative

Press Button When the information of the enterprise is all related to the parties and in accordance with the requirements set forth, upon confirmation, the enterprise will be logged into the system.

Press Button When the information of the business does not meet the requirements, the business will be refused, can add additional documents and re-register.

Table 6: Censor Users Page

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

3.6 UI-6: Error

Figure 6: Error Page

2 Press Button Click to go to the homepage.

Table 7 : Error Page

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

3.7 UI-07: Product

Figure 7 : Product Page

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

ID Condition Control Type Target

3 Press Button _{Click to go to Metamask wallet link page.}

7 Press Button ^{The price of the product, this price includes} VAT

The main information tab, contains all the information of the product that the seller

15 View Text The unit of measurement of the product

16 View Text ^{The price of the product, this price includes} VAT

17 View Text ^{Classification of TTB according to the level of} risk of the product

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

19 View Text Country of manufacture of the product

22 View Text The year of manufacture of the product

24 View Text Circulation number / product import license

27 View Text ^{The name of the business announcing the price} of the product

28 View Text ^{Contact phone number (usually this is the} phone number of the distributor)

29 View Text ^{The address of the business that registers the} product

32 View Text General information about the device

34 View Text Device specifications and specifications

36 Press Dropdown list Click to go to the other product listing

Table 8 : Product Page

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

3.8 UI-08: Owner

Figure 8 : Owner Page

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

ID Condition Control Type Target

3 Press Button _{Click to go to Metamask wallet link page.}

6 View Text The name of the company that sold the product

13 Press Button Button to return to old product purchase page

14 Press Button Button to review product details purchased

15 View Text The unit of measurement of the product

Table 9 : Owner Page

</div>