user interface design document blockchain for traceability in medical

Results will be displayed in component7 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 medicines10 Press Text

CAPSTONE PROJECT 2

CMU-SE 451USER INTERFACE DESIGN

DOCUMENT

Version: 1.0BLOCKCHAIN FOR TRACEABILITY

IN MEDICALMentor: Nguyen Dang Quang Huy

Team Member:

Khoa, Tran VanTrung, Do DucPhu, Phan ThanhNam, Nguyen PhuongApproved by

INTERNATIONAL SCHOOL – DUY TAN UNIVERSITY

Da Nang, 28/02/2022

PROJECT INFORMATION

Project

Acronym B-Medical

Project

Title Block Chain for Traceability in Medical

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

Institution International School, Duy Tan University

Role Developer

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

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

Mentor Huy, Nguyen Dang Quang Signature:

1.0 20/02/2021 Create User Interface Design Document

1 Introduction 5

1.1 Purpose of Document 5

1.2 Scope of Document 5

1.3 Document Overview 5

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

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

1 Introduction

User interface (UI) design is the process designers use to build interfaces insoftware or computerized devices, focusing on looks or style Designers aim to createinterfaces which users find easy to use and pleasurable UI design refers to graphicaluser interfaces and other forms

User Interface Design focuses on anticipating what users might need to do andensuring that the interface has elements that are easy to access, understand, and use tofacilitate 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, contentinformation 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 DashboardApplication System, detailed specification components and function of theApplication

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

Overview of the stages and modules of the software and create a completeinterface

2 List of User Interface for Sprint

Roles User Interface

use the main functions of theapplication, an overview ofthe equipment

information

This page where users enterpersonal information

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

product detailsUser UI-08 Purchase order This page for users to view

the orders they havepurchased

Table 1 : List of User Interface

3 Describe User Interface

3.1 UI-01: Home Page

Figure 1 : Home Page (Website)

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 thatdrug

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 detailedinformation page of that medical equipment

13 View Table Display basic details of existing drugs and

medical devices When clicked, it will go tothe detailed information page of that drug

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 productowner updates

21 Press Button Go to the page that shows the details of the

drug or medical device

Table 2 : Home Page (Website)

3.2 UI-02: Censor Product

Figure 2 : Censor Products Page

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 arecarefully checked by the relevant parties

12 Press Button Reject, when the product does not meet the

standards specified by the relevant units onorigin, safety,

Table 3 : Censor Products Page

3.3 UI-03: Product field

Figure 3 : Product Field Page

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 theprocedures correctly and accurately, it should benoted 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 manufacturedunder

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

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 uploadedphoto 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 photomust be the actual product's photo

24 Press Input General information about the device

25

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

3.4 UI-04: User Information

Figure 4 : User Information Page

orientation page is the page that guides theunits to do the procedures correctly andaccurately, it should be noted to avoid wasting

4 Press Input Tax code of the account registrar

List of representatives, containing thenecessary information of the person whorepresents the company

11 Press Input calendar Date of issue of CCCD

Business Information Directory, containingthe necessary information of the business thatowns 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

21 Press Input Fax number

The business registration certificate has beenlicensed 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

29 Press Button Press to cancel, exit the screen

Table 5 : User Information Page

3.5 UI-05: Censor Users

Figure 5 : Censor Users Page

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 withthe requirements set forth, upon confirmation,the enterprise will be logged into the system

17

Press Button When the information of the business does not

meet the requirements, the business will berefused, can add additional documents and re-register

Table 6: Censor Users Page

3.6 UI-6: Error

Figure 6: Error Page

2 Press Button Click to go to the homepage

Table 7 : Error Page

3.7 UI-07: Product

Figure 7 : Product Page

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 theinformation of the product that the seller

provides

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

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

3.8 UI-08: Owner

Figure 8 : Owner Page

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