MIDTERM LAB ACTIVITY 2 – INTERFACE DESIGNING

BS Information Technology

Prof. Ramiro Z. Dela Cruz

Byte Me! – Itp102

 MARY KATHARINE CHARISMA AZORES CHRISTALIE JEAN
ASUNCION DIA

ROMAR LLEGUE ALLYSA SAMANTE

Byte Me! – Itp102

 Procedures:
a. Confer with your groupmates regarding a proposed system. The system must be something that
has technology/technologies integrated into it.
b. Provide an interface (and input) design for your chosen project. Kindly consider the insights
provided in the lab material for such matters.
c. Provide descriptions/illustrations/specifications for the design features (as may be gleaned in the
lectures).
d. Specify the members of the group in alphabetical order (Family Name, Given Name) alongside
the pictures of each of the members. Kindly, use this format:

f. Provide also some proof of communication among group members to be included within the
PDF.
g. Put everything within a PDF (which is named after your group name).
h. Upload the PDF within a designated folder in Google Drive (Only one member shall upload the
PDF in Google Drive).
Everyone must upload (including the one who will upload the file in Google Drive) the link to the
PDF in the Pinnacle LMS (Note: upload the link to the file, not the link to the folder.)
https://drive.google.com/drive/folders/1VADm1Bo7OiyiHM3JihSOslOcVtCznPLr?usp=sharing

Byte Me! – Itp102

 KATEAPS INTERFACE DESIGNING

Our team proposed a mechanism for ordering food. We create our own company website
to provide services to customers. We approach the KATEAPS, which serves a variety of pastries,
desserts, coffee, and drinks. Customers can use this website to order the products they want and
pay with gcash or cash on delivery without having to visit a physical store. This will help the user
experience less difficulty and find it simpler to order their cravings. Moreover, both mobile and
laptop/PC users can access this website. These are some KATEAPS interface examples:

WEBSITE KATEAPS INTERFACE DESIGNING:

KATEAPS LOGO

This will be the interface that

the user will see upon running
the website. It will first allow
the user to log in before
accessing the home page

Byte Me! – Itp102

 fdg

If the user has account

already, they can now log in
to the website. But if the user
does not have any account,
they need to sign in first to
have an account

This is the interface of the

sign-up button. It will ask the
user to input its first and last
name and enter their email
and password to create an
account

After logging in, the user can now

order to the website. At first it, home
page will first show in the interface
and will let the user to choose
whether they prefer pastries,
desserts, coffee & drinks. This page
also shows the best sellers of the
KATEAPS

Byte Me! – Itp102

 If the user clicks the pastries
in the home page, it will show
all the menus and prices of
pastries to order.

If the user clicks the desserts

in the home page, it will show
all the menus and prices of
desserts to order.

If the user clicks the coffee &

drinks in the home page, it
will show all the menus and
prices of coffee & drinks to
order.

Byte Me! – Itp102

 The website will allow the
user to add a certain product
to their cart in order to
purchase it when they click
on it in the menu.

The user can now review all of

their orders after placing them
by seeing their order summary.
This also includes method of
payment, such as gcash or cash
on delivery.

The user can also view the

KATEAPS website’s about us
page, which helps them learn
more about the site's owners.

Byte Me! – Itp102

 VIEW OF THE WEBSITE OF KATEAPS IN MOBILE:

Byte Me! – Itp102

Byte Me! – Itp102
 GROUP MEMBERS:

Family Name, Given Name, MI Clear Picture Role/Participation in the Group

Project

1 Asuncion, Mary Katharine UI Designer - Designed the website

and mobile site for Kateapunero
and the function of the system /
Interface designing/ creating
documents/ proof reading

2 Azores, Charisma Mobile Developer - Helped in

designing the UI for mobile
browser/ helps Interface designing/
creating documents/ proof reading

3 Dia, Christalie Web Developer - Helped in

designing the UI for Web/ helps
Interface designing/ creating
documents/ proof reading

4 Llegue, Romar Editor - Created the wireframe for

UI design / helps Interface
designing/ creating documents/
proof reading

5 Samante, Allysa Mhay Project Manager - Proposed the

idea for the system, explained how
it will work & function. Helped in
designing the websites. / helps
Interface designing/ creating
documents/ proof reading

Byte Me! – Itp102

 PROOF OF COMMUNICATION:

Byte Me! – Itp102