Screen No: 1

Screen Name: Process Registration

Description: The user must select if they want to register as a Volunteer or Organization

Figure 37: Process Registration

ITEMS Type Required? Data Type Sample Data

Join as Employer Button Yes Object “Join as Employerr”

Join as Catcher Button Yes Object “Join as Catcher”

Logic
1. The user will click one of the options Register as “Employer” or “Catcher.”
2. Redirect to the Registration page based on the type of registration.
Screen No: 2

Screen Name: Registration page for Catcher

Description: The Registration Page for Errand Catcher allows

users to create an account by entering their personal details and
credentials. Once all required fields are completed and validated,
users can submit the form by clicking the Sign Up button. Upon
successful registration, a Success Prompt appears, confirming the
creation of the account and providing an option to proceed.
 Figure 38:

ITEMS Type Required? Data Type Sample Data

First Name TextBox Yes String John

Last Name TextBox Yes String Doe

DatePicker Yes Date 01/01/2000

Birthday

DropDown Yes String Male/Female/

Gender
Other
TextBox Yes String john_doe
Username

TextBox Yes Object [email protected]

Email
Address
TextBox Yes Object Password123
Password

TextBox Yes Object Password123

Confirm
Password
Modal Automatic Notificati Success! You
Success
Popup on have
Prompt
successfully
created an
account.
Button yes Action Redirects to the
Okay
next page

Logic

1. Input a user details , valid email address, password, and confirm password.

If any input field is empty, an error message will display.

If the password and confirm password do not match, an error message will display.

2. When the "Sign Up" button is clicked:

· If no errors are present:

  A success prompt will pop up (e.g., "Success! Account Created").

· If errors are present:

 Specific validation messages will appear to guide the user on how to correct their
input (e.g., "Invalid email format" or "Passwords must match").

Screen No: 2

Screen Name: Login Page

Description

The Login Page of Errand Catcher allows registered users to access their accounts by
providing their credentials. It features a clean, minimalist design with a welcoming
header and a login form, ensuring ease of use and quick access. Users can opt to save
their credentials for future logins by selecting the "Remember Me" option. If a user is
new, a Sign-up link is available for registration. Invalid credentials or empty fields
trigger error messages to assist users in correcting their input.

ITEMS Type Required? Data Type Sample

Data

Username TextBox Yes String johndoe

123
Password PasswordBo Yes Object Passwor
x d123
Remember Checkbox Optional Boolean True
Me
Sign In Button Yes Action
Button
 Sign-up Hyperlink Optional Action Redirec
Link t to
Registra
tion
Page

Logic

User Login Process

1. Input Credentials:

Users enter their Username and Password.

Users may check the Remember Me option to store credentials for future logins.

2. Validation Rules:

If the Username or Password fields are empty, display the message: "Username and
Password are required."

If the entered credentials are incorrect, display the message: "Invalid Username or
Password."

3. Sign In Button:

If validation passes:

Redirect the user to their dashboard or homepage.

If validation fails:

Display the appropriate error message prompting corrections.

4. Sign-up Link:

Clicking the Sign-up link navigates the user to the registration page to create a new
account.

Screen No: 4

Screen Name: Login Page

Description

The Catcher Dashboard serves as the main interface for logged-in

users of Errand Catcher. It greets the user with a personalized
message and provides quick access to features like searching for
errands, navigating through applications, viewing maps, and
accessing the user profile. The dashboard combines functionality
with a welcoming visual design, ensuring an intuitive user
experience.
ITEMS Type Purpose Example/
Behavior
Header Navigation Provides Links: Errands,
Bar navigation Applications, Map
options to
key sections.
Search Bar TextBox Allows users Enter “grocery
to search for delivery” → Results
specific
errands by
keywords.
Search Button Allows users Enter “grocery
Button to search for delivery” → Results
specific
errands by
keywords.
Notification Icon/Button Alerts users Displays a badge
Icon of updates or for notifications.
pending
actions (e.g.,
new errand
posts).
Profile Dropdown Provides "Profile" or "Sign
Dropdown Menu access to the Out" options.
user’s
account
settings or
logout.

Logic
Dashboard Navigation

Greeting Message:
 1. Dynamically updates to greet the logged-in user by their registered name
(e.g., "Hi, Catcher FRIIETZK").

Search Functionality:

1. Users can input keywords into the Search Bar and click Search.
2. The system processes the query and redirects users to a results page with
matching errands.
3. If the search query is empty, prompt the user with the message: "Please
enter a keyword to search."

Navigation Bar:

1. Errands: Redirects users to a page listing all available errands.

2. Applications: Displays errands the user has applied for or is managing.
3. Map: Opens a geolocation feature for viewing nearby errands.

Notification Icon:

1. Displays a badge with the number of unread or new notifications.

2. Clicking the icon opens a dropdown showing the latest updates or errand
actions (e.g., “You have 2 new errands”).

Profile Dropdown:

1. Allows the user to access their profile settings or logout from the
dashboard.
2. Selecting "Sign Out" redirects the user to the login page.

Screen No: 5

Screen Name: Login Page

Description

The Errands Dashboard allows users (catchers) to view and manage the errands they
have taken. The interface provides filters and an organized table displaying the details
of each errand, including employer information, errand title, start date, deadline,
status, and possible actions. This page ensures that catchers can track the progress and
status of their commissions efficiently.
 ITEMS Type Required? Data Type Sample Data

Search Bar TextBox No String "Grocery

Errand"
Date Filter DatePicker No Date "dd/mm/
yyyy"
Status DropDown No String "Pending",
Filter Menu "Completed
"
Sign In Button Yes Action
Button

Sign-up Hyperlink Optional Action Redirect to

Link Registratio
n Page

Logic

Filtering and Searching

Users can filter errands by:

1. Searching using the Search Bar (e.g., inputting "Grocery Errand").

2. Selecting a Date to display errands starting on or after the selected
date.
 3. Choosing a Status (e.g., "Pending" or "Completed").

Once filters are applied, the table updates dynamically to display relevant results.

Viewing Errand Details

Each row in the table includes an Action button (e.g., "View Details").

Clicking this button opens a detailed view of the selected errand, showing
information such as employer contact details, errand description, and more.

Table Updates

 The table displays:

o Employer: The name of the individual assigning the errand.
o Errand Title: A brief description of the errand.
o Start and Deadline: Dates when the errand begins and must be completed.
o Status: The current state of the errand (e.g., Pending, In Progress,
Completed).
 Data updates dynamically based on user activity or new input.

Screen No: 6

Screen Name: Application Page

Description
The Application Page for Errand Catcher allows users to
view newly available errands that they can apply for. It includes a
search bar for filtering errands by employer or errand title and
a dropdown menu for sorting errands by status (e.g., Available,
Urgent). The table below dynamically displays details for each new
errand, including the employer name, errand title, status, and
available actions for users to interact with (e.g., View or Apply).
ITEMS Type Required? Data Type Sample Data

Search Bar TextBox Optional String "Search

errands."
Status DropDown Optional String "Available /
Dropdown Urgent"

Logic

Search Functionality

1. The Search Bar allows users to filter errands by typing keywords such as the
employer name or errand title.
2. Only newly available errands that match the query are displayed in the table
below.

Filter by Status

1. The Status Dropdown provides options to sort errands by categories such

as:

1. Available: Displays errands that are open for application.

2. Urgent: Highlights errands with a time-sensitive requirement.

Errands Table

1. Displays the following fields for newly available errands:

1. Employer: Name of the person or company posting the errand.

2. Errand Title: Description or title of the errand.
3. Status: Indicates the availability or urgency of the errand.
 4. Action: Includes buttons for users to interact with the errand.

Action Buttons

1. View: Opens a detailed view of the errand, showing specific requirements or

instructions.
2. Apply: Allows users to submit an application for the errand.
Screen No:7

Screen Name: Basic Information Form

Description

This screen serves as the initial step for new users

registering with Errand Catcher. It collects the user's basic
personal information, including name, email, gender, birthdate,
address, and contact number. The process is divided into multiple
steps, starting with this page for basic details, followed by
document uploads and a review summary before completion.

ITEMS Type Required? Data Type Sample Data

Full Name TextBox Yes String John Doe

Email Address Text Box Yes String johndoe@g
mail.com
Gender Dropdown Yes String Male/
Female/
Other
Birthdate Date Picker Yes Date 01/01/1990
Home Address Text Box Yes String 123 Main
Street
Contact Text Box Yes String 987654321
Number 0

Logic

Input Validation:

Ensure all required fields are completed before allowing the user to proceed.

1. Display an error message if any field is left blank or invalid data is entered.

Gender Dropdown:

1. The user must select a valid option from the dropdown menu.
 Date Picker:

1. Only valid dates in the format dd/mm/yyyy should be accepted.

Next Button Functionality:

1. When all fields are valid, clicking the Next button saves the input data and
transitions to the next step, Upload Valid Documents.
2. If errors exist, validation messages will appear near the corresponding fields.

Screen No:8

Screen Name: Upload Valid Documents

Description

This screen allows users to upload necessary documents as

part of their registration for Errand Catcher. It provides fields for
uploading identification images and validating if the user holds a
license. Users can navigate back to the previous step or proceed
after uploading files.

ITEMS Type Required Data Type Sample Data

?

Identification File Upload Yes mage id_front.jpg

Image (File 1) (JPG, PNG,
etc.)
Identification File Upload No Image id_back.jpg
Image (File 2) (JPG, PNG, (optional)
etc.)
Have License? Checkbox Yes Boolean Checked/
Unchecked
Prev Button Button No Navigation Goes back
to Basic
Info page
Submit File Button Yes Navigation Proceeds to
Button Review
Summary

Logic

File Upload Validation:

1. Ensure the first file upload (File 1) is mandatory and not empty before
submission.
 2. Check for valid file formats (e.g., JPG, PNG) and file size (e.g., max 5MB).

Optional File Upload:

1. File 2 is optional and can remain empty.

License Validation:

1. Users must check the "Have License?" checkbox to proceed.

Navigation:

1. Prev Button: Returns to the Basic Information step without saving current
progress.
2. Submit File Button: Validates the inputs, uploads the files to the server, and
navigates to the Review Summary page.

Confirmation Prompt:

 When the user clicks Submit File, a modal appears:

o Title: Confirmation
o Message: "Are you sure you want to submit this valid documents?"
o Buttons:
 Cancel: Dismisses the modal and returns the user to the Upload
Valid Documents screen.

Yes: Validates and uploads the files, then navigates to the Review
Summary page.

Screen No:8

Screen Name:Personal Infor Summary

Description

The Personal Info Summary Page allows users to review their submitted
information before finalizing the registration process. This page ensures users can
verify and confirm the accuracy of their details, including basic information and
uploaded documents, before submission. The interface provides a clear summary and
navigation buttons for corrections or final submission.
 ITEMS Type Required Data Type Sample Data
?

Progress Step Yes String "Step 3 of

Indicator Progress 4: Review
Bar Summary"
First Name TextBox Yes String "John"
(Read-Only)
Last Name TextBox yes String "Doe"
(Read-Only)
Sex Label/Text Yes String "Male"
Birthday Yes Date "2002-12-
01"
Label/Text

Email Label/Text Yes String "johndoe@g

mail.com
Contact # Label/Text Yes String "099153486
7"
Uploaded Image Yes File/URL Image
Documents Previews thumbnails
Back Button Button/Link Yes Navigation Redirect to
the
previous
step
Submit Button Button Yes Action Finalizes
and submit

Logic
Reviewing Submitted Information

 All fields (First Name, Last Name, etc.) are displayed as read-only to avoid accidental
editing.
 Uploaded documents are shown as thumbnails for quick review.
 Users can click on document thumbnails for a larger view.

Navigation

 Back Button: Redirects users to the previous step (e.g., Upload Valid Documents) to
make corrections while preserving existing data.
 Submit Button: Triggers the following actions:

o Displays a confirmation modal to confirm the user's intent.

o On confirmation, submits data to the server and redirects to the "Done"
page.
o On cancellation, keeps the user on the current page.
Validation

 Before displaying the summary, ensure all required fields are populated.
 If validation fails (e.g., missing or invalid data), redirect the user to the appropriate
step with error messages.

Uploaded Documents

 Display thumbnails of uploaded files in the summary.

 Validate the format and size of the uploaded files during earlier steps to avoid errors
at this stage.

Screen No:8

Screen Name:Verification Submission

Description
The Verification Submission screen notifies users
(catchers) that their registration and documents are being sent to
the admin for review. It also provides a call-to-action, encouraging
users to explore the platform while waiting for approval.

ITEMS Type Required? Data Type Sample Data

Submission Label (Text) Yes String "Submitting

Message Verification
to the
Admin!"
Profile Button Button Yes Navigation "Redirect to
Action Profile
Page"
Logic

Submission Status:

1. Display the steps in the registration process with the current step (Wait
Admin for Approval) highlighted.
2. Show a confirmation message informing the user that their submission is
under review.

Banner Alert:

1. Provide a dismissible notification banner to reassure users that the

verification process is in progress.

Call to Action:

1. Include a button to navigate to the user's profile, enabling them to explore

services while waiting for admin approval.

Screen No:8

Screen Name:Employer Dashboard

Description

The Employer Dashboard provides a high-level overview for

employers, allowing them to manage their errands effectively. It
includes a greeting message, navigation options, and quick
statistics summarizing their posts, applicants, and pending errands.
The interface is designed for a smooth user experience, ensuring
employers can easily access essential functions and updates.
 ITEMS Type Required? Data Type Sample Data

Navbar: Button/Link Yes Navigation "Redirect to

ONGOING Action Ongoing
ERRANDS Errands"
Navbar: MY Button/Link Yes Navigation "Redirect to
ERRANDS Action Profile
Page"
Navbar: Button/Link Yes Navigation "Redirect to
APPLICANTS Action Applicants
Section"
Navbar: MAP Button/Link Yes Navigation "Redirect to
Action Map View"
Navbar: Icon/Button No Action "Bell Icon
NOTIFICATIO for Alerts"
NS
Navbar: Button Yes Navigation "Redirect to
EMPLOYER Action Profile
Profile Page"
Logic

Greeting and Personalization:

1. Dynamically display the employer's name in the greeting message.

Quick Stats:

1. Show the total number of posts, applicants, and pending errands in colorful,
easy-to-read cards.
2. Each counter updates dynamically based on real-time data.

Navigation:

1. Enable employers to navigate to key sections, including ongoing errands,

personal errands, and applicant management, via the navigation bar.

Notifications:

1. Include a notifications icon for important updates such as new applications

or changes in errand status.

Screen No:8
Screen Name:Employer Profile
Description

The Employer Profile screen allows users to view and manage their personal
details, including profile image, contact information, and additional documentation.
The profile verification status is prominently displayed to indicate whether the
account is verified or not. Editable fields and file upload options ensure that users can
update their details conveniently.
 ITEMS Type Required? Data Type Sample Data

Profile Picture Image No File/URL "Default

avatar or
uploaded
image"
Choose Image Button/Link No File "Click to
File Button Upload upload or
Action update
profile
picture"
Verification Label (Text) Yes Enum "UNVERIFI
Status ED" (red
background
)/
"VERIFIED"
(green
background
)
Username Text Field Yes String "employer"
First Name Text Field Yes String John
Last Name Text Field Yes String Doe
Gender Dropdown Yes Enum "Male /
Female /
Other"
Age Text Field Yes Integer 24
Birthdate Date Picker Yes Date "27/04/200
0"
Address Label (Text) Yes String "employer@
gmail.com"
Contact Label (Text) Yes String "Not
Number provided"
Skills Label (Text) Yes String "No skills
provided."
Description Text Area Yes String "Short bio
or
additional
information
"
Documents Button/Link No Action "Upload/
Section View
related
documents"
Edit Button Button No Action "Save
updated
information
"
Logic
1.

Profile Picture:

1. Users can upload or replace their profile image via the "Choose Image File"
button.

Verification Status:

1. Display the account status ("UNVERIFIED" or "VERIFIED") in a clear and

distinct color.
2. Optionally, implement a tooltip to explain the verification process.

Editable Fields:

1. Fields like username, first name, last name, gender, and age are editable to
allow user updates.

Documents:

1. Provide a section for uploading or viewing employer-related documents,

ensuring proper document management.

Save Changes:

1. The "Edit" button saves any updates made to the profile. Data validation
ensures all required fields are completed correctly

Screen No:8

Screen Name:Skills Selection and Input

Description

The Skills Selection and Input screen allows users to add

their skills from predefined options or by entering custom skills.
The interface encourages an intuitive, user-friendly experience
where skills can be easily added to the user's profile for showcasing
expertise.

ITEMS Type Required? Data Type Sample Data

Select Your Button No Enum "Communic

Skills Here Group (Skill ation",
Tags) "Leadership
",
"Plumbing"
Custom Skill Text Field No String "Public
Input Speaking"
Add Skill Button Yes Action "Add
custom skill
to the
selected
list”
Skills You Label Yes List "Communic
Have Selected (Dynamic) (Skills) ation,
Problem
Solving"
Next Button Yes Action "Navigate
to Upload
Valid
Documents
step"

Logic

Predefined Skill Selection:

1. Users can click on predefined skill buttons (green tags) to add them to their
selected skills list.
2. Selected skills dynamically appear in the "Skills You Have Selected" section.

Custom Skill Input:

1. Users can type a custom skill into the input field and click the Add Skill
button to include it in their list.
2. Validation ensures the input is not empty or a duplicate of existing skills.

Dynamic Updates:

1. The "Skills You Have Selected" section updates in real-time to reflect all
selected or added skills.
 Next Navigation:

1. The Next button becomes enabled once at least one skill is selected. It
navigates the user to the next step, "Upload Valid Documents."

Responsive Design:

1. The screen adapts to various devices, ensuring usability on desktops, tablets,

and mobile devices.

Screen No:8

Screen Name:Upload Valid Documents

Description

The Upload Valid Documents screen allows users to upload

required identification and verification documents as part of the
validation process. This ensures a secure and authenticated user
profile.

ITEMS Type Required? Data Type Sample Data

File Upload File Input Yes File "ID_Card.jp

Field 1 (Image)) g"

File Upload File Input No File "Proof_of_A

Field 2 (Image) ddress.png"

Prev Button No Action "Navigate

to previous
step"”
Submit File Button Yes Action "Submit the
uploaded
files"

Logic
1. File Upload Validation

 Required Validation:
The first file upload field is mandatory. Users cannot proceed without uploading a
valid file.
 Optional Validation:
The second file upload field is optional.
  File Type:
Accepts only image files (e.g., JPG, PNG).
 Error Handling:
Displays an error message if invalid file types are uploaded or if the required field is
left empty.

2. Navigation Logic

 Prev Button:
Navigates users to the previous screen ("Input Basic Information").
 Submit File Button:
Becomes active once the required file is uploaded and performs the following
actions:

o Validates the uploaded file(s).

o Submits the files to the server for processing.
o Redirects the user to the next step, "Review Summary."

Screen No:8

Screen Name:Employer Profile

Description

The Verification Submission screen informs users that

their uploaded documents have been submitted for review and
verification by an admin. It serves as the final step of the document
upload process, providing a clear confirmation and next steps for
users.
 ITEMS Type Required? Data Type Sample Data

Profile Button Button Yes Action) "Navigate

to user
profile"

Admin Notification Yes String

Confirmation
Note
"Wait Admin for the confirm

Logic
1. Submission Confirmation

 After successfully uploading the documents, this screen is displayed to assure the
user their information is being processed.

2. Admin Review Process

 Displays a notification with the message: "Wait Admin for the confirmation process."
 Notification has a dismissible option (marked with an X).

3. Navigation

 Profile Button:

o Redirects the user to their profile page where they can explore services
offered on the platform.

Screen No:8

Screen Name:Current Errands Management

Description

This screen provides a comprehensive view of the user's

current errands. It includes sorting, filtering, and search
functionalities to manage and organize tasks efficiently.
 ITEMS Type Required? Data Type Sample Data

Status Dropdown Menu No Enum "Pending",

Dropdown (Status "Complete"
Types)

Type Dropdown Menu No Enum "Delivery",

Dropdown (Task "Repair"
Types)

Search Bar Text Field No String "Errand ID

or
Description
"
Ongoing Navigation Yes Action "Navigate
Errands Tab Tab to Ongoing
Tasks"
My Errands Navigation Yes Action "Navigate
Tab Tab to My
Errands"
Applicants Navigation Yes Action "Navigate
Tab Tab to
Applicants"
Map Tab Navigation Yes Action "Navigate
Tab to Map
View"

Screen No:8

Screen Name:Current Errands Management

Description

This screen provides a summary for employers to manage the errands they
have posted on the platform. It displays key information in a tabular format and
allows employers to search, filter, and take action on their posted errands.
 ITEMS Type Required? Data Type Sample Data

Search Bar Input Field No String "Search..."

Status Filter Dropdown No String "All Status",

Dropdown (enum) "Pending",
"Completed"

Errands Table Yes String "Errand ID or

Table Description"
Table Column Yes Action ID, Errand Title,
Columns s Type, Start
Date, Due Date,
Status, Action
Action Button Yes Action Edit, Delete
(row-
specific
)

Logic
1. Search Functionality

 Employers can type in keywords to search for specific errands in the table.
 The search is dynamic and filters results based on input.

2. Filter by Status
  The dropdown allows filtering errands by their current status (e.g., All Status,
Pending, In Progress, Completed).
 By default, it shows all errands.

3. Table Features

 Column Details:

o ID: Unique identifier for each errand.

o Errand Title: Brief description or title of the errand.
o Type: Type/category of the errand (e.g., Delivery, Maintenance).
o Start Date & Due Date: Timeline for the errand.
o Status: Current progress state (e.g., Pending, Active, Completed).
o Action: Buttons for row-specific actions (Edit or Delete).

 Sorting: Columns like Start Date, Due Date, or Status can be sorted.

4. Row-Specific Actions

 Edit Button: Opens a form to update errand details.

 Delete Button: Prompts a confirmation modal to delete the errand.

Screen No:8

Screen Name:Applicant Management

Description

This screen allows employers to view and manage applicants for their posted
errands. Employers can filter through applicants, view their qualifications, and take
actions such as approving, rejecting, or contacting them.
 ITEMS Type Require Data Type Sample Data
d?

Search Bar Input Field No String "Search..."

Applicants Table No String "All Status",

Table (enum) "Pending",
"Completed"

Table Columns Yes Action Date, Catcher,

Columns Qualification,
Errand Title,
Action
Action Button Yes Action Approve,
(row- Reject, Contact
specific)