CMU-SE 303 AIS SOFTWARE TESTING

USER INTERFACE DESIGN DOCUMENT

WEBSITE SELLING PET ACCESSORIES

Submitted by

Han,Huynh Nguyen Bao

Linh, Nguyen Huu
Binh, Do Duc
Duy,Le Van Anh
Ngoc, Nguyen Nhu
Phong, Phan Tuan

Approved by
Trinh, Tran Thi Thuy M.Sc.

Proposal Review Panel Representative:

Name Signature Date

Software Testing- Mentor:

Name Signature Date

WSPA(Reminder) User Interface Design Document v1.2
PROJECT INFORMATION

Project
PA
acronym
Project title Website Selling Pet Accessories
Start date 17– Sep – 2022 End Date 18-Sep-2022
Lead
International School, Duy Tan University
institution
Tran Thi Thuy Trinh
Project
Email: thuytrinh85@gmail.com
mentor
Phone: 0795898823
Partner
Duy Tan University
organization
Han,Huynh 0898227098
Scrum Master huynhbhan02@gmail.com
Nguyen Bao
Product 0394048042
Binh, Do Duc binh8101234@gmail.com
owner
Duy, Le Van Anh anhduy9102@gmail.com 0708137472
Team Linh, Nguyen Huu huulinh250702@gmail.com 0942646287
members Phong, Phan Tuan phanphong.work@gmail.com 0839812252
Ngoc, Nguyen Nhu ngoc0935518742@gmail.com 0796742524

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
PROJECT PLAN DOCUMENT

Document
User Interface Design Document
Title
Author(s) Han,Huynh Nguyen Bao

Role Product Owner, Team Member, Scrum Master

September 20,
Date File name: [TMOS]UserInterfaceDesign_ver1.2
2022
URL

Access Project and CMU Program

REVISION HISTORY

Version Person(s) Date Description

Han,Huynh September 20, 2022
1.1 Draft for comment
Nguyen Bao
Han,Huynh September 20, 2022
1.2 Draft for comment
Nguyen Bao

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
SIGNATURE
Document Approvals: The following signatures are required for approval of this
document.
Signature:
Mentor Trinh, Tran Thi Thuy
Date:

Signature:
Project Leader Han, Huynh Nguyen Bao
Date:

Signature:
Product Owner Binh, Do Duc
Date:

Signature:
Ngoc, Nguyen Nhu
Date:

Signature:
Linh, Nguyen Huu
Team Date:

Member(s) Signature:
Duy, Le Van Anh
Date:

Phong, Phan Tuan Signature:

Date:

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
Table of Contents
1. Introduction.................................................................................................................................5
1.1. Purpose..................................................................................................................................5
1.2. Related Documents................................................................................................................6
1.3. Scope.....................................................................................................................................6
2. List of User Interface for Sprint.................................................................................................6
3. Describe User Interface...............................................................................................................8
3.1. UI-01: Login Screen...................................................................................................................8
3.2. UI-02: Sign Up Screen................................................................................................................9
3.3. UI-03: Forgot Password Screen................................................................................................10
3.4. UI-04: Send Link to Reset Password........................................................................................11
3.5. UI-05: Reset Password..............................................................................................................11
3.6. UI-06: Finish reset Password...................................................................................................12
3.7. UI-07: Profile User...................................................................................................................12
3.8. UI-08: Change Password..........................................................................................................13
3.9. UI-09: Change Information User..............................................................................................13
3.10. UI-10: HomePage...................................................................................................................14
3.11. UI-11: Detail Of Product.........................................................................................................14
3.12. UI-12: Cart Screen..................................................................................................................15
3.13. UI-13: Confirm the Order.......................................................................................................15
3.14. UI-14: History the Order.........................................................................................................16
3.15. UI-15: Search Screen..............................................................................................................17
3.16. UI-16: Filter Products low to hight.........................................................................................17
3.17. UI-17:Login Admin................................................................................................................18
3.18. UI-18: Admin HomePage.......................................................................................................18
3.19. UI-19: List of Users................................................................................................................19
3.20. UI-20: List Of Products..........................................................................................................19
3.21. UI-21: List Of Orders..............................................................................................................20
3.22. UI-22: Detail Order.................................................................................................................20
3.23. UI- 23 List Of News...............................................................................................................21
3.24. UI-24: Add Product................................................................................................................21
3.25. UI-25: Update Product............................................................................................................22

1. Introduction
1.1. Purpose

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
 This document helps to better understand the activity of the Reminder
application, detailed specification components and function of the system.
 With this document, the development team can understand detail the structure
and composition to create a consistent and complete application.
1.2. Related Documents

Table 1. Related Documents

No References Document Information
1 Product Backlog document [TMOS]Product_Backlog_Ver1.2.docx
1.3. Scope

 Overview of the stages and modules of the software.

 Create complete interfaces, and describe them clearly.
2. List of User Interface for Sprint
Table 2. List of User Interface for Sprint
User
Roles Interface UI Name Description Notes
ID
Login Screen This screen is used for user to sign
User UI-01
in into the system.
Sign Up Screen This screen is used for users to
User UI-02
register their new account
Forgot Password This screen is used for users to use
User UI-03
Screen when they forget their password
Send Link to Reset This screen is used for the user
Password when the user clicks the
User UI-04
confirmation link to be redirected
to the place to reset the password
Reset Password This screen is used for the user to
User UI-05
reset their password
User UI-06 Finish reset This screen is displayed to let
Password users know their password has

Reminder Team Page

 WSPA(Reminder) User Interface Design Document v1.2
been completed
Profile User This screen is used for user to
User UI-07
view their information
Change Password This screen is used for users to
User UI-08
change their password.
Change This screen is used for users to
User UI-09
Information User change their pinformation
HomePage This screen is used for the user to
User UI-10
view the homepage
Detail Of Product This screen is used for users to
User UI-11
view product details
Cart Screen This screen is used for users to
User UI-12
view their shopping cart
Confirm the Order This screen is used for users to
User UI-13
confirm their order
History the Order This screen is used for users to
User UI-14
view their order history
Search Screen This screen is used for users to
User UI-15 quickly find what they want to
buy
Filter Products low This screen is used for users to
User UI-16
to high filter products from low to high
Login Admin This screen is used for admin
Others UI-17
login in into the system.
Admin HomePage This screen is used for admin to
Others UI-18
view admin's homepage
List of Users This screen is used for the
User UI-19 administrator to view the list of
users
List Of Products This screen is used for the
User UI-20
administrator to view the list of

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
products
List Of Orders This screen is used for the
User UI-21 administrator to view the list of
orders
Detail Order This screen is used for admin to
User UI-22
view order details
List Of News This screen is used for the
User UI-23 administrator to view the list of
news
Add Product This screen is used for admin to
User UI-24
add new products
Update Product This screen is used for
User UI-25
administrators to update products
3. Describe User Interface
3.1. UI-01: Login Screen

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2

Figure 1. UI-1 Login Screen

3.2. UI-02: Sign Up Screen

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2

Figure 2. UI-2 Sign Up Screen

3.3. UI-03: Forgot Password Screen

Figure 3.UI-3 Forgot Password Screen

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
3.4. UI-04: Send Link to Reset Password

Figure 4. UI-4 Send Link to Reset Password

Control
From Condition Target Notes
Type
1 View SMS Display OTP code

3.5. UI-05: Reset Password

Figure 5. UI-5 Reset Password

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
3.6. UI-06: Finish reset Password

Figure 6. UI-6 Finish reset Password

3.7. UI-07: Profile User

Figure 7. UI-7 Profile User

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
3.8. UI-08: Change Password

Figure 8. UI-8 Change Password

3.9. UI-09: Change Information User

Figure 9. UI- 9 Change Information User

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
3.10. UI-10: HomePage

Figure 10. UI-10 HomePage

3.11. UI-11: Detail Of Product

Figure 11.UI-11 Detail Of Product

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
3.12. UI-12: Cart Screen

Figure 12. UI-12 Cart Screen

3.13. UI-13: Confirm the Order

Figure 13. UI-13 Confirm the Order

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
3.14. UI-14: History the Order

Figure 14. Add Member Screen

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
3.15. UI-15: Search Screen

Figure 15. Search Screen

3.16. UI-16: Filter Products low to hight

Figure 16. Show Error

3.17. UI-17:Login Admin

Reminder Team Page
WSPA(Reminder) User Interface Design Document v1.2

Figure 17. Show Error

3.18. UI-18: Admin HomePage

Figure 18. Show Error

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
3.19. UI-19: List of Users

Figure 19. Show Error

3.20. UI-20: List Of Products

Figure 20. Show Error

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
3.21. UI-21: List Of Orders

Figure 21. Show Error

3.22. UI-22: Detail Order

Figure 22. Add Task Screen

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2

3.23. UI- 23 List Of News

Figure 23. Switch on Screen

3.24. UI-24: Add Product

Reminder Team Page

WSPA(Reminder) User Interface Design Document v1.2
Figure 24. Show Error

3.25. UI-25: Update Product

Figure 25. Show Error

3.26. UI-26: Multiple Images Of Product

Figure 26.Update Task Screen

Reminder Team Page