CAPSTONE PROJECT 2

CMU-SE 451

USER INTERFACE DESIGN

DOCUMENT
Version: 1.0

BLOCKCHAIN FOR TRACEABILITY

IN MEDICAL
Mentor: Nguyen Dang Quang Huy

Team Member:

Khoa, Tran Van

Trung, Do Duc

Phu, Phan Thanh

Nam, Nguyen Phuong

Approved by

INTERNATIONAL SCHOOL – DUY TAN UNIVERSITY

Da Nang, 28/02/2022
 USER INTERFACE DESIGN DOCUMENT

PROJECT INFORMATION

Project
B-Medical
Acronym

Project
Block Chain for Traceability in Medical
Title

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

Lead
International School, Duy Tan University
Institution

Role Name Email Phone

Project Nguyen Dang Quang

huyndq@gmail.com 0935525354
Mentor Huy

2421120577
Tran Van Khoa lyhoang20012000@gmail.com 0856402080
0

2421120600
Do Duc Trung doductrung142@gmail.com 0829501402
4

2421121579
Nguyen Phuong Nam phuongnamk50@gmail.com 0833282777
5

2421120378
Phan Thanh Phu tthanhphu84@gmail.com 0856464622
7

DOCUMENT NAME
Document User Interface Design Document
Title
Reporting 15 – May - 2022
Period

Author(s) All members

C1SE.16 - Team 1
 USER INTERFACE DESIGN DOCUMENT

Role Developer

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

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

Signature:
Mentor Huy, Nguyen Dang Quang
Date:

Signature:
Scrum
Khoa, Tran Van
master
Date:

Signature:
Phu, Phan Thanh
Date:

Team Signature:
Trung, Do Duc
member(s)
Date:

Signature:
Nam, Nguyen Phuong
Date:

REVISION HISTORY

Version Date Description

1.0 20/02/2021 Create User Interface Design Document

C1SE.16 - Team 2
 USER INTERFACE DESIGN DOCUMENT

CONTENTS
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

C1SE.16 - Team 3
 USER INTERFACE DESIGN DOCUMENT

FIGURES
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

C1SE.16 - Team 4
 USER INTERFACE DESIGN DOCUMENT

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.

C1SE.16 - Team 5
 USER INTERFACE DESIGN DOCUMENT

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

2. List of User Interface for Sprint

User Interface
Roles UI Name Description
ID

User UI-01 HomePage This page is used for users to

use the main functions of the
application, an overview of
the equipment
Admin UI-02 Product This page where the admin
confirmation accepts or rejects the product

User UI-03 Enter product This page where the user

information enters the details of the
product

User UI-04 Enter user This page where users enter

information personal 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

C1SE.16 - Team 6
 USER INTERFACE DESIGN DOCUMENT

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

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

Table 1 : List of User Interface

C1SE.16 - Team 7
 USER INTERFACE DESIGN DOCUMENT

3. Describe User Interface

3.1 UI-01: Home Page

Figure 1 : Home Page (Website)

C1SE.16 - Team 8
 USER INTERFACE DESIGN DOCUMENT

ID Condition Control Type Target

1 View Icon Icon of website

2 View Text Name of project
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.

C1SE.16 - Team 9
 USER INTERFACE DESIGN DOCUMENT

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
22 View Footer Website's footer

Table 2 : Home Page (Website)

C1SE.16 - Team 10
 USER INTERFACE DESIGN DOCUMENT

3.2 UI-02: Censor Product

Figure 2 : Censor Products Page

ID Condition Control Type Target

1 View Text Title of Page

2 View Text Model of the product

3 View Text TTB group of the product

4 View Text Product's manufacturing date

5 View Text Product's expiration date

C1SE.16 - Team 11
 USER INTERFACE DESIGN DOCUMENT

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

C1SE.16 - Team 12
 USER INTERFACE DESIGN DOCUMENT

3.3 UI-03: Product field

Figure 3 : Product Field Page

ID Condition Control Type Target

C1SE.16 - Team 13
 USER INTERFACE DESIGN DOCUMENT

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
3 View Text The name of the tab

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

6 Press Input Trade name of the product

7 Press Input Product model

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

16 Press Input Origin of products

17 Press Input calendar Product's manufacturing date

C1SE.16 - Team 14
 USER INTERFACE DESIGN DOCUMENT

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

25
26 Press Input Specifications and technical criteria of the device

27 Press Input Instructions for use of the product

Table 4 : Product Field Page

C1SE.16 - Team 15
 USER INTERFACE DESIGN DOCUMENT

3.4 UI-04: User Information

Figure 4 : User Information Page

ID Condition Control Type Target

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

C1SE.16 - Team 16
 USER INTERFACE DESIGN DOCUMENT

time

3
View Text List of account information

4 Press Input Tax code of the account registrar

5 Press Input Enter the distributor's email

List of representatives, containing the
6 Press Input necessary information of the person who
represents the company
7 Press Input Full name of the representative

8 Press Input Representative's position

9 Press Input Representative's phone number

10 Press Input Representative's CCCD number

11 Press Input calendar Date of issue of CCCD

12 Press Input Place of issue of CCCD

Business Information Directory, containing
13 Press Input the necessary information of the business that
owns or distributes the product
14 Press Input Company's name

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

Detailed address where the business is
19 Press Input
registered (street name, ...)
20 Press Input Representative phone number of the business

C1SE.16 - Team 17
 USER INTERFACE DESIGN DOCUMENT

21 Press Input Fax number

The business registration certificate has been
22 Press Input licensed by a competent authority and has not
been revoked
23 Press Input Issuance date of the certificate

24 Press Input Certificate Licensing Authority

The medical equipment group publicizes the
25 Press Input
price
26 Press Input Click to select relevant documents
When choosing, it means that you have to take
27 Press Checkbox full responsibility before the law for the
declared items
When your information does not match the
28 Press Button 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

C1SE.16 - Team 18
 USER INTERFACE DESIGN DOCUMENT

3.5 UI-05: Censor Users

Figure 5 : Censor Users Page

C1SE.16 - Team 19
 USER INTERFACE DESIGN DOCUMENT

ID Condition Control Type Target

1 View Icon Title of Page

2 View Text Company name

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

7 View Text Tax code of the business

8 View Text Name of the representative of the business

9 View Text Representative phone number of the business

10 View Text Representative's position

View Text CCCD number of the business representative

11
View Text Fax number
12
View Text International transaction name of the
13 enterprise
View Text Certificate number of the enterprise
14
Press Button Full view of all licenses the business has
15 submitted
Press Button When the information of the enterprise is all
related to the parties and in accordance with
the requirements set forth, upon confirmation,
16 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-
17 register.

Table 6: Censor Users Page

C1SE.16 - Team 20
 USER INTERFACE DESIGN DOCUMENT

3.6 UI-6: Error

Figure 6: Error Page

ID Condition Control Type Target

1 View Icon Icon of website

2 Press Button Click to go to the homepage.

Table 7 : Error Page

C1SE.16 - Team 21
 USER INTERFACE DESIGN DOCUMENT

3.7 UI-07: Product

Figure 7 : Product Page

C1SE.16 - Team 22
 USER INTERFACE DESIGN DOCUMENT

ID Condition Control Type Target

1 View Icon Icon of website

2 View Text Name of project

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

4 View Image Product's manufacturing date

5 View Text Product's photo

6 View Text Name of the product

The price of the product, this price includes
7 Press Button
VAT
8 Press Button Click to add to cart

9 View Text Click to go to product purchase page

The main information tab, contains all the
10 View Text information of the product that the seller
provides
11 View Text Product Type

12 View Text Name of the product

13 View Text Trade name of the product

14 View Text Product Line

15 View Text The unit of measurement of the product

The price of the product, this price includes
16 View Text
VAT
Classification of TTB according to the level of
17 View Text
risk of the product
18 View Text Product manufacturer

C1SE.16 - Team 23
 USER INTERFACE DESIGN DOCUMENT

19 View Text Country of manufacture of the product

20 View Text Country of ownership of the product

21 View Text Product owner company

22 View Text The year of manufacture of the product

23 View Text Origin of products

24 View Text Circulation number / product import license

25 View Text Product's manufacturing date

26 View Text Expiration date of the product

The name of the business announcing the price
27 View Text
of the product
Contact phone number (usually this is the
28 View Text
phone number of the distributor)
The address of the business that registers the
29 View Text
product
30 View Text Model of the product

31 View Text Other Tab

32 View Text General information about the device

33 View Text Basic configuration of the device

34 View Text Device specifications and specifications

35 Press Link Product manual
36 Press Dropdown list Click to go to the other product listing
37 View Text Sort products by price...
38 View Footer Website's footer

Table 8 : Product Page

C1SE.16 - Team 24
 USER INTERFACE DESIGN DOCUMENT

3.8 UI-08: Owner

Figure 8 : Owner Page

C1SE.16 - Team 25
 USER INTERFACE DESIGN DOCUMENT

ID Condition Control Type Target

1 View Icon Icon of website

2 View Text Name of project

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

4 View Text Purchase order confirmation

5 View Text List purchased products

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

7 View Text Purchase confirmation

8 View Image Product images

9 View Text Product's name

10 View Text Type of product

11 View Text Quantity of products purchased

12 View Text Total purchase price of 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

16 View Footer Website's footer

Table 9 : Owner Page

C1SE.16 - Team 26