Business Requirements Document

Microsite Consumer

1
Revision History
Version Date Author Scope
1.0 01/13/2022 BA NAME Consumer Portal
● Homepage
● Display banner (Slider)
● Display category
● Display featured
product
● Display discounted
items
● Footer – More info
links, Follow us and
Newsletter
● Product page
● Display banner (Slider)
● Can filter by Categories
and Price range
● Can search by product
name
● Display all active
products
● Contact us
● Can send inquiry
● User login
● User registration
● Manage My Account
o Profile
o Address book
o Payment Option
● Track your Order
● Notification

1.1 03/14/2022 BA NAME - Revised

2
I. Objectives
The objective of this release is to have a consumer portal which will serve as e-commerce
platform where consumer can order the products of merchants.

II. End Users

Who is the end user - seller

III. Sitemap
This release will only cover the ff:

A. Consumer Portal
i. Login / Logout
ii. Registration
iii. My Profile
1. Manage my Account
a. My Profile
b. My Address Book
c. My Payment Option
2. My Order
a. Order History
b. Track my Order
c. Return and Cancellation
d. My Purchase
iv. Search
v. Track your Order
vi. Notification
vii. Shopping Cart
viii. Homepage
ix. Products
1. Shopping cart page
2. Checkout
x. Contact Us

3
 IV. Wireframe
Please click here:
https://lucid.app/lucidchart/f13f980c-5e0a-4759-8bd0-aa78eba57c60/edit?page=0_0&invitationId=inv_33b8c3b2-
2fe4-48c9-877b-cc8ca97fe535#

V. Feature List
No. Features Capabilities Priority No.
1.0 Login/Logout The user shall allow to login and logout on their 1
accounts. - user intent
1.1 Login
1.2 Password
1.3 Forgot Password
1.4 Logout
1.5 Create an Account
1.6 Remember Me
1.7 Enable Captcha upon login

2.0 Sign up The user shall register to have an account to login. 2

2.1 Registration

If the user will only view the website, registration

is not required.

If the user will order on the website, he should

have an account.
3.0 My Profile To navigate to your account preferences, click the
Full name or first letter icon at the top right
corner, to open the sidebar menu. This allows you
to view the profile picture, Logout, Manage my
Account and Manage my Order. This will take you
to the General section of account settings.

3.1 Manage my Account This menu will only be available to user who have 2
been logged in to their account.

The user shall login to their account to view the

information on their account.

3.1 My Profile
3.1.1 Change password
3.2 My Address Book
3.2.1 Add
3.2.2 Edit
3.2.3 Delete
3.3 My Payment Options

4.0 My Order This menu will only be available to user who have 2
been logged in to their account.

4
 The user shall login to their account in order to
view the information on their order.
4.1 Order History
4.1.1 View Order
4.2 Return and Cancellation
4.2.1 View Details
4.3 Track my Order
4.4 My Purchase
4.4.1 To Pay
4.4.1.1 View Order Details
4.4.1.2 Cancel Order
4.4.2 To Ship
4.4.2.1 View Order Details
4.4.3 To Receive
4.4.3.1 View Order Details
4.4.3.2 Order Received
4.4.3.3 Rate
4.4.3.4 Request Return
4.4.4 Completed
4.4.4.1 View Order Details
4.4.4.2 Order Again

5.0 Homepage This will be the landing page once the user will 1
access the website.
6.0 Products This will display the products list and details. 1
6.1 Product list
6.2 Product details
6.3 Shopping Cart

6.4 Checkout
7.0 Contact Us The user can send an email for their inquiry. 1
8.0 Navigation Bar Navigation bar must appear at the top of an
app screen.

Nav key components:

8.1 Track Order

8.2 Notification
8.3 Shopping Cart
8.4 User Profile

7 Business Rules
No. Features Steps / Business Rules
1.1 Login The user should enter their login credentials in order to access their account.
Fields Parameters
Email Textfield
Required
Inside the placeholder attribute must displayed “Email”
Can input up to 50 characters length.
Allow to enter special characters.

5
Password Textfield
Required
Can input up to 20 characters length
Allow to enter special characters.

Inside the placeholder attribute must displayed “Password”

Password masking: If the user enters any data, asterisk (*) must be
shown when a password is entered, and it will also display a text-button Show
and Hide to toggle password visibility

Captcha Display captcha.

Required
After clicking "I'm not a robot," this will be requiring the user to identify
which squares contain a particular object, such as a traffic light

The user is required to do captcha to proceed on login.

Login Button
Button label name: Login
On click it will log in to his account.
Forgot Password Link
Text link: Forgot Password
On click – it will redirect to Forgot password page.
Not registered yet. Link
Create an account? Text link: Not registered yet. Create an account
On click – it will redirect to sign up page.
Remember me Checkbox

If a user ticks "Remember me", then closes and later re-opens their
browser, they will still be logged in if the server didn't otherwise time-out
the session.

Logo and Title page Logo icon (106x 88 px )

Login Account
Enter your details to login to your account:
Successful Scenarios Spiels/Remarks
Successful Login 1. It will be available his My account details.
parameters
2. Onclick It will display a success prompt message “Login Successful!” You
have successfully logged into microsite consumer portal.

Okay, got it! – it will go back to Login Screen.

Error Scenarios Spiels/Remarks

Unsuccessful Login It will display a failed prompt message “Login Failed!” Email or password is
parameters incorrect. Please try again.
Okay – it will close the popup screen.
1.Username
2.Password It Will also display a Validation - If the password is entered incorrectly, a
3.Captcha validation message appears under the placeholder of the password field
to indicate specific issue.

6
 Display red borders on required or invalid value input with validation message
under the placeholder after the failed prompt.

Display error if user click Login button with empty Username, Password
and Captcha.
1.This is required field.
2.This is required field.
3.This is required.

Display error if user enter incorrect credentials.

1.Please enter valid username.
2.Please enter valid password
3.Failed captcha

After 3 unsuccessful attempts, the user can login after 30 minutes or

contact support

Fields Parameters
Log out Button

This button is located under the user profile at the top right corner of the
menu.
On click – it will log out his account and return to current page.
1.2 Forgot Password Steps Procedure:
1.The user click Forgot Password on the Login page.
2.Once clicked it will go to Recover your Password page.
3.The user should enter his email address to send the code and the password
reset link.
4.The user should check on this email the details sent to proceed on resetting
his password.
5.The user should click the reset link sent on the email.
6.Once clicked it will display the Reset your password screen, the user should
enter the code.
7. If the entered code is valid, it will continue to reset your password page to
proceed on entering the new password.
8.Once completed, the user should click “Confirm” button to save the new
password and system will go to Homepage. Set button to disabled state in the
beginning If the input email of the required field is empty, let the button remain
disabled.

Recover your
password
Fields Parameters
RECOVER YOUR Title page
PASSWORD
Email Address Text field
Inside the placeholder attribute must displayed “Please Enter your Email
Address”

Can input up to 50 characters length.

Allow to enter special characters.

7
SEND RESET LINK Button
Button label name: SEND RESET LINK

Set button to disabled state in the beginning If the input email of the required
field is empty, let the button remain disabled.

On click, it will send to the email provided the reset password details.
Or display an error message:
1.This is required field.
2.The email address is invalid. Please try again.

Email Content:
Subject: Reset Password Link

Hi Customer Name,

We received your request on resetting your password. Please see verification

code below and the reset password redirection link.

Code: 123456
Note: It will expire within 15 minutes.

Reset Link: https://microsite/resetpassword

If you did not initiate this transaction, kindly contact us through our website.

Thankyou.
Microsite
Go back to Login Text link: Go back to Login

On click it will redirect to Login page

Successful Scenarios Spiels/Remarks
Successful Send 1. It will send the Reset Password link on email address provided.
Reset Link
On click it will display a success prompt message “Sent!” Please check your
email and click on the provided link to reset your password.

Okay, got it! – it will redirect to Login Screen.

Error Scenarios Spiels/Remarks

Unsuccessful Send It will display a failed prompt message “Failed!” The email address is invalid.
Reset Link Please try again.
Okay – it will close the popup screen.

Display red borders on required or invalid value input with validation message
under the placeholder after the failed prompt.

Display error message when user leave as empty the fields below:
1.This is required field.

8
2.1 Sign Up If the user will only view the website, registration is not required.
If the user will order on the website, he should have an account.

Steps procedure:
1.The user click “Create an Account” text link: Not yet registered yet? Create an
Account below login page button.
2. The Registration page will display.
3. The user should fill out all required fields.
4. On the form, the user should verify his email address and agree on Terms and
condition /Policy Privacy.
5. Once completed on the form, the user should click “Sign-Up” button.
6. The user account has now been registered.
7. Set button to disabled state in the beginning If the input data of the required
field is empty, let the button remain disabled.
Fields Parameter
First name Required
Alphanumeric
Can input up to 50 characters length
Inside the placeholder attribute must displayed “Please Enter your First
Name”

Last name Required

Alphanumeric
Can input up to 50 characters length
Placeholder:
Inside the placeholder attribute must displayed “Please Enter your Last
Name”

Email address Required

This will be the username.
Inside the placeholder attribute must displayed “Please Enter your Email
Address”

Can input up to 100 characters length.

Slide to verify email Required
address Placeholder: Please slide to verify your email address.
Inside the placeholder attribute must displayed “Please Slide to Verify your
Email Address”

Once user slide the verification, display a message on below field:

We have sent you the verification code, please check your email.

And then system will email the code to the email address provided by the user.

Email Content:
Subject: Email Address Verification Code

Hi Customer Name,
Please see verification code below. It will expire within 15 minutes.
Code: 123456

9
 If you did not initiate this transaction, kindly contact us through our website.
Thankyou.
Microsite
Password Inside the placeholder attribute must displayed “Please Enter your
Password”

Password masking: If the user enters any data, asterisk (*) must be
shown when a password is entered, and it will also display a text-button Show
and Hide to toggle password visibility

Required
Alphanumeric
Can input special characters
Minimum of 10 characters and maximum of 20 characters
Password Criteria: At least 1 number, 1 capital letter and 1 special character

Validation - If the password is entered incorrectly, a validation message

appears under the placeholder of the password field to indicate specific
issue.

Birthday Date picker

Required
The user can select date.
Default Format: mm/dd/yyyy
Gender Required
Radio button
No option selected as default
Selection: Male, Female and Other
Terms and Condition Checkbox
/ Privacy Policy Text link: I agree to the Privacy Policy and Terms of Use
agree On click on Privacy Policy – display modal showing the Privacy Policy details.
Button: Okay – on click it will close the modal and go back to Registration page
to continue filling out the form.

On click on Terms of user - display modal showing Terms of Use details.

Button: Okay – on click it will close the modal and go back to Registration page
to continue filling out the form.

Sign Up Button
Button label name: Sign -Up
On click it will display a prompt message
Completed Registration!
Your account was successfully created.

Okay – on click it saved the customer details entered on registration form and
system go back to Homepage screen.
Have an account? Text link: Have an Account? Proceed to Login.
Login
On click it will redirect to login screen.
Successful Scenarios Spiels/Remarks

10
 Successful Sign Up 1. It will send the Reset Password link on email address provided.
2. It will display a success prompt message “Successful!” Congratulations, your
account has been successfully registered.

Okay – it will redirect back to Login Screen.

Error Scenarios Spiels/Remarks
Unsuccessful Sign It will display a failed prompt message “Failed!” Sorry, looks like there are some
Up errors detected, please try again.
1.First Name
2.Last Name Okay – it will close the popup screen.
3.Email Address
4.Password Display red borders on required or invalid value input with validation message
5.Birthday under the placeholder.
6.Gender
7. Terms and
Condition / Privacy Display error message if user did not check the Terms and Condition /Privacy
Policy agree Policy
7.Accceptance of Terms and Condition / Policy Privacy is required.

Display error message if entered email address is not valid

3. The email address is invalid. Please try again.

Display error message when user skip email verification:

3. Please verify your email address.
3.1 My Profile
Fields Parameter
My Profile Title page
Profile Name Display the user’s full name and the user type
Profile Image Image Dimension: 100 x 100px
Format: PNG and Jpeg
Display a green dot at the upper right corner of the profile pictures.
The green dot indicates Active Status.

Log out The user is allowed to log out his account

Button label name: Log-out

This allows you to view the profile picture, Logout, Manage my Account and
Manage my Order. This will take you to the General section of account settings.
3.2 View Profile
Display Text Label: Email Address:
Display Text Label: Phone:
International phone number formatting standard

(+63) 3digits -3 digits- 4 digits eg: (+63) 926-123-4567

Set default to Manage my Account

3.2.1 Manage my Account
My Profile Title page
Choose image Pencil Icon
Editable; can upload or reupload profile image.
File size: Max of 5mb to upload

11
 Format: PNG and Jpeg

On click it will open the device file to browse and select the photo to upload.

Display error message upon user upload

First Name Display the first name entered.
Required; Editable
Alphanumeric
Can input up to 50 characters length
Last Name Display the last name entered.
Required; Editable
Alphanumeric
Can input up to 50 characters length
Username Auto fetch based on input username upon sign up.
Not editable
Birthday Display the date selected on the date picker
Required; Editable
Format: mm/dd/yyyy
Password Required; Editable by clicking “Change”
Display as bullets

Password criteria:
Alphanumeric
Can input special characters

Inside the placeholder attribute should displayed as “asterisk”

Password masking: text-button Show and Hide to toggle password

visibility:

Change Password Button

Button label name: Change Password

On click it will display a modal showing the Change Password form.

See 3.1.1 for further details.
Gender Radio button
Required; Editable
Selection: Male, Female and Others
Subscribe newsletter Checkbox
Not Require
Editable – can untick or tick the checkbox.

If tick – the user can receive on their email a newsletter and offers
If untick – the user, will no newsletter or offer user will received.
Update Button
Button label name: Update

Set update button to disabled if the input data remain unchanged.

Successful Scenarios Spiels/Remarks

12
 Successful Update 1. On click it will display a prompt message
2. It will display a success prompt message “Updated!” Your profile was
successfully updated

Okay – it will save the changes made and system go back to My Profile with the
updated details display.

Error Scenarios Spiels/Remarks

Unsuccessful Update
3.3.1 My Profile > Change The user clicks “Change” beside on Password field.
Password
It will display a modal “Change Password”
1. The user should fill in required fields.
2. The user should enter Current Password
3. The user should enter New Password
4. The user should Confirm Password
5. Once complete, the user should click “Submit” button to update the
password.

Fields Parameter
Change Password Header title
Current Password Required
The user should enter his current password.

Inside the placeholder attribute must displayed “Please enter current

password”

Password masking: If the user enters any data, asterisk (*) must be
shown when a password is entered, and it will also display a text-button Show
and Hide to toggle password visibility

Required
Alphanumeric
Can input special characters
Minimum of 10 characters and maximum of 20 characters
Password Criteria: At least 1 number, 1 capital letter and 1 special character

Validation - If the password is entered incorrectly, a validation message

appears under the placeholder of the password field to indicate specific
issue.

New Password Required

Inside the placeholder attribute must displayed “Please enter new
password”

Password masking: If the user enters any data, asterisk (*) must be
shown when a password is entered, and it will also display a text-button Show
and Hide to toggle password visibility

Password criteria:
Alphanumeric

13
 Can input special characters
Minimum of 10 characters and maximum of 20 characters
Password Criteria: At least 1 number, 1 capital letter and 1 special character

Validation - If the password is entered incorrectly, a validation message

appears under the placeholder of the password field to indicate specific
issue.

Confirm Password Required

Inside the placeholder attribute must displayed “Please confirm password”

This should match on the new password entered.

Password masking: If the user enters any data, asterisk (*) must be
shown when a password is entered, and it will also display a text-button Show
and Hide to toggle password visibility

Validation - If the password is entered incorrectly, a validation message

appears under the placeholder of the password field to indicate specific
issue.

Cancel Button
Button label name: Cancel

On click, it will cancel the updating of password and system go back to My

Profile.
Submit Button
Button label name: Submit

On click, it will display a success prompt

Set button to disabled state in the beginning If the input data of the required
field is empty, let the button remain disabled.

The password was successfully updated.

Okay – on click it will save the updated password and system go back to My
Profile.

Successful Scenarios Spiels/Remarks

Successful Submit 1.It will display a success prompt message.
Error Scenarios Spiels/Remarks
Unsuccessful Submit Display an error message upon click Submit button when below fields are
empty:
1.Current Password 1.This is a required field.
2.New Password 2.This is a required field.
3.Confirm Password 3.This is a required field.

Display validation error upon click Submit button when below fields are invalid:
1.The current password is not match. Please try again.
2.The new password did not match on the criteria. Please try again.
3.The confirm password did not match. Please try again.

14
3.3.2 My Address Book Registered addresses are listed in the table.
The user can add, edit, and delete address.
Those addresses can be used on Delivery.

1.The user should go to My Account

2.The user should click My Address Book on the sub side menu.

3.2.1 Add Address Book Details

3.2.2 Edit Address Book Details
3.2.3 Delete Address Book Details
Table Fields Parameter
Address Book Title Page
Add New Address Button
Button label name: Add New Address

On click it will open a modal to create new address.

Name Column Display a combination of First Name and Last Name.

Click the arrows to sort the column.

1. The first time you click, the sorting direction is ascending (A to Z).
2. Click again, and the sorting direction will be descending (Z to A):

Mobile Number Display the Mobile Number

Column
International phone number formatting standard
(+63) 3digits -3 digits- 4 digits eg: (+63) 926-123-4567

Click the arrows to sort the column.

1. The first time you click, the sorting direction is ascending (A to Z).
2. Click again, and the sorting direction will be descending (Z to A):

Email Address Display the Email Address

Column
Click the arrows to sort the column.
1. The first time you click, the sorting direction is ascending (A to Z).
2. Click again, and the sorting direction will be descending (Z to A):

Address Column Display the Address

Click the arrows to sort the column.

1. The first time you click, the sorting direction is ascending (A to Z).
2. Click again, and the sorting direction will be descending (Z to A):

Action Column Ellipses Button

On click it will display an action for edit and delete.

See 3.2.1 for further details.

Fields Parameter
Add New Address Title page
Set as default Checkbox
shipping address Not required

15
 User can tick and untick

If tick – address will be set as default shipping address to use on checkout.

If untick -address will not set as default shipping address.

Note:
● Upon tick as default shipping address, system need to check if there’s
an existing set default address.
● User can set only 1 address on his list as default address.

First Name Required

Text Label: First Name
Inside the placeholder attribute must displayed “Please Enter First Name”

Alphanumeric
Can input up to 50 characters length
Last Name Required
Text Label: First Name
Inside the placeholder attribute must displayed “Please Enter Last Name”

Alphanumeric
Can input up to 50 characters length
Mobile Number Required
Text Label: Mobile Number
Inside the placeholder attribute must Starts with the value of (+63) value is
Read only. Numeric Max Length of 10 Required Unique.

Email Address Required

Inside the placeholder attribute must displayed “Please Enter Email
Address”
Alphanumeric; Accepts special characters.
Can input maximum of 50 characters length.
House/Unit/Flr #, Required
Building Name, Placeholder: Please enter House/Unit/Flr #, Building Name, Block or Lot #
Block or Lot # Alphanumeric
Can input up to 100 characters length
Zip Code Required
Placeholder: Please enter zip code
Numeric
Can input up to 5 characters length
Province Required
Placeholder Dropdown: Please select province
Area Required
Placeholder Dropdown: Please select area
Barangay Required
Placeholder Dropdown: Please select barangay
City/Municipality Required
Placeholder Dropdown: Please select city/municipality
Cancel Button
Button label name: Cancel

16
 On click it will cancel the creation of new address and system go back to My
Address Book page.
Save Button
Button label name: Save

On click it will display a prompt message

The new address was successfully created.

Set button to disabled state in the beginning If the input data of the required
field is empty, let the button remain disabled.

Okay – it will save the creation of new address and system go back to My
Address Book page displaying the newly added address on the table.
Successful Scenarios Spiels/Remarks
Successful Save 1.It will display a success message.
Error Scenarios Spiels/Remarks
Unsuccessful Save Display an error message upon required fields are empty when user click Save
button
1.First name 1.This is a required field.
2.Last name 2. This is a required field.
3.Mobile number 3. This is a required field.
4.Email Address 4. This is a required field.
5. House/Unit/Flr #, 5. This is a required field.
Building Name, 6. This is a required field.
Block or Lot # 7. Please select province.
6.Zip code 8. Please select area.
7.Province 9. Please select barangay.
8.Area 10. Please select city/municipality.
9.Barangay
10.City/Municipality

3.3.3 My Profile > My 1.The user should go to My Account

Address Book > Edit 2.The user should click My Address Book on the sub menu.
Address Book 3.The user should click “Edit Address” button
4. The Edit Address screen will display; the user should fill in all required fields
5. Once filled out the form, the user should click “Update” button to update the
address details.

Fields Parameter
Set as default Checkbox
shipping address Not required
User can tick and untick

If tick – address will be set as default shipping address to use on checkout.

If untick -address will not set as default shipping address.

Note:
● Upon tick as default shipping address, system need to check if there’s
an existing set default address.
● User can set only 1 address on his list as default address.

17
First Name Editable; Required
Auto fetch / Display the first name input
Alphanumeric
Can input up to 50 characters length
Last Name Editable; Required
Auto fetch / Display the last name input
Alphanumeric
Can input up to 50 characters length
Mobile Number Editable; Required
Auto fetch / Display the input mobile number
Inside the placeholder attribute must Starts with the value of (+63) value is
Read only. Numeric Max Length of 10 Required Unique.

Numeric
Can input 11 characters only
Format: 09xx xxx xxxx
Email Address Editable; Required
Auto fetch / Display the input email address
Alphanumeric; Accepts special characters.
Can input maximum of 50 characters length.
House/Unit/Flr #, Editable; Required
Building Name, Auto fetch / Display the input House/Unit/Flr #, Building Name, Block or Lot #
Block or Lot # Alphanumeric
Can input up to 100 characters length
Zip Code Editable; Required
Auto fetch / Display the input Zip code
Can input up to 5 characters length
Province Editable; Required
Auto fetch / Display the selected province
Area Editable; Required
Auto fetch / Display the selected area
Barangay Editable; Required
Auto fetch / Display the selected barangay
City/Municipality Editable; Required
Auto fetch / Display the selected city/municipality
Cancel Button
Button label name: Cancel

On click it will cancel the change on the address and system go back to My
Address Book page.
Update Button
Button label name: Update

On click it will display a prompt message

The address was successfully updated.

Okay – it will update the address details and system go back to My Address
Book page displaying the changes on the address.
Successful Scenarios Spiels/Remarks
Successful Save 1.It will display a success message.

18
 Error Scenarios Spiels/Remarks
Unsuccessful Save Display an error message upon required fields are empty when user click Save
button
1.First name 1.This is a required field.
2.Last name 2. This is a required field.
3.Mobile number 3. This is a required field.
4.Email Address 4. This is a required field.
5. House/Unit/Flr #, 5. This is a required field.
Building Name, 6. This is a required field.
Block or Lot # 7. Please select province.
6.Zip code 8. Please select area.
7.Province 9. Please select barangay.
8.Area 10. Please select city/municipality.
9.Barangay
10.City/Municipality

3.3.4 My Profile > My 1.The user should go to My Account

Address Book > 2.The user should click My Address Book on the sub menu.
Delete Address Book 3.The user should click “Delete” button
4. On click, it will display a prompt message

Are you sure you want to delete this address book?

No – it will close the prompt message and deletion will be cancelled; system
will go back to My Address book page.

Yes – it will display a prompt message

The address was successfully deleted.
Okay – the address selected address has been deleted and system will go back
to My Address book page.

3.3 My Payment Option The customer can add credentials on below payment options.

3.3.1 Add New Credit Card

3.3.2 Edit Credit Card
3.3.3 Remove Credit Card
3.3.4 Add New Debit Card
3.3.5 Edit Debit Card
3.3.6 Remove Debit card
3.3.7 Add GCash account
3.3.8 Edit Gcash details
3.3.9 Remove Gcash
Fields Parameter
Credit Card icon Credit card icon
Credit Card Section title
Card Holder Name Auto fetch data
Card Number Auto fetch data
Mask the details, show only the last 3 digits on the end.
Expiry Date Auto fetch data
CVV Auto fetch data
Button on this Buttons
section Add New Credit Card – see 3.3.1 for more details.

19
 Edit Credit Card - – see 3.3.2 for more details
Remove – see 3.3.3 for more details.

Fields Parameter
Debit icon Debit card icon
Debit Card Section title
Full Name in your Auto fetch data
Bank
Account number Auto fetch data
Mask the details, show only the last 3 digits on the end.
Bank Name Auto fetch data
Buttons on this Buttons
section Add New Debit Card – see 3.3.4 for more details.
Edit Debit Card - – see 3.3.5 for more details
Remove – see 3.36 for more details.

Fields Parameter
GCash icon Gcash icon
Gcash Section title
Account Number Auto fetch data
Mask the details, show only the last 3 digits on the end.
Account Name Auto fetch data
Buttons on this Buttons
section
Add New Debit Card – see 3.3.7 for more details.
Edit Debit Card - – see 3.3.8 for more details
Remove – see 3.3.9 for more details
3.3.1 My Payment Option The user can add credit card details.
> Add credit card
1.The customer should login to his account.
2.The customer should go to Manage my Account
3.The customer should click “My Payment Option” on the side menu.
4.The user should click “Add new credit card” button
5.A modal prompt box will display showing the form to fill in.
6. The customer should fill out all required fields.
7.Once customer completely filling out the, the customer should click “Submit”
button to submit the credit card credentials.
8. Success message will display. form

Fields Parameter
Please enter your Modal title
Credit Card details
Card Holder Name Required
Alphanumeric
Can input up to 100 characters length.
Shall not allow to accept special characters
Placeholder: Please enter card holder name
Card Number Required
Numbers
Can input up to 30 digits/numbers
Shall not allow to accept special characters

20
 Placeholder: Please enter card number
Expiry Date Required
Date picker for month and year
Placeholder- Month date picker: MM
Placeholder – Year date picker: YY
CVV Required
Numbers
Can input up to 5 number
Placeholder: Please enter cvv
Submit Button
Button label name: Submit

On click it will display a success prompt message

The credit card detail was successfully added.

Okay – On click it will go back to My Payment option page displaying the newly
added credit card details.

Cancel Button
Button label name: Cancel

On click, it will close the Add Credit Card details modal screen and system will
go back to My payment option.
Successful Scenarios Spiels/Remarks
Successful Submit 1.It will display a success message.
Error Scenarios Spiels/Remarks
Unsuccessful Submit Display an error message upon required fields are empty when user click Submit
button
1.Card Holder Name 1.This is a required field.
2.Card Number 2. This is a required field.
3.Expiry Date 3. This is a required field.
4.CVV 4. This is a required field.

3.3.2 My Payment Option The user can add credit card details.
> Edit credit card
1.The customer should login to his account.
2.The customer should go to Manage my Account
3.The customer should click “My Payment Option” on the side menu.
4.The user should click “Edit” button on his selected credit details in order to
update the details.
5.A modal prompt box will display showing the Edit Page screen
6. The customer should fill out all required fields.
7.Once customer completely filling out the form, the customer should click
“Update” button to submit the changes on his credit card credentials.
8. Success message will display.

Fields Parameter
Please enter your Modal title
Credit Card details
Card Holder Name Editable; Required
Alphanumeric

21
 Can input up to 100 characters length.
Shall not allow to accept special characters
Auto fetch data
Card Number Editable; Required
Numbers
Can input up to 30 digits/numbers
Shall not allow to accept special characters
Auto fetch data
Expiry Date Editable; Required
Date picker for month and year
Auto fetch data
CVV Editable; Required
Numbers
Can input up to 5 number
Auto fetch data
Cancel Button
Button label name: Cancel

On click, it will close the Edit Credit Card details modal screen and system will
go back to My payment option.
Update Button
Button label name: Update

On click it will display a success prompt message

The credit card detail was successfully updated.

Okay – On click it will go back to My Payment option page displaying the
changes on credit card details.

Successful Scenarios Spiels/Remarks

Successful Update 1.It will display a success message.
Error Scenarios Spiels/Remarks
Unsuccessful Update Display an error message upon required fields are empty when user click Submit
button
1.Card Holder Name 1.This is a required field.
2.Card Number 2. This is a required field.
3.Expiry Date 3. This is a required field.
4.CVV 4. This is a required field.

3.3.3 My Payment Option Button

> Remove Credit Button label name: Remove
card
On click it will display a prompt message
Are you sure you want to remove this credit card account?
Yes- it will display a message prompt
The credit card account was successfully removed.
Okay – it will remove the selected credit card account and system will go back
to My payment option screen.

No – it will close the prompt message and it will cancel the removal of credit
details.

22
3.3.4 My Payment Option The user can add Debit card details.
> Add Debit Card
details 1.The customer should login to his account.
2.The customer should go to Manage my Account
3.The customer should click “My Payment Option” on the side menu.
4.The user should click “Add new credit card” button
5.A modal prompt box will display showing the form to fill in.
6. The customer should fill out all required fields.
7.Once customer completely filling out the form, the customer should click
“Submit” button to submit the debit card credentials.
8. Success message will display.

Fields Parameter
Please enter your Modal title
Debit Card details
Full Name in your Required
Bank Alphanumeric
Can input up to 100 characters length
Shall not allow to accept special characters
Placeholder: Please enter name
Account number Required
Numeric
Can input up to 50 characters length
Shall not allow to accept special characters
Placeholder: Please enter account number
Bank Name Required
Dropdown
Placeholder: Please select bank name
The user can select bank on the list.
Cancel Button
Button label name: Cancel

On click, it will close the Add Debit Card details modal screen and system will go
back to My payment option.
Submit Button
Button label name: Submit

On click it will display a success prompt message

The debit card detail was successfully added.

Okay – On click it will go back to My Payment option page displaying the newly
added debit card details.

Successful Scenarios Spiels/Remarks

Successful Submit 1.It will display a success message.
Error Scenarios Spiels/Remarks
Unsuccessful Submit Display an error message upon required fields are empty when user click Submit
button
1 1.This is a required field.
2. This is a required field.
3. This is a required field.
4. This is a required field.

23
3.3.5 My Payment Option The user can edit Debit card details.
> Edit Debit Card
details 1.The customer should login to his account.
2.The customer should go to Manage my Account
3.The customer should click “My Payment Option” on the side menu.
4.The user should click “Edit” button on the debit section.
5.A modal prompt box will display showing the form to fill in.
6. The customer should fill out all required fields.
7.Once customer completely filling out the form, the customer should click
“Update” button to submit the changes on debit card credentials.
8. Success message will display.

Fields Parameter
Please enter your Modal title
Debit Card details
Full Name in your Editable; Required
Bank Alphanumeric
Can input up to 100 characters length
Auto fetch data
Shall not allow to accept special characters
Account number Editable; Required
Numeric
Can input up to 50 characters length
Auto fetch data
Shall not allow to accept special characters
Bank Name Editable; Required
Dropdown
Can select bank
Auto fetch data
Cancel Button
Button label name: Cancel

On click, it will close the Edit Debit Card details modal screen and system will go
back to My payment option.
Update Button
Button label name: Update

On click it will display a success prompt message

The debit card detail was successfully updated.

Okay – On click it will go back to My Payment option page displaying the change
on debit card details.

Successful Scenarios Spiels/Remarks

Successful Update 1.It will display a success message.
Error Scenarios Spiels/Remarks
Unsuccessful Update Display an error message upon required fields are empty when user click Submit
button
1.Full Name in your 1.This is a required field.
Bank 2. This is a required field.
2.Account Number 3. This is a required field.
3.Bank Name

24
3.3.6 My Payment Option Button
> Remove Debit Button label name: Remove
Card
On click it will display a prompt message
Are you sure you want to remove this debit card account?
Yes- it will display a message prompt
The debit card account was successfully removed.
Okay – it will remove the selected debit card account and system will go back to
My payment option screen.

No – it will close the prompt message and it will cancel the removal of debit
details.

3.3.7 My Payment Option The user can add GCash account details.
> Add GCash
Account 1.The customer should login to his account.
2.The customer should go to Manage my Account
3.The customer should click “My Payment Option” on the side menu.
4.The user should click “Add Gcash Account” button on the GCash section.
5.A modal prompt box will display showing the form to fill in.
6. The customer should fill out all required fields.
7.Once customer completely filling out the form, the customer should click
“Submit” button to submit GCash account credentials.
8. Success message will display.

Fields Parameter
Please enter your Modal title
GCash account
Account Number Required
Numeric
Can input up to 11 characters length
Shall not allow to accept special characters
Placeholder: Please enter account number
Account Name Required
Alphanumeric
Can input up to 100 characters length
Shall not allow to accept special characters
Placeholder: Please enter account name
Cancel Button
Button label name: Cancel

On click, it will close the Add GCash details modal screen and system will go
back to My payment option.
Submit Button
Button label name: Submit

On click it will display a success prompt message

The debit card detail was successfully added.

Okay – On click it will go back to My Payment option page displaying the newly
added GCash account details.

25
 Successful Scenarios Spiels/Remarks
Successful Submit 1.It will display a success message.
Error Scenarios Spiels/Remarks
Unsuccessful Submit Display an error message upon required fields are empty when user click Submit
button
1.Account number 1.This is a required field.
2.Account name 2. This is a required field.

3.3.8 My Payment Option The user can edit GCash account details.
> Edit GCash
Account 1.The customer should login to his account.
2.The customer should go to Manage my Account
3.The customer should click “My Payment Option” on the side menu.
4.The user should click “Edit” button on the GCash section.
5.A modal prompt box will display showing the form to fill in.
6. The customer should fill out all required fields.
7.Once customer completely filling out the form, the customer should click
“Submit” button to submit changes on GCash account credentials.
8. Success message will display.

Fields Parameter
Please enter your Modal title
Gcash account
Account Number Editable; Required
Numeric
Can input up to 11 characters length
Shall not allow to accept special characters
Auto fetch data
Account Name Editable; Required
Alphanumeric
Can input up to 100 characters length
Shall not allow to accept special characters
Auto fetch data
Cancel Button
Button label name: Cancel

On click, it will close the Edit GCash details modal screen and system will go
back to My payment option.
Update Button
Button label name: Submit

On click it will display a success prompt message

The debit card detail was successfully updated.

Okay – On click it will go back to My Payment option page displaying the
updated GCash account details.

Successful Scenarios Spiels/Remarks

Successful Update 1.It will display a success message.

26
 Error Scenarios Spiels/Remarks
Unsuccessful Update Display an error message upon required fields are empty when user click Submit
button
1.Account number 1.This is a required field.
2.Acccount name 2. This is a required field.

3.3.9 My Payment Option Button

> Remove Gcash Button label name: Remove
Account
On click it will display a prompt message
Are you sure you want to remove this GCash account?
Yes- it will display a message prompt
The GCash account was successfully removed.
Okay – it will remove the selected GCash account and system will go back to My
payment option screen.

No – it will close the prompt message and it will cancel the removal of Gcash
account details.

4.0 Manage my Order The user can view the history of his order.

4.1 Order History

4.1.1 View Order
4.2 Return and Cancellation
4.2.1 Cancelled View Details
4.2.2 Return View Details
4.3 Track my Order
4.4 My Purchase
4.4.1 To Pay
4.4.1.1 View Order Details
4.4.1.2 Cancel Order
4.4.2 To Ship
4.4.2.1 View Order Details
4.4.3 To Receive
4.4.3.1 View Order Details
4.4.3.2 Order Received
4.4.3.3 Rate
4.4.3.4 Request Return
4.4.4 Completed
4.4.4.1 View Order Details
4.4.4.2 Order Again
4.1 Manage my Order > The customer who logged in on consumer portal will see their Order History.
Order History
Fields Parameter
Order History Auto fetch display
Order ID Auto fetch display
Order Date Auto fetch display based on place order date.
Format: MM/DD/YYYY HH/MM AM/PM
Quantity Auto fetch display
Status Auto fetch display

27
 Total Order Auto fetch display
View Order Button
Button label name: View Order
On click it will go to View Order History page.

See 4.1.1 for more details.

4.1.1 Manage my Order >
Order History > View
Order
Fields Parameter
View Order History Page title
Order Information Sub header title
Order ID Auto fetch display
Order Date Auto fetch display based on place order date.
Format: MM/DD/YYYY HH/MM AM/PM
Status Auto fetch display
Quantity Auto fetch display
Voucher code Auto fetch display
Voucher discount Auto fetch display
Sub-total amount Auto fetch display
Display the amount of the ordered item.
Unit price x quantity
Total Order Amount Auto fetch display
Display the total order amount.
(Subtotal + shipping fee)-voucher amount
Product Image Auto fetch display
Product Name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Delivery Information Sub header title
Delivered Date Auto fetch display
Delivery Address Auto fetch display
Ship By Auto fetch display
Payment Method Auto fetch display
Back Button
Button label name: Back
On click it will go back to Order History page.
4.2 Manage my Order >
Return and
Cancellation
Fields Parameter
Return and Page title
Cancellation Order
Order ID Auto fetch display
Order Date Auto fetch display based on place order date.
Format: MM/DD/YYYY HH/MM AM/PM
Quantity Auto fetch display
Status Auto fetch display
Reason Auto fetch display
View Details Button

28
 Button label name: View Details
On click it will go to Return or Cancellation History Page
4.2.1 Manage my Order >
Return and
Cancellation >
Cancel > View
Details
Fields Parameter
View Return and Page Title
Cancellation History
Cancellation Sub header title
Information
Order ID Auto fetch display
Order Date Auto fetch display based on place order date.
Format: MM/DD/YYYY HH/MM AM/PM
Cancel Id Auto fetch display
Cancelled Date Auto fetch display based on cancel submission date.
Format: MM/DD/YYYY HH/MM AM/PM
Quantity Cancelled Auto fetch display
Status Auto fetch display
Payment Method Auto fetch display
Reason Auto fetch display
Total Cancelled Auto fetch display
Order Amount
Product Image Auto fetch display
Product Name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Back Button
Button label name: Back
On click it will go back to Return and Cancellation Order page list.
4.2.2 Manage my Order >
Return and
Cancellation >
Return > View
Details
Fields Parameter
View Return and Page Title
Cancellation History
Return Information Sub header title
Order ID Auto fetch display
Order Date Auto fetch display based on place order date.
Format: MM/DD/YYYY HH/MM AM/PM
Return ID Auto fetch display
Returned Date Auto fetch display based on return submission date.
Format: MM/DD/YYYY HH/MM AM/PM
Quantity Return Auto fetch display
Status Auto fetch display
Payment Method Auto fetch display
Reason Auto fetch display

29
 Total Returned Auto fetch display
Order Amount
Product Image Auto fetch display
Product Name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Back Button
Button label name: Back
On click it will go back to Return and Cancellation Order page list.
4.3 Manage my Order >
Track my Order
Fields Parameter
Track my Order Auto fetch display
Tracking Number Auto fetch display
Order ID Auto fetch display
To received by Auto fetch display
Ship by Auto fetch display
Update on Tracking Auto fetch display from logistic
Delivery
4.4 Manage my Order > 4.4.1 To Pay
My Purchase 4.4.1.1 View Order Details
4.4.1.2 Cancel Order
4.4.2 To Ship
4.4.2.1 View Order Details
4.4.3 To Receive
4.4.3.1 View Order Details
4.4.3.2 Order Received
4.4.3.3 Rate
4.4.3.4 Request Return
4.4.4 Completed
4.4.4.1 View Order Details
4.4.4.2 Order Again
4.4.1 Manage my Order > Display on this tab all orders with payment method: COD.
My Purchase > To The merchant should “Confirm” on merchant portal the order with COD as
Pay payment method.
Once confirmed by the merchant, cancel button on To pay tab will hide.

Order will be move to to ship tab once merchant update the status on
merchant portal “To ship”.
Fields Parameter
To Pay Tab header name
Product image Auto fetch display
Product Name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Total Quantity Auto fetch display
Sub-total amount Auto fetch display
Computation: Unit price x Quantity
Shipping fee Auto fetch display
Total Order Amount Auto fetch display
Computation: Sub-total amount + shipping fee

30
 View Order Details Button
Button label name: View Order Details
On click it will go to My purchase View order information page.

Cancel Order Button

Button label name: Cancel Order
On click it will display the modal prompt box

Cancel Order # [display the order id]

Are you sure you want to cancel this order?
Reason – dropdown list of reasons to cancel
Placeholder: Please select reason of cancellation
Selection dropdown list:
● Change Delivery Address
● Change or input voucher code
● Incorrect order (change variations, quantity etc.)
● Change Payment Method
● Other sellers offer cheaper item
● Not interested
● Others

Yes – display a prompt for success cancellation of order.

Prompt message: Order cancelled
Okay – it will go back to To pay tab

No – it will close the cancel confirmation prompt and go back to To pay tab.

Note: Once confirmed by the merchant, cancel button on To pay tab will hide.
4.4.1.1 Manage my Order >
My Purchase > To
Pay > View Order
Details
Fields Parameter
My Purchase Order Page header
View Order Sub header title
Information
Order ID Auto fetch display
Order date Auto fetch display based on place order date.
Format: MM/DD/YYYY HH/MM AM/PM
Total Quantity Auto fetch display
Payment method Auto fetch display
Delivery address Auto fetch display
Ship by Auto fetch display
Voucher code Auto fetch display
Voucher discount Auto fetch display
Shipping fee Auto fetch display
Sub-total amount Auto fetch display
Total Order Amount Auto fetch display
Product image Auto fetch display

31
 Product name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Display the Unit price of the item
Back Button
Button label name: Back
Onclick it will go back to To pay tab.
Cancel Order Button
Button label name: Cancel Order
On click it will display the modal prompt box

Cancel Order # [display the order id]

Are you sure you want to cancel this order?
Reason – dropdown list of reasons to cancel
Placeholder: Please select reason of cancellation
Selection dropdown list:
● Change Delivery Address
● Change or input voucher code
● Incorrect order (change variations, quantity etc.)
● Change Payment Method
● Other sellers offer cheaper item
● Not interested
● Others

Yes – display a prompt for success cancellation of order.

Prompt message: Order cancelled
Okay – it will go back to To pay tab

No – it will close the cancel confirmation prompt and go back to To pay tab.

Note: Once confirmed by the merchant, cancel button on To pay tab will hide.
4.4.1.2 Manage my Order >
My Purchase > To
Pay > Cancel Order
Fields Parameter
Cancel button Button
Button label name: Cancel Order
On click it will display the modal prompt box

Cancel Order # [display the order id]

Are you sure you want to cancel this order?
Reason – dropdown list of reasons to cancel
Placeholder: Please select reason of cancellation
Selection dropdown list:
● Change Delivery Address
● Change or input voucher code
● Incorrect order (change variations, quantity etc.)
● Change Payment Method
● Other sellers offer cheaper item
● Not interested

32
 ● Others

Yes – display a prompt for success cancellation of order. Once success on

cancel, order will be on the list of Return and Cancellation.

Prompt message: Order cancelled

Okay – it will go back to To pay tab

No – it will close the cancel confirmation prompt and go back to To pay tab.

Note: Once confirmed by the merchant, cancel button on To pay tab will hide.
4.4.2 Manage my Order > Display on this tab all orders with success payment using Ecom checkout.
My Purchase > To
Ship
Fields Parameter
To Ship Tab header name
Product image Auto fetch display
Product Name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Total Quantity Auto fetch display
Sub-total amount Auto fetch display
Computation: Unit price x Quantity
Shipping fee Auto fetch display
Voucher Discount Auto fetch based on discount amount on checkout.
Total Order Amount Auto fetch display
Computation: Sub-total amount + shipping fee
View Order Details Button
Button label name: View Order Details
On click it will go to My purchase View order information page.

4.4.2.1 Manage my Order >

My Purchase > To
Ship > View Order
Details
Fields Parameter
My Purchase Order Page header
View Order Sub header title
Information
Order ID Auto fetch display
Order date Auto fetch display based on place order date.
Format: MM/DD/YYYY HH/MM AM/PM
Total Quantity Auto fetch display
Payment method Auto fetch display
Delivery address Auto fetch display
Ship by Auto fetch display
Voucher code Auto fetch display
Voucher discount Auto fetch display
Shipping fee Auto fetch display
Sub-total amount Auto fetch display

33
 Total Order Amount Auto fetch display
Computation: Sub-total amount + shipping fee
Product image Auto fetch display
Product name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Back Button
Button label name: Back
Onclick it will go back to To Ship tab.
4.4.3 Manage my Order > 4.4.3 To Receive
My Purchase > To 4.4.3.1 View Order Details
Receive 4.4.3.2 Order Received
4.4.3.3 Rate
4.4.3.4 Request Return
Fields Parameter
To Receive Tab header name
Product image Auto fetch display
Product Name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Total Quantity Auto fetch display
Sub-total amount Auto fetch display
Computation: Unit price x Quantity
Shipping fee Auto fetch display
Voucher Discount Auto fetch based on discount amount on checkout.
Total Order Amount Auto fetch display
Computation: Sub-total amount + shipping fee
View Order Details Button
Button label name: View Order Details
On click it will go to My purchase View order information page.

Order Received
Rate
Request Return
4.4.3.1 Manage my Order >
My Purchase > To
Receive > View
Order Details

Fields Parameter
My Purchase Order Page header
View Order Sub header title
Information
Order ID Auto fetch display
Order date Auto fetch display based on place order date.
Format: MM/DD/YYYY HH/MM AM/PM
Total Quantity Auto fetch display
Display the total count of ordered item.
Payment method Auto fetch display
Delivery address Auto fetch display
Ship by Auto fetch display

34
 Voucher code Auto fetch display
Voucher discount Auto fetch display
Shipping fee Auto fetch display
Sub-total amount Auto fetch display
Total Order Amount Auto fetch display
Computation: Sub-total amount + shipping fee
Product image Auto fetch display
Product name Auto fetch display
Quantity Auto fetch display
Display the quantity ordered for the item.
Price Auto fetch display
Back Button
Button label name: Back
Onclick it will go back to To Ship tab.
4.4.3.2 Manage my Order > The customer click “Order Received” button will display a prompt message for
My Purchase > To confirmation.
Receive > Order
Received
Fields Parameter
Message prompt Order received confirmation
header
Message I confirm that my order received and accept in good condition.

Please be reminded that there will be no return upon confrimation

Confirm Button
Button label name: Confirm

On click it will be confirmed received the order and Order will be moved to
Completed tab.
Back Button
Button label name: Back
On click it will go back to “To receive” tab.
4.4.3.3 Manage my Order > The customer can rate the order items by tapping the stars rate (1-5 stars rate)
My Purchase > To or can also leave a comment and upload video or images.
Receive > Rate
Fields Parameter
Prompt message Product rating
title
Rate (Stars) Stars icon
Can rate from 1 to 5 stars
Default stars has no fill.
User to tap the stars as rating.
Required
Comment selection Button
Selection of buttons: Best Seller, Good Item Quality and Will order again
Not required
Comment box Text area
Alphanumeric
Shall accept special characters
Not required
Maximum of 100 characters length

35
 Placeholder: Leave your comment here
Add Photo Button
Button label name: Add Photo
On click it will browse on device gallery to upload images.
Not required
Maximum of 5 photos
Image type: JPEG/JPG, PNG
Image size for each photo: 2MB
Add Video Button
Button label name: Add video
On click it will browse on device gallery to upload video.
Not required
Maximum of 2 videos
Video type: Mp4, MOV
Video size for each upload: 5mb
Submit Button
Button label name: Submit
On click it will submit the added rate or comment and go back to To Receive
tab.
Back Button
Button label name: Back
On click it will go back to Order Receive tab.
4.4.3.4 Manage my Order >
My Purchase > To
Receive > Request
Return

Fields Parameter
Return request Modal header title
Request date Display the date when request of return has been submitted.
Format: MM/DD/YYYY HH/MM AM/PM
Email address Auto fetch email address
Reason Dropdown
Required
Selection:
● Product is damaged
● Product is malfunctioning
● Product does not match description
● Delivered wrong item
● Incomplete item
● Incomplete accessories
● Others

Total quantity Auto fetch display

Display the total count of ordered item quantity.
Total Amount Auto fetch
Display the total amount of all ordered items.
Product image Auto fetch display
Product name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display

36
 Add photo Button
Button label name: Add Photo
On click it will browse on device gallery to upload images.
Not required
Maximum of 5 photos
Image type: JPEG/JPG, PNG
Image size for each photo: 2MB
Add video Button
Button label name: Add video
On click it will browse on device gallery to upload video.
Not required
Maximum of 2 videos
Video type: Mp4, MOV
Video size for each upload: 5mb
Back Buton
Button label name: Back
On click it will close the prompt modal for return request and go back to To
Receive tab.
Submit Button
Button label name: Submit

On click it will submit the return request of the order.

Once submitted, order will be on the list of Return and Cancellation.
4.4.4 Manage my Order >
My Purchase >
Completed
Fields Parameter
To Receive Tab header name
Product image Auto fetch display
Product Name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Total Quantity Auto fetch display
Sub-total amount Auto fetch display
Computation: Unit price x Quantity
Shipping fee Auto fetch display
Voucher Discount Auto fetch based on discount amount on checkout.
Total Order Amount Auto fetch display
Computation: Sub-total amount + shipping fee
View Order Details Button
Button label name: View Order Details
On click it will go to My purchase View order information page.

Order Again
4.4.4.1 Manage my Order >
My Purchase >
Completed > View
Order Details
Fields Parameter
My Purchase Order Page header

37
 View Order Sub header title
Information
Order ID Auto fetch display
Order date Auto fetch display based on place order date.
Format: MM/DD/YYYY HH/MM AM/PM
Total Quantity Auto fetch display
Payment method Auto fetch display
Delivery address Auto fetch display
Ship by Auto fetch display
Voucher code Auto fetch display
Voucher discount Auto fetch display
Shipping fee Auto fetch display
Sub-total amount Auto fetch display
Total Order Amount Auto fetch display
Computation: Sub-total amount + shipping fee
Product image Auto fetch display
Product name Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Back Button
Button label name: Back
Onclick it will go back to To Ship tab.
Order Again
4.4.4.2 Manage my Order > The customer can order again the completed purchased items.
My Purchase > The customer should click “Order Again” button.
Completed > Order On click it will add on cart the completed items.
Again
5.0 Homepage This will be the landing page upon user go to the website.
Fields Parameter
Logo Display the merchant logo
Clickable – on click it will go to Homepage
Menu Menus are the following:
● Homepage – on click it will go to homepage screen
● Products – on click it will go to products screen
● Contact Us – on click it will go to contact us screen

Search Customer can enter to search data.

It can filter the entered keyword.
On click on search button – it will display the search results based on filtered
data.
Track your Order Link – it will redirect to Track your Order page
Link text: Track your Order

The customer can search and track their order.

The customer should enter their order id and system will display the status of
order.

See 5.1 for more details

Login or Register Link text: Login or Register
Login – on click it will go to login screen.
Register – on click it will go to registration screen.

38
 See 1.1 for more details on Login
See 2.1 for more details on Sign up
Notification icon Icon
It will display the Order status of the customer.
Cart icon Cart Icon
It will add on cart the added item.
It will show the quantity of added item together with the cart icon

On click it will go to Shopping cart, displaying all the added items.

User icon User icon
On click it will show the “Login or Register” on the menu (If the user has not yet
logged in to his account)

On click it will show the menu (if the user has been logged in to his account)
● Manage my account – it will redirect to Manage my account screen.
● Manage my order – it will redirect to Manage my order screen.
● Logout

Banner Display the image/s uploaded by the merchant.

This will display as slider
Category This is a section on homepage
Display the merchant categories
The customer can click arrow left or right to browse the categories.

Section title: Category

Display the Image of category
Display the name of category
Clickable on click it will go to products page display all products tagged into his
selected category.

Feature Products This is a section on homepage after the Category section

Display the merchant selected Featured Products
The customer can click arrow left or right to browse the featured products.

Section title: Featured Products

Display the Image of Products
Display the product name
Display the Amount of product
Display increase/decrease of quantity
Display button “Add to cart” – on click it will add to cart na item
Clickable on click it will go to products description page

Discounted Items This is a section on homepage after the Feature Product section
Display the merchant discounted items
The customer can click arrow left or right to browse the discounted items.

Section title: Discounted Items

Display the Image of Products
Display the product name

39
 Display the original amount of product and the discount amount or percentage
discount.
Display increase/decrease of quantity
Display button “Add to cart” – on click it will add to cart na item
Clickable on click it will go to products description page

Footer Display the footer details:

● More Info – this will display the text links set by the merchants. On
click on the selected link will redirect to its page.

● Follow Us – this will display the social media icons. On click it will go to
selected social media page.

● Join to our Newsletter – the customer can join to newsletter.

The customer should enter his email address on the text field then
click button beside on text field to join.

5.1 Homepage > Track The customer can track his order.
your order
1.The customer should go to the website where he ordered.
2.The user should click “Track your Order” link to be redirected on the page.
3.The user should enter the Order ID
4.The user should click “Submit” button
5.Once submitted, it will display the tracking of his order.

Fields Parameter
Track your Order Page title
Order ID Required
Alphanumeric
Can input up to 50 characters length
Shall not accept special characters
Placeholder: Please enter your order id

Submit Button
Button label name: Submit

On click, it will display the updated tracking of his order.

Display an error message upon user click Submit with empty Order ID:
1.This is a required field.

Display an error message if the order id is invalid or does not exist:

1.The order id is invalid. Please try again

5.2 Homepage > Notification will only be visible to those who have logged in their accounts.
Notification
Fields Parameter
Notification icon Icon
On click it will display a modal showing the login account notifications.

40
 Content text Display the update on his order
Close icon Close icon
On click it will close the notification modal.
6.0 Products Auto fetch all active products uploaded by the merchant.
6.1 Product list
6.2 Product detail
6.3 Shopping Cart

6.4 Checkout
6.1 Product list This will be the landing page once user click Products menu.
Fields Parameter
Banner Display the image/s uploaded by the merchant.
This will display as slider.
All Products Subtitle of the page.
Search Search box
The user can type the keyword and system to display the results.
System to search on products page.
Side Filter The user can use the side filter to easy search the products by Categories and
Price range.
Filter by:
1. Categories – display all categories alphabetical order.
2. Price range – see below range
● All
● Php 0 - 99
● Php 100 - 499
● Php 500 – 999
● Php 1,000 – 1,999
● Php 2,000 & above

Product image Display the product image upload.

Shall display the uploaded cover photo in merchant portal.
Product name Display the product name
Clickable
On click it will go to Product details page.
Product Price Display the product price
Quantity User can increase or decrease the quantity to be added on cart.
Default quantity is 1.
Rate Display the product rate
Add to cart Button
Button label name: Add to cart
On click it will add to cart the product
6.2 Product details
Fields Parameter
Product Image Display the product image/s uploaded.
Auto fetch on merchant portal
Product Name Display the product name
Auto fetch on merchant portal
Product Description Display the product details
Auto fetch on merchant portal
Product Price Display the product price
Auto fetch on merchant portal

41
 Format: PHP 0.00
Pre-order Optional display
Auto fetch on merchant portal
If the merchant tagged the item as pre-order on merchant portal display the
item on the consumer portal as Pre-order.
Also display the day/s to full fill the item: Items can be fulfilled in (no of days set
on merchant portal) days.
Variation Display the product variation
Auto fetch on merchant portal
Clickable, user can select the variation before adding to cart.
Quantity Can increase or decrease the quantity
Default quantity is 1.
Buy Now Button
Button label name: Buy Now
On click it will go to shopping cart page to proceed on checkout.
Add to Cart Button
Button label name: Add to Cart
On click, it will add to cart the item and the quantity.
Product Rate Display the product rate
Product Sub section title
Specification
Product Category Auto fetch on merchant portal
Display the product category of the item
Warranty Type Auto fetch on merchant portal
Warranty Auto fetch on merchant portal
Warranty Policy Auto fetch on merchant portal
Return Days Auto fetch on merchant portal
6.3 Shopping Cart 1.The customer should have an item on cart
Fields Parameter
Shopping Cart Page title
Select All Checkbox
On click it will tick all items on the cart.
Delete selected Delete icon
items On click it will check all items on shopping cart and will display a prompt
message:
Are you sure you want to delete all your items on cart?
Yes – it will delete all the items and go back to shopping cart.
No – it will close the prompt message and go back to shopping cart.
Checkbox on Checkbox
product On click it will tick the selected item/s one by one.
Product image Display product image
Product name Display product name
Clickable – on click it will go to product details page.
Variation Display the selected variation added on cart
Editable
On click it will go to product details page to select or change the variation.
The user can select other variation and click “Add to cart” button to update the
change on variation and go back to shopping cart.
Quantity Can increase or decrease the added quantity
Product Price Display the price of the added items on cart.
Formula: Quantity x Unit Price of product.

42
 Delete Button
Delete button
On click it will delete the item one by one.
Checkout Button
Button label name: Checkout
On click it will
6.4.1 Checkout > WITH
NO account logged
in
Fields Parameter
Checkout Page title
Customer Name Text field
Required
Can input up to maximum of 50 characters length
Shall not accept special characters
Alphanumeric
Placeholder: Please enter your name
Contact Number Text field
Required
Can input up to maximum of 11 characters length
Shall not accept special characters
Numbers
Placeholder: Please enter your contact number
Delivery Address Text field
Required
Can input up to maximum of 100 characters length
Shall not accept special characters
Alphanumeric
Placeholder: Please enter your delivery address
On type it will look the address on the google maps for better pin location on
delivery.
Product Image Auto fetch display
Product Name Auto fetch display
Variation Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Payment Method Sub section title
Payment Method Radio button
selection Display the payment method option
COD – it will proceed on Thank you page for successful order.
Checkout – if user select this payment method, on checkout it will go to
Checkout to proceed on payment.
Shipping Method Sub section title
Shipping method Radio button
selection Display the logistic name and rate
Display the tentative delivery date range of order.
Order Summary Sub section title
Sub-Total Display the total amount order item added on cart.
Formula: Unit price x quantity of item
Shipping Fee Display the shipping fee of the selected logistic.
Order Amount Display the total amount plus the shipping cost.

43
 Formula: Sub-total + Shipping cost.
Place Order Button
COD – it will proceed on Thank you page for successful order.
checkout as Payment method - On click it will redirect to PF E-com Checkout.
6.4.2 Checkout > WITH
account logged in
Fields Parameter
Checkout Page title
Delivery Address Text field
Required
Can input up to maximum of 100 characters length
Shall not accept special characters
Alphanumeric
Placeholder: Please enter your delivery address
On type it will look the address on the google maps for better pin location on
delivery.
Or
User can click “Select Delivery Address” button to go Address book and select
delivery address.
Product Image Auto fetch display
Product Name Auto fetch display
Variation Auto fetch display
Quantity Auto fetch display
Price Auto fetch display
Payment Method Sub section title
Payment Method Radio button
selection Display the payment method option
COD – it will proceed on Thank you page for successful order.
Checkout – if user select this payment method, on checkout it will go to
Checkout to proceed on payment.
Shipping Method Sub section title
Shipping Method Radio button
selection Display the logistic name and rate
Display the tentative delivery date range of order.
Order Summary Sub section title
Sub-Total Display the total amount order item added on cart.
Formula: Unit price x quantity of item
Shipping Fee Display the shipping fee of the selected logistic.
Order Amount Display the total amount plus the shipping cost.
Formula: Sub-total + Shipping cost.
Place Order Button
COD – it will proceed on Thank you page for successful order.
checkout as Payment method - On click it will redirect to PF E-com Checkout.
7.0 Contact Us
Fields Parameter
Let us know your Header text
inquiry
Name Required
Alphanumeric
Shall not accept special characters.
Maximum of 100 characters length

44
 Placeholder: Please enter your name
Contact number Required
Numeric
Maximum of 11 characters length
Placeholder: Please enter your contact number
Email Address Required
Alphanumeric
Shall accept special characters.
Maximum of 100 characters length
Placeholder: Please enter your email address
Message Required
Alphanumeric
Shall accept special characters.
Minimum of 10 letters and maximum of 250 characters length
Placeholder: Message
Submit Button
Button label name: Submit
On click it will display a success prompt message.
Thank you! Your inquiry has been successfully sent.
Okay – on click it will go back to Contact us page.
Successful Scenarios Spiels/Remarks
Successful Submit 1.It will display a success message.
Error Scenarios Spiels/Remarks
Unsuccessful Submit Display an error message upon required fields are empty when user click Submit
button
1.Name 1.This is a required field.
2.Contact Number 2.This is a required field.
3.Email Address 3.This is a required field.
4.Message 4.This is a required field.

7 Process Flow
Registration

Purchased an Order

Cancelled an Order

Return Order

45